canvas点阵函数波动，类似飘带或水波

2024-08-25 01:57:16

canvas动画利用函数波动特点制作水波动画

<canvas id="myCanvas" width="500" height="400" style="border:0px double #996633;"></canvas>

var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
var i=0;
setInterval(move,30);
function move(){

　　ctx.clearRect(0,0,canvas.width,canvas.height);

　　var dig=Math.PI/24;
　　var colorArr = ['red','yellow','green','blue','purple']
　　var colorIndex = 0
　　for (k=0;k<=14;k++){

　　　　for (n=0;n<=17;n++){
　　　　　　colorIndex++
　　　　　　if (colorIndex >= 5) {
　　　　　　　　colorIndex = 0
　　　　　　}
　　　　　　ctx.fillStyle = colorArr[colorIndex]
　　　　　　x0=30*n;
　　　　　　y0=30*k;
　　　　　　var x=24*Math.sin((i+k*2+n*3)*dig)+x0;
　　　　　　var y=24*Math.cos((i+k*2+n*3)*dig)+y0;
　　　　　　ctx.beginPath();
　　　　　　ctx.arc(x,y,8,0,Math.PI*2,true);
　　　　　　ctx.closePath();
　　　　　　ctx.fill();
　　　　}
　　　}

　　　i=i+1;
　　　if (i>=48) i=0;
　}

直接可复制代码查看效果

最新文章

热门文章