这里是修真院前端小课堂,每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能,本篇分享的是:
【如何使用Canvas及动画实现】
如何使用Canvas及其动画实现
什么是Canvas?
Canvas API(画布)是在HTML5中新增的标签用于在网页实时生成图像,并且可以操作图像内容,基本上它是一个可以用JavaScript操作的位图(bitmap)。
Canvas 对象表示一个 HTML 画布元素–。它没有自己的行为,但是定义了一个 API 支持脚本化客户端绘图操作。
定义和用法
首先,在HTML元素中定义一个canvas标签
<canvas id="tutorial" width="150" height="150"></canvas>
- 1
获取CANVAS对象及渲染上下文
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');