Canvas 动效实例
2020-02-14 本文已影响0人
章鱼要回家
直线轨迹动效
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="400" style="border:1px solid #d3d3d3;background-color:black">
您的浏览器不支持 HTML5 canvas 标签。</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var gradient = ctx.createLinearGradient(0, 0, 100, 0);
gradient.addColorStop(0, 'red');
gradient.addColorStop(1, 'blue');
var t = 0;
var animationDotSpeed = 0.08;
var dotNumber = 25;
var dotRadius = 1;
var dotColor = 'rgb(255,255,188)'
var averageX = 109.0139239130436;
var averageY = 34.44264656750581;
var range = 15;
var width = 500;
var height = 400;
animationDot();
function animationDot(){
ctx.clearRect(0,0,width,height);
drawAnimate();
requestAnimationFrameName = requestAnimationFrame(animationDot);
}
function drawAnimate(){
var arr1 = [
[[200,200],[300,200]],
[[200,200],[350,230]],
[[200,200],[60,90]],
[[200,200],[350,90]],
[[200,200],[350,360]],
[[200,200],[150,360]],
]
arr1.map(item=>{
drawDots(item[0],item[1])
})
if (t >= Math.sqrt(200)) {
t = 0;
}
t += animationDotSpeed;
function drawDots (start,end){
ctx.save();
// 画线
ctx.beginPath();
ctx.lineWidth = 1
ctx.strokeStyle = 'green';
ctx.moveTo(start[0],start[1]);
ctx.lineTo(end[0],end[1]);
ctx.closePath();
ctx.stroke();
ctx.restore();
//画25个点
for (var i = 0; i < dotNumber; i++) {
var _t = (t - animationDotSpeed * i * 0.5) >= 0 ? (t - animationDotSpeed * i * 0.5) : Math.sqrt(200) + (t - animationDotSpeed * i * 0.5);
// quad.easeIn
var x = (end[0]-start[0])*(_t/200)*_t+start[0];
var y = (end[1]-start[1])*(_t/200)*_t+start[1];
ctx.save();
ctx.fillStyle = 'rgba(' + dotColor.split('(')[1].split(')')[0] + ',' + (1 - 1 / dotNumber * i) + ')'
ctx.beginPath();
ctx.arc(x,y,dotRadius,0,2*Math.PI); //dotRadius=1 半径为1的圆
ctx.closePath();
ctx.fill();
ctx.restore();
}
}
}
</script>
</body>
</html>
光圈辐射动效
rgba的a值和半径的变化。
