Canvas画圆时有条线

如图所示：

这里的线是在canvas在绘图完成时自动调用

我这里把closePath函数注释掉依然有，还是指向起始位置

所以我推测:这里的调用画圆的函数后都会将圆的结束的位置与最近的moveTo位置相连，如果没有定义moveTo,那么连向零点，也就是canvas的左上角。

所以当出现如上所示的直线时，你需要知道圆的结束位置，将moveTo位置设置为该起始位置，代码如下：

<html><body>
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;"><script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");ctx.beginPath();
ctx.moveTo(0, 0);
ctx.rect(0, 0, 250, 300);//矩形充满canvas
ctx.strokeStyle = 'rgba(99,99,99,.3)';
ctx.stroke();ctx.moveTo(150, 100);//新增代码，将起始位置设置为圆的结束位置
let circle = {x: 100,y: 100,r: 50
};
ctx.arc(circle.x, circle.y, circle.r, 0, 2 * Math.PI, true);
ctx.stroke();ctx.closePath();
ctx.fillStyle = 'rgba(99,99,99,.3)';
ctx.fill();
</script></body>
</html>

Canvas画圆时有条线相关推荐

canvas画圆又毛边
canvas画圆又毛边 canvas使用arc()画园有毛边,如图:,只需给其添加width,height即可,直接上代码 <!DOCTYPE html> <html lang=&q ...
php画圆锯齿,优雅的解决canvas画圆锯齿问题
canvas 解决canvas画圆锯齿问题之前做一各项目需要画一个饼图,于是使用HTML5的canvas元素画出来的.一看在移动端手机上测试都发现画图有一点锯齿明显问题, 1 效果如下代码如下 v ...
H5 canvas 画圆画圆角
canvas是H5的一大重点我们来学一下如何用canvas画圆画圆 arc(x,y,r,起始弧度,结束弧度,顺逆时针) x,y就是这个圆的圆心坐标 r是圆的半径弧度单位用Math.PI 顺逆时针 ...
canvas画圆和线条动画
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8 ...
android 画字体并换行,android 使用canvas画字符时换行（用TextPaint实现，Paint不易实现）...
使用canvas画字符时,常常遇到字符很长,不会换行的问题. 解决办法: 使用StaticLayout这个类. mCurrentPaint=newTextPaint(); mCurrentPaint. ...
canvas画圆清除圆html,javascript,html5_js 用canvas 画圆清除问题？，javascript,html5 - phpStudy...
js 用canvas 画圆清除问题? 我在用js写一个五子棋游戏,利用canvas画棋盘和棋子,为了实现悔棋功能,我用clearRect()清除了原来的棋子,再重新画被清除的部分棋盘,却总是出现了一个 ...
HTML5 canvas画圆
今天就给大家演示一下使用canvas画圆 var canvas = document.getElementById("canvas"); canvas.width = 500; c ...
html5 canvas画粗线时座标指定注意事项
画粗线时,座标不能定位在画布边界上,就是0或者width或者height.这是因为canvas画线粗线时是以你给定座标值为中心向两侧绘制,如果把座标定位到画布边界上,那么画出来的线就只有你给定粗细值的 ...
canvas笔记-使用canvas画圆及点阵的使用
如下例子: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF- ...

Canvas画圆时有条线

Canvas画圆时有条线相关推荐

最新文章

热门文章