Canvas画圆时有条线

最新推荐文章于 2024-08-16 18:48:55 发布

The Dark Kinght

最新推荐文章于 2024-08-16 18:48:55 发布

阅读量2.3k

点赞数

分类专栏：前端文章标签： Canvas

本文链接：https://blog.csdn.net/u013455430/article/details/93621627

版权

前端专栏收录该内容

38 篇文章 0 订阅

订阅专栏

如图所示：

这里的线是在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>