如何使用Canvas及动画实现

这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

【如何使用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');

• 1
• 2

基本形状

fillRect(x, y, width, height) 
绘制一个填充的矩