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(); }}
-
-
qq_19558705
2016.03.16 10:23
-
- qq809326636 2016.03.16 10:45
画实心圆还是空心圆？
-
- qq809326636 2016.03.16 10:47
是在canvas中没显示么？
-
-
showbo
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>
准确详细的回答，更有利于被提问者采纳，从而获得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