javascript - 用canvas画图，一直运行不了。
本文介绍了javascript - 用canvas画图，一直运行不了。的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
我在用canvas写一个自动生成随意小圆代码，把小球的圆心的位置，半径，颜色存在一个数组里，可是一直运行不了，又没有报错，可不可以帮帮忙找错？
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#can1{ border:1px solid #000;}
</style>
<script>
window.onload=function()
{
var cant=document.getElementById('can1');
var can1=cant.getContext('2d');
var setArr=[];
setInterval(function(){
var x=200+Math.ceil(Math.random()*200);
var y=200+Math.ceil(Math.random()*200);
var r=5+Math.ceil(Math.random()*7);
var sX=-2+Math.ceil(Math.random()*4);
var sY=-2+Math.ceil(Math.random()*4);
var red=Math.floor(Math.random()*256);
var green=Math.floor(Math.random()*256);
var blue=Math.floor(Math.random()*256);
var alpha=0.5+Math.random()*0.3;
var bgColor="rgba("+red+","+green+""+blue+","+alpha+")";
var obj={
x:x,
y:y,
r:r,
sX:sX,
sY:sY,
bgColor:bgColor
};
setArr.push(obj);
},30);
setInterval(function(){
can1.clearRect(0,0,cant.width,cant.heigth);
for(var i;i<setArr.length;i++)
{
setArr[i].x+=setArr[i].sX;
setArr[i].y+=setArr[i].sY;
can1.beginPath();
can1.arc(setArr[i].x,setArr[i].y,setArr[i].r,0*Math.PI,2*Math.PI);
can1.fillStyle=setArr[i].bgColor;
can1.fill();
}
},30);
};
</script>
</head>
<body>
<canvas id="can1" width="500" height="500"></canvas>
</body>
</html>解决方案
你把for循环放在一个setInterval里面,相当于一次将现有的所有小球都渲染出来，但有个问题，你没有给i初始化赋值，所以看不到球。你给i赋值为0就能看到所有小球了
这篇关于javascript - 用canvas画图，一直运行不了。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
