我的代码遇到边框为什么不会弹回，直接下落呢
青墨
2015-03-26 10:55
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>探照灯</title>
<script type="text/javascript">
var searchlignt={x:400,y:400,radius:100,vx:Math.random()*5+10,vy:Math.random()*5+10};
window.onload=function()
{
var canvas=document.getElementById('canvas');
canvas.width=800;
canvas.height=800;
var context=canvas.getContext("2d");
setInterval(
function(){
drawtext(context);
update(canvas.width,canvas.height);
},40);
}
function drawtext(cxt)
{
var canvas=cxt.canvas;
cxt.clearRect(0,0,canvas.width,canvas.height);//清除圆形
cxt.save();
cxt.beginPath();
cxt.fillStyle="#000";
cxt.fillRect(0,0,canvas.width,canvas.height);//填充矩形
cxt.beginPath(); //绘制探照灯
cxt.fillStyle="#fff";
//填充圆形
cxt.arc(searchlignt.x,searchlignt.y,searchlignt.radius,0,Math.PI*2);
cxt.fill();
cxt.clip();
cxt.font="bold 150px Arial";
cxt.textAlign="center";//水平居中
cxt.textBaseline="middle";//垂直居中
cxt.fillStyle="#058";
cxt.fillText("CANVAS",canvas.width/2,canvas.height/4);
cxt.fillText("CANVAS",canvas.width/2,canvas.height/2);
cxt.fillText("CANVAS",canvas.width/2,canvas.height*3/4);
cxt.restore();
}
function update(canvasWidth,canvasHeight)
{
searchlignt.x+=searchlignt.vx;
searchlignt.y+=searchlignt.vy;
if (searchlignt.x-searchligt.radius<=0) {
searchlignt.vx=-searchlignt.vx;
searchlignt.x=searchlignt.radius;
}
if (searchlignt.x+searchligt.radius>=canvasWidth) {
searchlignt.vx=-searchlignt.vx;
searchlignt.x=canvasWidth-searchlignt.radius;
}
if (searchlignt.y-searchligt.radius<=0) {
searchlignt.vy=-searchlignt.vy;
searchlignt.y=searchlignt.radius;
}
if (searchlignt.y+searchlignt.radius>=canvasHeight) {
searchlignt.y=canvasHeight-searchlignt.radius;
searchlignt.vy=-searchlignt.vy;
}
}
</script>
</head>
<body>
<canvas id="canvas" style="border:1px solid #aaa;display:block;margin:50px auto;"></canvas>
</body>
</html>
1回答
-
- luke_zhou
- 2015-04-01 17:19:14
您好
调试了一下，是因为你的一个小笔误。
在function update(canvasWidth,canvasHeight){}里，有三处把searchlignt.radius错写成了searchligt.radius
Canvas绘图详解
72881 学习 · 422 问题
相似问题