开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第3天， 点击查看活动详情
HTML5新增canvas元素，与其他传统div元素对应页面块区域不同，它提供画布容器区域，让我们操作粒度聚焦到像素点，必须通过写JS代码来驱动画图，同时它有有一套自己独立的尺寸单位,如下代码我们canvas画布宽300，高200。
<div></div>
<canvas width="300" height="200"></canvas>
接下来我们通过JS来获取canvas元素的2d绘图环境，并且分别绘制描边和填充正方形。
我们知道绘制一个矩形，需要一个点坐标(x,y)和 宽高，即
c2d.fillRect(x坐标,y坐标,宽度,高度)
//获取canvas的2d绘图环境
let c2d = document.querySelector('canvas').getContext('2d')
let w = 50
let h = 50
c2d.fillRect(0,0,w,h); //绘制填充矩形
c2d.strokeRect(25,25,w,h); //绘制描边矩形
一、canvas的 坐标系统
如上图设置一个
canvas 的 width="600" height="400"并增加一个背景样式，
我们根据尺寸画出标尺。我们可以知道:
1.画图容器尺寸左上角坐标为(0,0)
2.整个坐标系 x轴向右为正，y向下为正
3.在容器外的元素坐标通常为负值，我们只能看到容器所在区域的绘图效果
<style>
canvas{background-color: pink;}
</style>
<canvas width="600" height="400"></canvas>
二、canvas的动画主循环
我们将在页面上多绘制几个正方形，并修改它们的x,y坐标，
如果我们把这个方框当作同一个，那么下图不就是他随着时间运动轨迹。
所以我们要实现动画运动效果，就是通过定时器不断地修改它的x,y坐标，再重新绘制
我们需要一个主循环函数，每秒执行60次，也就是60FPS，这是不是像游戏。
我们可以使用setInterval()设置定时器，但更好的是用浏览器自带的
window.requestAnimationFrame
animate();//循环动画函数
function animate(t){
//TO DO重复执行的绘图部分
//...
requestAnimationFrame(animate);//每隔16.67ms去调用，即每秒绘制60次
}
我们将需要放在动画主循环的代码写入，每次修改方块的位置下x,y
因为x,y都同步+1，所以和速度的方向是45°右下，速度的向量合成😊
x+=1;
y+=1;
c2d.strokeRect(x,y,w,h);
好了，到这里恭喜你入门canvas开发。
那么根据以下案例代码，在本地改写为requestAnimationFrame，实现一个X彩虹效果。
