html5Canvas画圆

Baaaan 发布于2019-08-02 10:10 / 2141人阅读

摘要：画圆首先来理解下弧度制，以下内容摘自百度百科。用弧长与半径之比度量对应圆心角角度的方式，叫做弧度制，用符号表示，读作弧度。的函数如下，，参数意义分别为圆心圆心半径开始的角度结束的角度是否逆时针，这里的角度就是采用弧度制。

html5Canvas画圆

首先来理解下弧度制，以下内容摘自百度百科。
用弧长与半径之比度量对应圆心角角度的方式，叫做弧度制，用符号rad表示，读作弧度。等于半径长的圆弧所对的圆心角叫做1弧度的角。由于圆弧长短与圆半径之比，不因为圆的大小而改变，所以弧度数也是一个与圆的半径无关的量。角度以弧度给出时，通常不写弧度单位。另外一种常用的度量角的方法是角度制。弧度制的精髓就在于统一了度量弧与角的单位，从而大大简化了有关公式及运算，尤其在高等数学中，其优点就格外明显。---《百度百科》

HTML5中canvas画曲线的函数有4个，分别是arc,arcTo,quadraticCurveTo,bezierCurveTo.其中最简单的是arc，
arc可以画一个完整的圆，也可以画一段弧线。
arc的函数如下，arc(x, y, radius, startAngle, endAngle, anticlockwise)，参数意义分别为
圆心x、圆心y、半径、开始的角度、结束的角度、是否逆时针，这里的角度就是采用弧度制。

先上个源码画一个标准的圆，代码如下

gf

效果如下：

关键在于参数中的startAngle, endAngle，代表弧度的起始，一个圆角度制是360度，弧度制就是2π，所以一个完整的圆是从0到2π，也就是上面所示的0和2*Math.PI。

那么接下来我们画一端弧，代码如下，

context.arc(195,150,70,0,0.5*Math.PI);
context.stroke();

效果如下，

0.5*Math.PI就是四分之一的圆，arc的0度就是数学上常用的0度，但是角度默认是顺时针的，与数学上的相反，由于canvas坐标与数学坐标相反，所以显示右下区间的弧段。
如果改变最后一个参数anticlockwise为true，则显示如下所示

所以弧线的弧线的绘制方向就变成逆时针，画了四分之三的圆弧。

context.arc(195,150,70,-0.5*Math.PI,0.5*Math.PI,true);
context.stroke();

以上代码画一个左半圆弧，如图

所以其他不同的弧线可以自己调整。

最后另外几个函数是用来画切线圆弧以及贝塞尔曲线的，有兴趣可以去研究下

context.moveTo(20,20); 
context.lineTo(100,20); 
context.arcTo(150,20,150,70,50);
context.lineTo(150,120); 
context.stroke();  

context.moveTo(20,20);
context.quadraticCurveTo(20,100,200,20);
context.stroke(); 

context.moveTo(20,20);
context.bezierCurveTo(20,100,200,100,200,20);
context.stroke();

以上代码效果如下所示

好了，目前仅仅做学习记录。

海外云主机私有云 html5Canvas 画圆 js画布画圆 python怎么画圆

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/52170.html

在安卓手机中rem单位border-radius:50%画圆变形的解决方案

摘要：但是在安卓手机中会有变形的情况存在，渲染方面确实安卓手机干不过毕竟安卓版本众多，还有什么的线等等的坑，都是能完美运行，安卓总得找方法。当使用做单位，出来的圆是不会变形的，可能是安卓在计算过程中产生误差或者有什么其他因素造成的渲染问题。罪魁祸首 i{ display inline-block width .08rem height .08r...

RiverLi 2019-08-30 15:55 评论0 收藏0
在安卓手机中rem单位border-radius:50%画圆变形的解决方案

摘要：但是在安卓手机中会有变形的情况存在，渲染方面确实安卓手机干不过毕竟安卓版本众多，还有什么的线等等的坑，都是能完美运行，安卓总得找方法。当使用做单位，出来的圆是不会变形的，可能是安卓在计算过程中产生误差或者有什么其他因素造成的渲染问题。罪魁祸首 i{ display inline-block width .08rem height .08r...

elarity 2019-08-23 14:54 评论0 收藏0
opencv python 画图操作/画线/画矩形/画圆/画多边形/添加文字

摘要：代码画圆圆心位置半径应用在上面绘制的矩形内绘制一个圆。字体类型检查文档以获取支持的字体字体比例指定字体大小常规的东西，如颜色，粗细，线型等。应用我们将在图像上写白色的几个字母代码 Drawing Functions in OpenCV 学习目标函数 cv2.line(), cv2.circle() , cv2.rectangle(), cv2.ellipse(), cv2.putTe...

SQC 2019-07-30 17:01 评论0 收藏0
Web前端常用代码笔记整理（02）

1.canvas图片预加载及进度条的实现 /*star *loading模块 *实现图片的预加载，并显示进度条 *参数：图片数组对象，加载完成的回调函数 */ function loadImages(sources,callback){ var loadedImages = 0; var numImages = 0; ctx.font=14px ...

null1145 2019-08-21 11:18 评论0 收藏0