html5 canvas 控制多个方块按照不同频率换色
比如说，有两个方块，一个每隔500ms变色，一个每隔300ms变色，HTML5的canvas中。...
比如说，有两个方块，一个每隔500ms变色，一个每隔300ms变色，HTML5的canvas中。
展开
1个回答
展开全部
最简单的方式：
写2个定时刷新函数
setInterval(function(){
//绘制方块的代码
}, 定时间隔)
下面 举个栗子^_^
<!DOCTYPE HTML>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>画图实例</title>
</head>
<body>
<canvas id="canvas" width="800"height="600">
<p>Your browserdoes not support the canvas element!</p>
</canvas>
<script type="text/javascript">
window.onload = function() {
var canvas =document.getElementById("canvas");
var context2D =canvas.getContext("2d");
context2D.font ="30px Times New Roman";
context2D.fillText("HelloCanvas!", 10, 35);
//500ms一变色的正方形
setInterval(function(){
rect(context2D,1);
},500);
//300ms一变色的正方形
setInterval(function(){
rect(context2D,2);
},300);
}
/**
* 随机生成0-255的整数
**/
function rnd255(){
return Math.floor(Math.random()*256);
}
/**
* 绘制随机颜色的正方形，根据id确定方位
**/
function rect(c,id){
var x,y,w,h;
switch(id){
case 1:
x=10,y=10,w=50,h=50;
break;
case 2:
x=60,y=10,w=50,h=50;
break;
}
c.fillStyle = 'rgb('+rnd255()+', '+rnd255()+', '+rnd255()+')';
c.fillRect(x,y,w,h);
}
</script>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
