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

以上代碼效果以下所示

好了，目前僅僅作學習記錄。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。