HTML5 Canvas绘制跟随鼠标移动的球
2011-12-08 18:35 LoujaDy 阅读(2862) 评论(0) 编辑 收藏 举报角速度应用:
//获取到Canvas
var canvas = document.getElementById("stage");
//2d绘图版
var context = canvas.getContext("2d");
//球运行的速度
var ballSpeed=4;
//字弹对象
var ball=function(x,y,radius,color)
{
this.x=x;
this.y=y;
this.radius=radius;
this.color=color;
//绘制字弹
this.draw=function()
{
//清空画板
context.save();
context.beginPath();
context.strokeStyle = this.color;
context.fillStyle = this.color;
context.lineWidth = 5;
context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false);
context.closePath();
context.fill();
context.stroke();
}
}
//中心点位置
var centerX=canvas.width/2;
var centerY=canvas.height/2;
//创建球
var myBall=new ball(centerX,centerY,10,"ff0000")
myBall.draw();
var mouseX=centerX;
var mouseY=centerY;
//添加按键事件
canvas.addEventListener("mousemove", onMouseMove, false);
//记录鼠标移动到的位值
function onMouseMove(evt)
{
mouseX=evt.layerX;
mouseY=evt.layerY;
}
//动画处理
var drawAsync = eval(Jscex.compile("async", function () {
while(true)
{
context.clearRect(0, 0, canvas.width, canvas.height);
//计算夹角
var dx=mouseX-myBall.x;
var dy=mouseY-myBall.y;
var angle=Math.atan2(dy,dx);
//角速度
myBall.x+=Math.cos(angle)*ballSpeed;
myBall.y+=Math.sin(angle)*ballSpeed;
//重绘球
myBall.draw();
$await(Jscex.Async.sleep(1000/60));
}
}));
drawAsync().start();
//2d绘图版
var context = canvas.getContext("2d");
//球运行的速度
var ballSpeed=4;
//字弹对象
var ball=function(x,y,radius,color)
{
this.x=x;
this.y=y;
this.radius=radius;
this.color=color;
//绘制字弹
this.draw=function()
{
//清空画板
context.save();
context.beginPath();
context.strokeStyle = this.color;
context.fillStyle = this.color;
context.lineWidth = 5;
context.arc(this.x, this.y, this.radius, 0, 2 * Math.PI, false);
context.closePath();
context.fill();
context.stroke();
}
}
//中心点位置
var centerX=canvas.width/2;
var centerY=canvas.height/2;
//创建球
var myBall=new ball(centerX,centerY,10,"ff0000")
myBall.draw();
var mouseX=centerX;
var mouseY=centerY;
//添加按键事件
canvas.addEventListener("mousemove", onMouseMove, false);
//记录鼠标移动到的位值
function onMouseMove(evt)
{
mouseX=evt.layerX;
mouseY=evt.layerY;
}
//动画处理
var drawAsync = eval(Jscex.compile("async", function () {
while(true)
{
context.clearRect(0, 0, canvas.width, canvas.height);
//计算夹角
var dx=mouseX-myBall.x;
var dy=mouseY-myBall.y;
var angle=Math.atan2(dy,dx);
//角速度
myBall.x+=Math.cos(angle)*ballSpeed;
myBall.y+=Math.sin(angle)*ballSpeed;
//重绘球
myBall.draw();
$await(Jscex.Async.sleep(1000/60));
}
}));
drawAsync().start();
作者:Louja
出处:http://loujady.cnblogs.com
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此声明,且在文章页面给出原文连接,否则保留追究法律责任的权利。