一、canvas的绘图表面
canvas有两种尺寸
- canvas元素自身元素的尺寸
- canvas绘图表面的尺寸
如果用css来设置width和height,改变的只是canvas元素的大小。
如果canvas元素大小与绘图表面大小不一样，浏览器会自动缩放绘图表面，来适应canvas的大小。
导致的问题：坐标系不准
正确做法：
<canvas>标签属性定义width和height
<canvas id="canvas" width="972" height="576"></canvas>
小知识点：canvas 全屏 canvas默认尺寸 单位不识别％
二、canvas 2D坐标系
左上角为（0,0）点，X向右为正方形，Y向下为正方向
三、动画循环
window.requestAnimationFrame(callback)
四、FPS
动画是一系列序列帧图片在一定时间内按照一定的顺序播放就形成了动画。
我们看到的其实只是一幅幅静态图片，我们眼睛在欺骗大脑。
视频24FPS 游戏60FPS
requestAnimationFrame() 可以达到60FPS ,每秒60帧，相当于每帧 1000/60 约等于16.66666ms，动画关键帧在效果和资源大小之间均衡，一般20FPS就很流畅了。所以为了减少资源大小，50ms每帧，也就是每秒20张图，算很奢侈的动画了。
画图时，FPS与关键帧图片要相适配。
五、Canvas状态的保存与恢复
ctx.save();
代码
ctx.restore();
所以我们把只想临时改变的属性,写在这之间。
绘图环境的save()方法会将当前的绘图环境压入堆栈顶部。对应的restore()方法则会从堆栈顶部弹出一组状态信息，并据此恢复当前绘图环境的各个状态。
可以嵌套式地使用save()/restore()方法，保存多组属性，restore从最后一次开始恢复。
状态栈类似乒乓球盒子，先进后出，后进先出。
保存的不是当前画布的图片，而是绘图状态。
属性包括：
当前的坐标变换信息（transform） 剪辑区域 以及canvas的所有绘图属性
六、ctx.clearRect(0,0,w,h) 清空画布
.clearRect() 是 Canvas 2D API 设置指定矩形区域内以 点 (x, y) 为起点，范围是(width, height) ）所有像素变成透明，并擦除之前绘制的所有内容的方法。
七、绘制ctx.drawimage() 只有三种语法
cxt.drawImage(img,x,y);
cxt.drawImage(img,x,y,width,height);
cxt.drawImage(img,sx,sy,sw,sh,x,y,width,height);
Img 图像、视频、canvas
xy 从x/y点开始绘制
sx/sy 开始裁剪的x/y坐标
sw/ sh 裁剪的宽度和高度
.drawImage()方法
网友评论