canvas动画科技园_Canvas动画

1&＃xff1a;Canvas动画原理

快速切换的静态画面。

2&＃xff1a;基本步骤

绘制 - 清空 - 绘制 - 清空 - 绘制 ...

3&＃xff1a;控制函数

setTimeout

setInterval

requestAnimationFrame

4&＃xff1a;四种运动

线性运动

const canvas &＃61; document.getElementById(&＃39;canvas&＃39;);

/* 获得 2d 上下文对象 */

const ctx &＃61; canvas.getContext(&＃39;2d&＃39;);

let radialGradient;

let distance &＃61; -50;

const speed &＃61; 5;

const draw &＃61; (axisX) &＃61;> {

/* 清空画布(或部分清空) */

ctx.clearRect(0, 0, 600, 600);

radialGradient &＃61; ctx.createRadialGradient(distance, 300, 10, distance, 300, 50);

radialGradient.addColorStop(0, "#FFFFFF");

radialGradient.addColorStop(1, "#EA7F26");

ctx.fillStyle &＃61; radialGradient;

ctx.beginPath();

ctx.moveTo(distance, 300);

ctx.arc(distance, 300, 50, 0, 2 * Math.PI, false);

ctx.fill();

distance &＃61; distance &＃43; speed;

if (distance > 650) distance &＃61; -50;

requestAnimationFrame(draw);

}

requestAnimationFrame(draw);ctx.clearRect(0, 0, 600, 600);

ctx.beginPath();

ctx.moveTo(distance, 300);

ctx.arc(distance, 300, 50, 0, 2 * Math.PI, false);

ctx.fill();

distance &＃61; distance &＃43; speed;

1562828132710.png

从左到右匀速运动

变速运动

const canvas &＃61; document.getElementById(&＃39;canvas&＃39;);

/* 获得 2d 上下文对象 */

const ctx &＃61; canvas.getContext(&＃39;2d&＃39;);

let radialGradient;

let distance &＃61; 50;

const speed &＃61; 5;

let count &＃61; 1;

/*

* h &＃61; 9.8 * (Math.pow(t, 2)) / 2

*/

const draw &＃61; (axisX) &＃61;> {

/* 清空画布(或部分清空) */

ctx.clearRect(0, 0, 600, 600);

radialGradient &＃61; ctx.createRadialGradient(300, distance, 10, 300, distance, 50);

radialGradient.addColorStop(0, "#FFFFFF");

radialGradient.addColorStop(1, "#EA7F26");

ctx.fillStyle &＃61; radialGradient;

ctx.beginPath();

ctx.moveTo(300, distance);

ctx.arc(300, distance, 50, 0, 2 * Math.PI, false);

ctx.fill();

count &＃43;&＃61; 1;

distance &＃61; 9.8 * (Math.pow(count, 2)) / 100;

if (distance > 650) {

distance &＃61; -50;

count &＃61; 1;

}

requestAnimationFrame(draw);

}

requestAnimationFrame(draw);

1562828262986.png

从上到下模拟自由落体运动

函数运动(正弦)

const canvas &＃61; document.getElementById(&＃39;canvas&＃39;);

/* 获得 2d 上下文对象 */

const ctx &＃61; canvas.getContext(&＃39;2d&＃39;);

let radialGradient;

let distance &＃61; 0;

let axis &＃61; 300;

const speed &＃61; 5;

const range &＃61; 200;

let angle &＃61; 0;

const draw &＃61; (axisX) &＃61;> {

/* 清空画布(或部分清空) */

// ctx.clearRect(0, 0, 600, 600);

radialGradient &＃61; ctx.createRadialGradient(distance, axis, 10, distance, axis, 50);

radialGradient.addColorStop(0, "#FFFFFF");

radialGradient.addColorStop(1, "#EA7F26");

ctx.fillStyle &＃61; radialGradient;

ctx.beginPath();

ctx.moveTo(distance, axis);

ctx.arc(distance, axis, 50, 0, 2 * Math.PI, false);

ctx.fill();

axis &＃61; 300 &＃43; Math.sin(angle) * range;

distance &＃61; distance &＃43; speed;

if (distance > 650) {

distance &＃61; 0;

angle &＃61; -.1;

}

angle &＃43;&＃61; .1;

requestAnimationFrame(draw);

}

requestAnimationFrame(draw);

1562828002904.png

环形运动

const canvas &＃61; document.getElementById(&＃39;canvas&＃39;);

/* 获得 2d 上下文对象 */

const ctx &＃61; canvas.getContext(&＃39;2d&＃39;);

let radialGradient;

let angle &＃61; 0.1;

var scope &＃61; 20;

let x &＃61; 300;

let y &＃61; 100;

const draw &＃61; (axisX) &＃61;> {

/* 清空画布(或部分清空) */

ctx.clearRect(0, 0, 600, 600);

radialGradient &＃61; ctx.createRadialGradient(x, y, 10, x, y, 50);

radialGradient.addColorStop(0, "#FFFFFF");

radialGradient.addColorStop(1, "#EA7F26");

ctx.fillStyle &＃61; radialGradient;

ctx.beginPath();

ctx.moveTo(x, y);

ctx.arc(x, y, 50, 0, 2 * Math.PI, false);

ctx.fill();

x &＃61; x &＃43; Math.cos(angle) * scope;

y &＃61; y &＃43; Math.sin(angle) * scope;

angle &＃61; angle &＃43; .1;

requestAnimationFrame(draw);

ctx.closePath();

ctx.beginPath();

ctx.arc(300, 300, 200, 0, 2 * Math.PI, false);

ctx.stroke();

}

requestAnimationFrame(draw);

1562827970399.png