Forget_淡忘
2016-04-25 20:32
var searchLight = {x:400, y:400, radius:150, vx:Math.random() * 5 + 10, vy:Math.random() * 5 + 10};
window.onload = function(){
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
setInterval(
function(){
draw(context);
update(canvas.width, canvas.height);
},40
);
}
function draw (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(searchLight.x, searchLight.y, searchLight.radius, 0, Math.PI * 2, false);
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) {
searchLight.x += searchLight.vx;
searchLight.y += searchLight.vy;
if (searchLight.x - searchLight.radius <= 0) {
searchLight.vx = -searchLight.vx;
searchLight.x = searchLight.radius;
}
if (searchLight.x + searchLight.radius >= canvasWidth) {
searchLight.vx = -searchLight.vx;
searchLight.x = canvasWidth - canvas.radius;
}
if (searchLight.y - searchLight.radius <= 0) {
searchLight.vy = -searchLight.vy;
searchLight.y = searchLight.radius;
}
if (searchLight.y + searchLight.radius >= canvasHeight) {
searchLight.vy = -searchLight.vy;
searchLight.y = canvasHeight - canvas.radius;
}
}
没问题了,问题解决了......
Canvas绘图详解
72881 学习 · 422 问题
相似问题
回答 2
回答 1