问题描述

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();
}

}

解决方案

可以参考一下：http://blog.csdn.net/qq_19558705/article/details/50519952

解决方案二：

画实心圆还是空心圆？

解决方案三：

是在canvas中没显示么？

解决方案四：

注意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>