canvas動畫利用函數波動特點制作水波動畫

<canvas id="myCanvas" width="500" height="400"></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;
　}

直接可復制代碼查看效果

總結

以上是生活随笔為你收集整理的canvas点阵函数波动，类似飘带或水波的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。