HTML5中canvas画图之画圆形

桃扇骨 2022-08-23 05:51 241阅读 0赞

利用canvas中的arc可以绘制圆形图案。函数原型为:context.arc(x,y,半径，开始角度，结束角度，是否逆时针旋转);所以可以通过修改开始角度和结束角度来绘制弧线。

代码如下：

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>html5圆形</title>
    	<script type="text/javascript">
    		window.addEventListener("load",function(){
    			//canvas的2d上下文
    			var ctx=document.getElementById("canvas").getContext("2d");
    			//圆1
    			ctx.beginPath();
    			ctx.arc(150,45,35,0,Math.PI*2,false);
    			ctx.fillStyle="rgba(192,80,77,0.7)";//半透明的红色
    			ctx.fill();
    			ctx.strokeStyle="rgba(192,80,77,1)";//红色
    			ctx.stroke();
    			//圆2
    			ctx.beginPath();
    			ctx.arc(125,95,35,0,Math.PI*2,false);
    			ctx.fillStyle="rgba(155,187,89,0.7)";//半透明绿色
    			ctx.fill();
    			ctx.strokeStyle="rgba(155,187,89,1)";//绿色
    			ctx.stroke();
    			//圆3
    			ctx.beginPath();
    			ctx.arc(175,95,35,Math.PI*2,false);
    			ctx.fillStyle="rgba(128,100,162,0.7)";//半透明的紫色
    			ctx.fill();
    			ctx.strokeStyle="rgba(128,100,132,1)";//紫色
    			ctx.stroke();
    		});
    	</script>
    </head>
    <body>
    
    	<canvas id="canvas" width="600" height="600"></canvas>
    </body>
    </html>

![SouthEast][]

上图是绘制的三个圆形相互折腾的，另外可以直接修改那个开始角度和结束弧度来画弧线。

[SouthEast]: /images/20220721/a4997c6b2f9c414dbc6c4b2c3761d428.png

发表评论取消回复

表情：

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

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

相关阅读

相关 html5canvas中波浪线怎么画,html5 canvas画波浪

要实现这样的动画普通的CSS3是鞭长莫及了，只能使用Canvas。好在使用canvas也非常简单。 Step1. 新建一个画布()元素，并放在所有按钮和logo的下方以免遮

朴灿烈づ我的快乐病毒、/ 2022年10月12日 01:20/ 0 赞/ 33 阅读

相关 html5 canvas画云

使用函数画出天空的云层图像： ![云层][SouthEast]y 主要使用到的是数学的圆与弧度之间转换关系：代码如下

亦凉/ 2022年08月26日 12:21/ 0 赞/ 493 阅读

相关 HTML5中canvas画图之绘制数据图表

上一篇博文绘制了一个方格图，现在来绘制一个数据图表。实现的效果如下: ![Center][] 实现代码如下: <!DOCTYPE html> <ht

悠悠/ 2022年08月23日 08:10/ 0 赞/ 277 阅读

相关 HTML5中canvas画图之绘制方格图

下一篇博文是准备绘制折线数据图的，这个绘制方格图是为绘制折线图做准备。方格将作为折线图的基准线。绘制方格图的逻辑很简单，只要在canvas上绘制一系列的横线和竖线即可。下面是具

港控/mmm°/ 2022年08月23日 05:58/ 0 赞/ 394 阅读

相关 HTML5中canvas画图之画矩形和矩形掏空

rect方法用于绘制矩形（长方形）。其语法如下: context.rect(x，y，高度，宽度); 绘制代码如下: <!DOCTYPE html> <ht

不念不忘少年蓝@/ 2022年08月23日 05:51/ 0 赞/ 241 阅读

相关 HTML5中canvas画图之画圆形

利用canvas中的arc可以绘制圆形图案。函数原型为:context.arc(x,y,半径，开始角度，结束角度，是否逆时针旋转);所以可以通过修改开始角度和结束角度来绘制弧线

桃扇骨/ 2022年08月23日 05:51/ 0 赞/ 242 阅读

相关 HTML5中canvas画图之根据触摸点画三角形

上一篇博文中说了利用canvas画固定的三角形，现在来试下触摸屏幕，然后根据触摸点画三角形。每触摸一下屏幕就画一个点。刚刚我醉死了，绘制路径的时候竟然把后面的lineTo写成了

谁借莪１个温暖的怀抱￠/ 2022年08月23日 05:50/ 0 赞/ 188 阅读

相关 HTML5中canvas画图之绘制路径

刚开始认真学习H5，虽然以前大概看过H5的教程，但是都是属于空看，一直没有认真练习，所以打算从现在开始来认真练习。下面的代码实现的功能是绘制一个三角形。代码比较简单。

待我称王封你为后i/ 2022年08月23日 05:49/ 0 赞/ 239 阅读

相关【Html5】canvas绘制圆形

上一篇中写了滤镜的效果，这一次把滤镜效果写在圆上，和上一篇原理是一样的先截个图： ![1334153306_3907.png][]

喜欢ヅ旅行/ 2022年06月13日 11:30/ 0 赞/ 247 阅读

相关 canvas画圆形图片

效果图： ![70][] 实现环境在微信小程序中参考网站[https://www.jianshu.com/p/9a6ee2648d6f][https_www.ji

谁践踏了优雅/ 2022年05月26日 12:36/ 0 赞/ 252 阅读