html5三角函数怎么用,HTML5（五）html5＜canvas路径和三角函数的故事＞(下)

利用canvas的路径实现直线跟着鼠标的方向转动和点击圆，圆变大变小的功能。

canvas

canvas{

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)

}

}

*/

}

请您升级浏览器