qwfy_0520
qwfy_0520
2016-03-16 02:18

Html5 Canvas通过鼠标移动画圆,一下为Javascript画圆部分函数 有什么问题?

  • canvas
  • 鼠标

var canvas=document.getElementById("demo");
var cxt=canvas.getContext("2d");

function circle()
{
canvas.onmousedown=function(evt)
{
cxt.lineWidth=1;
evt=window.event||evt;

var startX=evt.pageX-this.offsetLeft;
var startY=evt.pageY-this.offsetTop;
 }

canvas.onmousemove=function(evt)
{
var x=evt.pageX-this.offsetLeft;
var y=evt.pageY-this.offsetTop;

cxt.strokeStyle="rgb(180,0,0)"; 

cxt.beginPath();
var radii=Math.sqrt((startX-x)*(startX-x)+(startY-y)*(startY-y));   

cxt.arc(startX,startY,radii,0,Math.PI*2,false);

cxt.stroke();
cxt.closePath();
}

}

  • 点赞
  • 回答
  • 收藏
  • 复制链接分享

4条回答

为你推荐

换一换