摘 要：HTML5 新增的Canvas 元素，它是一种像素级别的位图绘图技术，实现较为简便，不需要安装插件，大部分浏览器都支持该技术。Canvas 元素的功能也较为强大，除了可用于任意图形和动画的绘制外，与云技术相结合起来，还可用于巨型复杂图形的绘制。文章对基于HTML5 的Canvas 进行研究，主要针对Canvas API 提供的裁切方法clip() 创建遮罩动画，通过Canvas 动画设计教学实例步骤的详细展示，使学生在学习中逐步掌握Canvas 动画的原理和制作方法，进而提高学生动画设计与制作的技能技巧。
关键词：HTML5；Canvas；动画制作
DOI:10.19850/j.cnki.2096-4706.2021.02.016
中图分类号：TP312 文献标识码：A 文章编号：2096-4706（2021）02-0063-03
Research on Canvas Animation Design Teaching Based on HTML5
LIN Guande
（Guangzhou College of Technology and Business，Guangzhou 510850，China）
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
参考文献：
[1] 王芳. 基于HTML5 的教学系统的设计与实现 [D]. 南昌：华东交通大学，2016.
[2] 赵志敏. 基于HTML5 和Node.js 的在线教育系统的设计和实现 [D]. 北京：北京交通大学，2016.
[3] 周恒，余丹. 基于HTML5 的图形图像协同处理技术分析[J]. 无线互联科技，2016（18）：69-70.
[4] 梁敦毫. 基于HTML5 Canvas 绘图技术应用研究 [J]. 数码世界，2020（4）：102-103.
[5] 刘贵国.Html+Javascript 网页制作与开发完全手册 [M].北京：清华大学出版社，2014.
[6] 张晓蕾. 网页设计与制作教程：HTML+CSS+Javascript[M]. 北京：电子工业出版社，2014.
作者简介：林观德（1954—），男，汉族，广东广州人，高级实验师，本科，研究方向：计算机应用。