canvas游动的鱼.gif
这是canvas的drawImage方法对图片的一个应用
drawImage（obj,sx,sy,sw,sh,dx,dy,dw,dh）方法一共有9个参数，第一个参数看MDN的解释:
绘制到上下文的元素。允许任何的 canvas 图像源(
CanvasImageSource)，例如：CSSImageValue，HTMLImageElement，SVGImageElement，HTMLVideoElement，HTMLCanvasElement，ImageBitmap或者OffscreenCanvas
- 说的很清楚了，可以是img标签、svg图片元素、video标签、另一个canvas、base64和屏幕外的canvas（内存里的）
- 其他八个参数可以分为两组，第一组标签分别是:sx，sy，sw，sh;s表示source（源）的意思，也就是对原图片要从哪个x，y坐标开始画以及要画多宽sw和多高sh；同理，下一组的dx，dy，dw，dh，d表示destination（目标点），要画在canvas里的哪个地方dx、dy以及要画多宽多高dw、dh。
好，这些都了解了之后，开始讲原理：
来看下面这张图：
fish1.png
上面四张图表示小鱼在游的时候的动作，下面四张图表示被捕之后的动作，我们只用上面四张图，用drawImage不断的取第一条鱼第二条第三条第四条画在canvas上，画的时候把前面画的先清掉，就会有动画的效果了，我们要做的就是不断更新sy（原图像的y坐标）和dx（画在canvas上的鱼的x坐标）。
<canvas width="800" height="600" style="background:white;"></canvas>
获取对象，然后新建一个image对象：
let c1 = document.getElementsByTagName('canvas')[0];
let gd = c1.getContext('2d');
let oImg = new Image();
oImg.src = '录制gif/fish1.png';
由于我们在执行drawImage操作的时候oImg可能还没创建完，所以我们加个onload，然后用requestAnimationFrame：
oImg.onload = function () {
requestAnimationFrame(next);//前面有介绍用法
function next() {
gd.drawImage(oImg,//画鱼
0, 0, 55, 37,
100, 100, 55, 37
)
requestAnimationFrame(next);
}
}
image.png
重影了，得先清掉以前画的：
gd.clearRect(0,0,c1.width,c1.height);
更新sy的值不断的从上往下取那条小鱼，设置一个变量i不断的++：
let i = 0;
oImg.onload = function () {
requestAnimationFrame(next);//前面有介绍用法
function next() {
gd.clearRect(0,0,c1.width,c1.height);
i++;
gd.drawImage(oImg,//画鱼
0, 37*i, 55, 37,
100, 100, 55, 37
)
requestAnimationFrame(next);
}
}
游动的鱼一闪而过.gif
变量i太大了，图片就那么高，让i==4(第四条鱼)的时候归零：
if(i==4)i=0;
好快的鱼.gif
设置一个变量调下速：
window.onload = function () {
let c1 = document.getElementsByTagName('canvas')[0];
let gd = c1.getContext('2d');
let oImg = new Image();
oImg.src = '录制gif/fish1.png';
let i = 0;
let frameCounter = 0//调速变量
oImg.onload = function () {
requestAnimationFrame(next);//前面有介绍用法
function next() {
gd.clearRect(0, 0, c1.width, c1.height);
if (frameCounter % 3 == 0) {//每3帧i++
i++;
if (i == 4) i = 0;
}
gd.drawImage(oImg,//画鱼
0, 37 * i, 55, 37,
100, 100, 55, 37
)
frameCounter++;
requestAnimationFrame(next);
}
}
}
正常速度的鱼.gif
正常了
然后让他动起来，设置一个变量x：
window.onload = function () {
let c1 = document.getElementsByTagName('canvas')[0];
let gd = c1.getContext('2d');
let oImg = new Image();
oImg.src = '录制gif/fish1.png';
let i = 0;
let frameCounter = 0//调速变量
let x=100;//让鱼动起来
oImg.onload = function () {
requestAnimationFrame(next);//前面有介绍用法
function next() {
gd.clearRect(0, 0, c1.width, c1.height);
x+=2;//调节鱼游动的速度
if (frameCounter % 3 == 0) {//每3帧i++
i++;
if (i == 4) i = 0;
}
gd.drawImage(oImg,//画鱼
0, 37 * i, 55, 37,
x, 100, 55, 37
)
frameCounter++;
requestAnimationFrame(next);
}
}
}
正常速度游走的鱼.gif
最后可以加个鼠标点击页面然后小鱼暂停，再点击在动的事件：
这里我就不一步步教写了，核心的就是上面的部分，下面是完整的代码：
window.onload = function () {
let c1 = document.getElementsByTagName('canvas')[0];
let gd = c1.getContext('2d');
let oImg = new Image();
oImg.src = '录制gif/fish1.png';
let i = 0, x = 100;
let frameCounter = 0;
let pause = false;//控制是否暂停
function move(pause) {//小鱼运动函数
gd.clearRect(0, 0, c1.width, c1.height);
if(!pause){//暂停了就不更新x的值,不让他游
x += 2;
}
if (frameCounter % 3 == 0) {//控制小鱼游动速度
i++;//控制小鱼摆动速度
if (i == 4) i = 0;//循环摆动
}
gd.drawImage(oImg,//画鱼
0, 37 * i, 55, 37,
x, 100, 55, 37
)
frameCounter++;
}
oImg.onload = function () {
requestAnimationFrame(next);//前面有介绍用法
function next() {
if (!pause) {//如果没点暂停，小鱼就运动
move()
}
else {//点了就不游动，只摆动
move(pause);
}
requestAnimationFrame(next);
}
}
document.onclick = function () {
pause = !pause;//点击页面切换暂停或继续
}
}
效果就是第一张图
网友评论