基于HTML5的Canvas动画设计教学的研究
2021-07-28林观德
摘 要：HTML5新增的Canvas元素，它是一种像素级别的位图绘图技术，实现较为简便，不需要安装插件，大部分浏览器都支持该技术。Canvas元素的功能也较为强大，除了可用于任意图形和动画的绘制外，与云技术相结合起来，还可用于巨型复杂图形的绘制。文章对基于HTML5的Canvas进行研究，主要针对Canvas API提供的裁切方法clip（）创建遮罩动画，通过Canvas动画设计教学实例步骤的详细展示，使学生在学习中逐步掌握Canvas动画的原理和制作方法，进而提高学生动画设计与制作的技能技巧。
关键词：HTML5;Canvas;动画制作
中图分类号：TP312 文献标识码：A 文章编号：2096-4706（2021）02-0063-03
Abstract：Canvas element added in HTML5 is a pixel level bitmap drawing technology，which is easy to implement and does not need to install plug-ins. Most browsers support this technology. Canvas element is also powerful. In addition to drawing arbitrary graphics and animation，combined with cloud technology，it can also be used to draw giant complex graphics. This paper studies the Canvas based on HTML5，mainly aiming at the clipping method clip（） provided by Canvas API to create mask animation. Through the detailed display of the steps of Canvas animation design teaching examples，students can gradually master the principles and production methods of Canvas animation in learning，and then improve their animation design and production skills.
Keywords：HTML5;Canvas;animation production
0 引 言
Canvas元素是HTML5中新增開发跨平台动画和游戏的一个重要元素，可以用于绘制图形，合成制作照片或动画，能够在Web页面上对图像和视频进行像素级操作。Canvas的动画应用方向广泛，例如，生产装置实时监测可视化、游戏开发、地图技术的进步等。网络传输速度快且可交互的Canvas元素特点，可用于挖掘游戏开发的潜力。Canvas动画应用具有良好的发展前景。
因应社会发展和教学课程的需要，对Canvas元素展开研究，以提升和丰富基于HTML5的Canvas动画教学的质量与内涵。在Canvas动画设计教学实践中，结合Canvas的应用功能，通过教学案例分析，使学生在学习实践中逐步掌握Canvas动画的原理和制作方法，并进一步拓展学生动画设计与制作的空间视野。特别是对高职院校的学生而言，学习与掌握应用功能强大的Canvas动画元素，更有利于其增长专业技能以及拓宽就业渠道。
1 Canvas概述
HTML5标准中新增的Canvas元素绘制图形，功能非常强大，不需要在服务器端上运行。通过JavaScript可以得到网页中的Canvas对象，并获取该对象二维（2D）的上下文，通过2D上下文可以调用Canvas API绘制图形。可以绘制盒、圆、路径、字符以及添加图像等功能。Canvas最早由苹果引入一个开源的浏览器引擎（WebKit），用户在Mac OS X WebKit中创建控制板部件，后来又在Safari和Google Chrome等浏览器中采用了Canvas技术。Canvas技术也得到了Web超文本标准化应用技术工作组采纳为新一代的Web标准化开发技术。在HTML5版本前，网页Web是用SVC、VML技术绘制图形的，SVG、VML实现一个矢量图形是通过XML可扩展标记语言绘图来完成的，矢量图形再不能满足当今移动设备的需要。而在HTML5中新增一个Canvas元素，从而提供了各种绘图函数，这让绘图变得更加简单，可以在Web页面直接生成位图级别图像，满足了现代移动设备位图级别图像的需求。
总而言之，在HTML5版本之前，在浏览器中绘制图形相对来说是比较困难的，HTML5中新增了Canvas元素后，绘制二维图形就变得极其容易了。
但Canvas也有不足之处。Canvas的位图画布与分辨率有关，在不同的分辨率下Canvas绘制图形有所不同，Canvas也不支持事件处理。
2 Canvas动画的实现
在Canvas画布中制作动画，实现步骤分为绘制帧、清除和重绘三步。Canvas实现一个动画的过程，实际上是通过间隔时间绘制图形和清除图形的步骤，并通过定时循环操作来实现的。
Canvas为开发者提供了自定义绘图的接口，它只是一个空白的画布，真正绘画要在JavaScript程序中调用Canvas API接口来完成。所以在浏览器实现动画，必须利用Canvas标签画布绘制所需的图形，接着清空和在下一个位置重复前面的操作。通过设置时间，清空画布以及算法变换图形或图片的位置，重复执行便形成动画。可采用下面三种方法之一来实现。
setInterval（）
setTimeout（）
requestAnimationFrame（）
下面以采用setInterval（）方法为Canvas动画设计教学实例。
2.1 Canvas动画创建步骤
首先在页面中利用Canvas元素定义画布，使用JavaScript获取网页中的Canvas对象，然后使用该对象调用Canvas API进行图形的绘制或图像的处理。
第一步，Canvas标签语法定义：
其中，id为Canvas元素的标识;height为Canvas画布的高度，单位为像素;width为Canvas画布的宽度，单位为像素。
该“画布”默认是无色透明的，通过style样式可设置背景颜色或边框等属性显示出“画布”来，实现区域的可视化。
第二步，获得Canvas对象。下文为代码定义语法：
document.getElementById（对象id）
创建画布后，使用document.getElementById（）方法获取网页中的对象，即获取ID号对应Canvas的访问权。
第三步，获得id对象的2D渲染上下文对象。下文为代码定义方法：
document.getContext（“2D”）;
使用getContext方法获取canvas元素的上下文。
用Canvas标签绘制实现动画的步骤为：
（1）预先编写好函数，即绘制图形或图像，在该函数用clearRect方法，根据需要擦除画布局部或整体。
（2）定义图形或图像的移动（或作为其他动作函数的定义）。
（3）使用setInterval方法设置动画的间隔时间，反复执行前面定义的函数。
（4）如果要停止循环，可利用clearInterval（）函数清空计时器。
setInterval函数是HTML5中自带的函数，该函数相隔一段时间调用执行一次函数。该函数有两个参数，参数1表示要执行动画的函数，参数2为时间间隔，单位为毫秒。
2.2 Canvas动画实现方法
使用Canvas API提供的裁切方法clip（）制作遮罩动画的HTML代码为：
<！DOCTYPE html>
//设置一块宽600，高600的画布，图片圆形展开后收缩将在画布内滚动;
var d=10;
varrd=5;
var dc=document.getElementById（"yC"）;
var dx=dc.getContext（"2d"）;
varge = new Image（）; //創建对象实例
ge.src = "web.jpeg";
ge.onload=function（）{
dx.drawImage（ge，0，0）; // drawImage（）方法在画布上定位（x，y）图像
}
setInterval（"draw（）"，100）; // setInterval（）方法中的draw（）表示执行动画的函数，100为时间间隔，以100毫秒来调用函数draw（）
function draw（）
{
dx.clearRect（0，0，600，600）; // clearRect（）方法清空给定矩形内的指定像素。
dx.save（）; //在使用clip（）方法前，调用save（）方法对当前画布区域的状态推送到栈中保存
dx.beginPath（）; // beginPath（）函数为开始路径（或重置的当前路径）
dx.arc（300，300，d，0，Math.PI*2，true）; //arc（）方法用于创建圆
dx.closePath（）;
dx.fillStyle="yellow"; //该属性设置用于填充绘画的颜色、渐变或模式
dx.fill（）; // 该方法填充当前的图像
dx.clip（）;//调用clip（）方法来设置从原始画布中裁剪任意形状区域
dx.drawImage（ge，0，0）; //把图形绘制到指定的坐标
dx.restore（）; //restore（）方法将绘图状态恢复为save（）方法上一个保存的状态从栈中弹出，所有设定都恢复
d=d+rd;
if （d>300） rd=-5;
else if （d<=0） rd=5;
}