canvas之三：绘制弧和圆

亦凉 2022-07-24 06:25 201阅读 0赞

在画完直线和三角形之后，接下来我们要画一段弧和一个圆，先看下效果图：

![20160516123944790][]

源代码：

<!DOCTYPE html>  
<html>  
<head lang="en">  
<meta charset="UTF-8">  
<title></title>  
</head>  
<body>  
<canvas id="canvas" width="1024" height="768" style="border:1px solid \#aaa;display:block;margin:50px auto;"></canvas>  
<script type="text/javascript">  
window.onload = function()\{  
var canvas = document.getElementById("canvas");  
var context = canvas.getContext("2d");  
  
context.arc(300,300,200,0,1.5\*Math.PI,false);  
context.lineWidth = 5;  
context.strokeStyle = "red";  
context.stroke();  
  
context.beginPath();  
context.arc(750,300,200,0,2\*Math.PI,false);  
context.stroke();  
\}  
</script>  
</body>  
</html>

代码详解：

0.为了时js代码更加精简，我们可以把设置画布大小通过canvas标签的属性width和weight来设置

1.context.arc(300,300,200,0,1.5\*Math.PI,false)这段代码表示画一段弧，圆心为(300,300),半径为200，弧度从0到1.5PI，false表示顺时针画弧(true为逆时针)

2.context.beginPath()这行代码表示再画完一个图形后在另一个地方重新开始画另一个图形，若不进行该操作，则表示前后画的两个图形是不间断的，具体效果如下图所示：

![20160516125054444][]

[20160516123944790]: /images/20220722/40ea99a0a1624ecc97930468e2e4c550.png
[20160516125054444]: /images/20220722/f1f8387e6c1c417db3d6566cf5aac21c.png

发表评论取消回复

表情：

评论列表（有 0 条评论，201人围观）

还没有评论，来说两句吧...

相关阅读

相关 canvas画布绘制线条样式：粗细，圆角，拐角等

线条的粗线 `lineWidth`是改变线条的粗线的，默认是一个像素： context.beginPath(); context.moveTo(20,

矫情吗；*/ 2024年03月26日 23:57/ 0 赞/ 83 阅读

相关使用canvas绘制一个圆或者圆弧

[`arc(x, y, radius, startAngle, endAngle, anticlockwise)`][arc_x_ y_ radius_ startAngle_

待我称王封你为后i/ 2022年12月10日 02:25/ 0 赞/ 242 阅读

相关 Canvas学习：绘制圆和圆弧

圆和圆弧是图形中基本图形之一，今天我们来了解在Canvas中怎么绘制圆和圆弧。在Canvas中绘制圆和圆弧其实和绘制[线段][Link 1]和[矩形][Link 2]一样的简单

落日映苍穹つ/ 2022年09月30日 05:00/ 0 赞/ 668 阅读

相关 canvas之三：绘制弧和圆

在画完直线和三角形之后，接下来我们要画一段弧和一个圆，先看下效果图： ![20160516123944790][] 源代码： <!DOCTYPE html> <

亦凉/ 2022年07月24日 06:25/ 0 赞/ 202 阅读

相关 canvas之二：绘制三角形

我们当然不能满足于能在画布上画那么一条直线，接下来我们就要画一个更高级的一点的东西：三角形！同样，先上图和代码： ![SouthEast][] 源代码： <!DOC

本是古典何须时尚/ 2022年07月24日 06:24/ 0 赞/ 498 阅读

相关 canvas基础—02绘制圆

1.绘制圆 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV

阳光穿透心脏的1/2处/ 2022年03月20日 10:26/ 0 赞/ 272 阅读

相关 Canvas—直线、矩形和圆

文章目录直线矩形圆直线 const myCanvas = document.getElementById('myCanvas')

悠悠/ 2021年12月18日 07:45/ 0 赞/ 365 阅读

相关 Canvas 画圆

原文地址：http://hi.baidu.com/lj2tj/item/557d8d1a65adfa721009b58b \-----------------------

爱被打了一巴掌/ 2021年12月15日 11:55/ 0 赞/ 412 阅读

相关 canvas画布实现钟表的绘制,并时刻显示时间,canvas画圆,

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8">

骑猪看日落/ 2021年09月16日 05:00/ 0 赞/ 547 阅读

相关 canvas画圆

画圆方法说明 arc(x, y, radius, startAngle, endAngle, anticlockwise) 该方法有六个参数：x,y为绘制圆弧所

雨点打透心脏的1/2处/ 2021年07月24日 16:22/ 0 赞/ 575 阅读