如何使用canvas绘制圆形

Canvas是HTML5中新增的元素，专门用来绘制图形，相当于在页面中放了一张“画布”，可以在里面绘制图形，但是不是指用鼠标画图，而是需要用Javascript编写需要绘制的图形的脚本。

我们利用canvas可以绘制出下图：

在绘制上图之前，我们先来看下相关知识点：

一、开始创建路径

使用beginPath方法开始创建路径。beginPath() 方法表示开始一条路径，或重置当前的路径。简单来说，其实就是告诉画布，我要开始画草稿了，请把之前的草稿都清除掉。

这个方法不设置参数，通过调用这个方法开始创建路径，在案例中我们需要循环绘制圆形，在循环的几次创建路径的过程中，每次开始创建是都要调用beginPath()。

语法是：

context. beginPath ();

二、创建圆形路径

创建圆形路径的时候，需要使用图形上下文对象的arc()方法，这个方法的定义是：

arc() 方法创建弧/曲线(用于创建圆或部分圆)。

这个方法的语法是：

这个方法使用6个参数，

x为圆的中心的 x 坐标;

y为圆的中心的 y 坐标;

r为圆的半径;sAngle为起始角，以弧度计(弧的圆形的三点钟位置是 0 度);

eAngle为结束角，以弧度计;

counterclockwise为规定应该逆时针还是顺时针绘图(False = 顺时针，true = 逆时针)。

arc()方法不仅可以绘制圆形，还可以绘制圆弧形，因此，必须指定起始角和结束角

三、关闭路径

路径创建完毕后，使用图形上下文对象的closePath()方法关闭路径。

closePath() 方法创建从当前点到开始点的路径。

语法：

context.closePath();

关闭路径后，路径的创建工作就完成了。但是需要注意的是，这个时候只是路径创建完毕而已，还没有真正绘制任何图形。我们接着来学习如何设置绘制样式和填充当前路径。

如何使用canvas绘制圆形相关推荐

canvas绘制圆形
canvas绘制圆形的思路: 1.创建路径 XXX.beginpath(); 2.创建圆形的路径: 3.关闭路径:XXX.closepath(); 路径不关闭也能绘制出图形 4.设定绘制样式. 创建圆 ...
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& ...
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绘制圆形相关推荐

最新文章

热门文章