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币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
HTML5 canvas 画布画圆
无标题文档 canvas元素实例 var t=document.getElementById("demo"); var img=t.getContext("2d"); img.fillStyle="#eeeeff"; img.fillRect(0,0,400,300); var n=0; for(var i=0;i { img.beginPath(
html5 canvas元素各种圆形绘制
canvas{background: #b8edc9;}                            Canvas                      您的浏览器不支持html5dcanvas元素                       var canvas=document.getElementById('mycanvas');//定义变量获取画布dom
去除canvas 画圆的毛边
还是上上篇博客遗留下来的问题,http://blog.csdn.net/yeshennet/article/details/50531007 产品经理坐在我身后,一直在念叨,怎么有毛边怎么有毛边,视觉的妹子也坐不住了,修修修...... 其实我在浏览器上看到也有点模糊,怎么办呢,后来我找到了这个东西:http://jondavidjohn.github.io/hidpi-canvas-poly
HTML5中canvas画图之画圆形
利用canvas中的arc可以绘制圆形图案。函数原型为:context.arc(x,y,半径,开始角度,结束角度,是否逆时针旋转);所以可以通过修改开始角度和结束角度来绘制弧线。 代码如下: html5圆形 window.addEventListener("load",function(){ //canvas的2d上下文 var ctx=document.get
HTML5之Canvas画圆形
HTML5之Canvas画圆形 1、设计源码 HTML5之Canvas画圆形 var canvas=document.getElementById("canvas"); var context=canvas.getContext("2d"); context.fillStyle="#0000ff"; context.beginPath();
HTML5 canvas画圆
今天就给大家演示一下使用canvas画圆 var canvas = document.getElementById("canvas"); canvas.width = 500; canvas.height = 500; var context = canvas.getContext("2d"); context.arc(200,200,100,0,2*Math.PI,true);//画圆
<HTML5>绘制圆形的错误
canvas中id书写出现问题 getElementId()括号中""和''都没问题
Canvas相关的一些问题——画圆
1.在Canvas中绘制圆形的时候可能会出现一些问题, 例如下面的代码,想实现一个圆和一个半圆的效果 运行代码后,会有如下效果: 你会发现两张图都是圆,如果把第二个图的角度改为60度,依然是如上面所示的效果。 如何解决这个问题呢?可以考虑使用弧度的方式来表示, 如下代码: 运行效果: 但是,当你把360度改为270度,第二个圆改为90度,如下:
HTML5 canvas 绘制圆形
canvas绘制圆形的思路: 1、创建路径 XXX.beginpath(); 2、创建圆形的路径; 3、关闭路径;XXX.closepath(); 路径不关闭也能绘制出图形 4、设定绘制样式。 创建圆形路径时需要用到对象的arc方法,方法定义如:XXX.arc(x,y,radius,startAngle,endAngle,counterclockwise) x为圆形起点的横坐标,y
JS + HTML 5 (Canvas) - 画圆饼动画,也是countdown倒计时的简单实现。
代码及结果预览,在 JSFiddle 上:http://jsfiddle.net/ylem/XnsCK/ 代码很简单,给大伙一个范例,其中把 n = 10 修改为 60 就算是简单的倒计时了。 原理一句话,就是 每秒画 step / n 的圆。 如果对canvas画圈不熟的同学可以看这里:http://www.w3school.com.cn/html5/canvas_arc.asp