Canvas画布
之前Web上的动画都是使用Flash实现的。比如动画，广告，游戏等等，基本上都是Flash实现的。
Flash是有缺点的，需要安装Adobe Flash Player, 漏洞多，重量大，卡顿不流程等。
Html5提出了一个新的canvas标签，彻底颠覆了Flash的主导地位。现在无论广告，动画，游戏都可以使用canvas实现了。Canvas是一个轻量级的画布，使用Canvas进行JS编程。
Canvas基本使用
<body>
<!-- canvas画布的宽高设置需要使用width="500px" height="400px"属性，如果使用css会导致绘制内容变形 -->
<canvas id="canvasId" width="500px" height="400px" style="background-color: antiquewhite;">
低版本提示语，支持canvas标签的浏览器看不到
</canvas>
<script>
var canvas = document.getElementById('canvasId')
// 获取2d画布
var ctx = canvas.getContext('2d')
// 设置填充色
ctx.fillStyle='red'
// 填充一个矩形
ctx.fillRect(10,20,100,100)
console.log(ctx);
console.log(canvas);
</script>
</body>
Canvas的像素化
使用canvas绘制的图形一旦绘制成功了，canvas就像素化了它们，canvas没有能力从画布上再次拿到这个图形，也就是说我们是没有方法去修改已经画到画布上的内容了。这也是canvas比较轻量级的原因，Flash则可以通过api对已经上画布的内容进行再次绘制。
如果想让这个canvas图形移动（被修改），必须按照清屏-更新-渲染的逻辑进行编程，简单说就是重新再画一次。<body>
<canvas id="myCanvasId" width="500" height="500" style="background-color: antiquewhite;">
请升级浏览器
</canvas>
<script>
var canvas = document.getElementById('myCanvasId')
var ctx = canvas.getContext('2d')
ctx.fillStyle = 'blue'
ctx.fillRect(100, 100, 100, 100)
var left = 100
setInterval(() => {
// 1.清屏
ctx.clearRect(0, 0, 500, 500)
// 2.更新
left++
// 3.渲染
ctx.fillRect(left, 100, 100, 100)
}, 10);
</script>
</body>
Canvas动画
因为canvas不能修改已经绘制到屏幕的图像，所以我们要维护一组对象的状态和属性，通过对象生成对应的动画帧页面，在动画时将对象状态通过清屏-更新-绘制的流程进行更新页面。所以canvas采用的是面向对象编程的。
面向对象动画，定义一个类，里面维护着动画所需要的所有属性和状态，然后实例化多个对象，对应维护多个动画状态和属性。
<body>
<canvas id="myCanvasId" width="500" height="500" style="background-color: antiquewhite;">
请升级浏览器
</canvas>
<script>
var canvas = document.getElementById('myCanvasId')
var ctx = canvas.getContext('2d')
// 定义一个类
function Rect(x, y, w, h, color) {
this.x = x
this.y = y
this.w = w
this.h = h
this.color = color
}
// 添加类方法
Rect.prototype.update = function () {
this.x++;
}
Rect.prototype.render = function() {
ctx.fillStyle=this.color
ctx.fillRect(this.x, this.y, this.w, this.h)
}
// 实例化
var r1 = new Rect(10, 100, 100, 100, 'blue')
var r2 = new Rect(10, 300, 100, 200, 'red')
setInterval(() => {
ctx.clearRect(0, 0, 500, 500)
// 第一个对象
r1.update()
r1.render()
// 第二个对象
r2.update()
r2.render()
}, 10);
</script>
</body>
Canvas绘制API
利用canvas可以绘制矩形填充，矩形边框，自定义路径等。
绘制路径的作用是为了设置一个不规则的多边形状态，路径是闭合的。使用路径绘制的步骤如下：
1.打开路径
2.设置路径起点
3.使用命令画出路径
4.封闭路径
5.填充或绘制已经封闭的路径
<body>
<canvas id="myCanvasId" width="500" height="500" style="background-color: antiquewhite;">
请升级浏览器
</canvas>
<script>
var canvas = document.getElementById('myCanvasId')
var ctx = canvas.getContext('2d')
console.log(ctx);
// 画矩形填充
ctx.fillStyle='red'
ctx.fillRect(50,100,100,100)
// 画矩形框
ctx.strokeStyle='blue'
ctx.strokeRect(200,100,100,100)
// 画路径
// 1.打开路径
ctx.beginPath();
// 2.移动绘制点
ctx.moveTo(50, 400);
// 3.描述行进路径
ctx.lineTo(100, 450);
ctx.lineTo(200, 300);
// 4.闭合路径
ctx.closePath();
// 5.绘制路径
// ctx.strokeStyle = 'brown'
// ctx.stroke();
// 或
ctx.fillStyle = 'pink'
ctx.fill();
// 画弧度
// 1.开启路径
ctx.beginPath()
// 2.画圆弧
// 400, 400为起点， 50为半径， 0, 1为开始结束弧度（圆有2Pi个弧度约等于7个弧度）， false为顺时针画；
ctx.arc(400, 400, 50, 0, 1, false);
// 3.绘制路径
// ctx.closePath()
// stroke()画实际路径，fill()会自动加colsePath()画出的是闭合路径。
ctx.strokeStyle='green'
ctx.stroke()
</script>
</body>
浙公网安备 33010602011771号