利用canvas的路径实现直线跟着鼠标的方向转动和点击圆,圆变大变小的功能。
canvascanvas{
background:#ccc;
}
window.οnlοad=function(){
var canvas = document.getElementById("canvas");
var cobj = canvas.getContext("2d");
/*功能:直线跟着鼠标的方向转动*/
cobj.lineWidth=5;
cobj.strokeStyle="#f00";
cobj.moveTo(200,250);
cobj.lineTo(200,350);
cobj.stroke();
canvas.οnmοusemοve=function(e){
var mx=e.layerX;
var my=e.layerY;
var startx=200;
var starty=250;
var angle=Math.atan2((my-starty),(mx-startx));
cobj.clearRect(0,0,400,400);
cobj.beginPath();
cobj.moveTo(startx,starty);
cobj.lineTo(startx+100*Math.cos(angle),starty+100*Math.sin(angle));
cobj.stroke();
}
/*功能:点击圆,圆变大变小*/
/*
cobj.arc(200,200,50,0,2*Math.PI);
cobj.stroke();
var angle=0;
canvas.οnclick=function(e){
var mx=e.layerX;
var my=e.layerY;
//判断是否在路径中
if(cobj.isPointInPath(mx,my)){
setInterval(function(){
cobj.clearRect(0,0,400,400);
angle+=0.2;
cobj.beginPath();
cobj.arc(200,200,50+10*Math.sin(angle),0,2*Math.PI);
cobj.stroke();
},50)
}
}
*/
}
请您升级浏览器