2 qwfy 0520 qwfy_0520 于 2016.03.16 10:18 提问

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

}

4个回答

qq_19558705
qq_19558705   Ds   Rxr 2016.03.16 10:23
qq809326636
qq809326636   2016.03.16 10:45

画实心圆还是空心圆?

qwfy_0520
qwfy_0520 空心
接近 2 年之前 回复
qq809326636
qq809326636   2016.03.16 10:47

是在canvas中没显示么?

qwfy_0520
qwfy_0520 之前是鼠标移动画不出来 现在可以了
接近 2 年之前 回复
showbo
showbo   Ds   Rxr 2016.03.16 16:20

注意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>
qwfy_0520
qwfy_0520 另外请问怎样可以显示圆心
接近 2 年之前 回复
qwfy_0520
qwfy_0520 多谢!请问我之前的没有执行circle鼠标绑定事件是什么意思
接近 2 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!