html5Canvas画圆

时间 2019-12-05

标签 html5canvas html canvas 画圆栏目 HTML 繁體版

原文原文链接

html5Canvas画圆

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>gf</title>
    <style type="text/css">
        canvas{
        display: block;
        margin: 50px auto;        
        box-shadow: -2px -2px 2px #F3F2F2, 5px 5px 5px #6F6767;
        }
    </style>
</head>
<body>
    <canvas id="mycanvas" width="450px" height="350px"></canvas>    
    <script type="text/javascript">
        var c = document.getElementById("mycanvas");
        var context = c.getContext('2d');        
        context.arc(195,150,70,0,2*Math.PI);
        context.stroke();        
    </script>
</body>
</html>

效果以下：

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

那么接下来咱们画一端弧，代码以下，java

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

效果以下，canvas

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();

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

因此其余不一样的弧线能够本身调整。code

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

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();

以上代码效果以下所示

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