canvas绘制圆形

canvas绘制圆形的思路：

1、创建路径 XXX.beginpath();

2、创建圆形的路径；

3、关闭路径；XXX.closepath(); 路径不关闭也能绘制出图形

4、设定绘制样式。

创建圆形路径时需要用到对象的arc方法，方法定义如：XXX.arc(x,y,radius,startAngle,endAngle,anticlockwise)

x为圆形起点的横坐标，y为圆形起点的纵坐标，radius为圆形半径，startAngle为开始角度，endAngle为结束角度，anticlockwise是否按顺时针方向进行绘制。

 1 <!DOCTYPE html>
 2 <meta charset="utf-8">
 3 <head>
 4 </head>
 5
 6 <body>
 7 <canvas id="yuanxing" width="1000" height="1000"></canvas>
 8 <script type=text/javascript>
 9 var canvas=document.getElementById("yuanxing");
10 var context=canvas.getContext("2d");
11 context.fillStyle="#FF0000";
12 context.beginPath();
13 context.arc(700,400,200,0,Math.PI*2,true); //Math.PI*2是JS计算方法，是圆
14 context.closePath();
15 context.fill();
16 </script>
17 </body>
18 </html>

转载于:https://www.cnblogs.com/52css/archive/2012/09/03/2669150.html

canvas绘制圆形相关推荐

html5 canvas绘制圆形进度实例
2019独角兽企业重金招聘Python工程师标准>>> html5 canvas绘制圆形进度实例 <canvas id="test" width=200 h ...
canvas绘制圆形马赛克方法二
因某些项目需求:必须先绘制整出整个图片在打马赛克,"canvas绘制圆形马赛克方法一"中方式不能满足,故用以下方式实现: 方法简介: 先绘制出整个图片在画布a上,在将马赛克数据co ...
如何在html5中实现多圆,JavaScript与html5如何实现canvas绘制圆形图案的方法介绍
这篇文章主要介绍了js+html5实现canvas绘制圆形图案的方法,涉及html5图形绘制的基础技巧,需要的朋友可以参考下本文实例讲述了js+html5实现canvas绘制圆形图案的方法.分享给大 ...
html5 canvas绘制圆形印章，以及与页面交互
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 < ...
canvas绘制圆形马赛克方法一
方法简介: 先绘制出所需马赛克部分矩形图片,在通过裁剪画布实现圆形图片,之后将圆形图片打上马赛克,最后在画布最底层绘制全部图片. 在图片上绘制圆形如图: 代码示例 <!DOCTYPE html& ...
如何使用canvas绘制圆形
Canvas是HTML5中新增的元素,专门用来绘制图形,相当于在页面中放了一张"画布",可以在里面绘制图形,但是不是指用鼠标画图,而是需要用Javascript编写需要绘制的图形的 ...
android绘制环形进度_Android使用Canvas绘制圆形进度条效果
前言 Android自定义控件经常会用到Canvas绘制2D图形,在优化自己自定义控件技能之前,必须熟练掌握Canvas绘图机制.本文从以下三个方面对Canvas绘图机制进行讲解: 画布Canvas ...
H5 Canvas绘制圆形进度条动画效果
效果如图效果比较简单 html结构部分 <canvas id="canvas" width="110" height="110"&g ...
圆头像微信小程序绘图_小程序canvas绘制圆形微信头像
提示:canvas画布绘画图片的时候,图片不能是互联网图片,必需是本地图片才可以正常绘制. 第一步:获取客户受权,下载微信头像图片到本地.pleaseSign: function(event) { w ...

canvas绘制圆形

canvas绘制圆形相关推荐

最新文章

热门文章