- Html5 Canvas通过鼠标移动画圆，一下为Javascript画圆部分函数 有什么问题？
-
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(); }}
注意startX和startY作用域，而且你也没有执行circle绑定鼠标事件
<canvas id="demo" width="500" height="400"></canvas>
<script>
var canvas = document.getElementById("demo");
var cxt = canvas.getContext("2d");
function circle() {
var startX,startY/////////
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();
}
}
circle()///////////////
</script>
