您所在的位置：首頁 > IT干貨資料 > web前端 > 【Web前端基礎知識】如何使用canvas繪制圓形

【Web前端基礎知識】如何使用canvas繪制圓形

發布： Web前端培訓
來源：Web前端干貨資料
2020-04-15 14:52:40
閱讀()
分享

手機端入口

四、設置繪制樣式

設置繪制樣式，需要使用fillStyle。fillStyle 屬性設置或返回用于填充繪畫的顏色、漸變或模式。

語法：context.fillStyle=color|gradient|pattern;

color：指示繪圖填充色的 CSS 顏色值。默認值是 #000000;

gradient：用于填充繪圖的漸變對象(線性或放射性);

pattern：用于填充繪圖的 pattern 對象。

這里我們需要使用fillStyle來設置顏色。

五、填充圖形

我們需要使用fill()方法來填充已經設置好的圓形。

fill() 方法填充當前的圖像(路徑)。默認顏色是黑色。

語法：

context.fill();

六、利用上面學會的內容我們先來繪制一個圓形

我們在寬500像素，高500像素，邊框是1像素黑色實線的畫布中，繪制一個圓心在x軸25像素，y軸25像素，半徑是10像素，起始角是0，結束角是2*PI，逆時針，填充顏色是半透明的綠色的圓形。

具體代碼如下：

>

<html>

<head>

    <meta charset="UTF-8">

    <title>使用canvas繪制圓形title>

    <style>

        #canvas{

            border:1px solid #000;

        }

    style>

head>

<body>

    <canvas width="500" height="500" id="canvas">canvas>

    <script>

        var myCanva  = document.getElementById("canvas");

        var ctx = myCanva.getContext("2d");



        ctx.beginPath();

        ctx.arc(25, 25, 10, 0, Math.PI * 2, true);

        ctx.closePath();

        ctx.fillStyle = 'rgba(0,255,0,0.25)';

        ctx.fill();

    script>

body>

html>

七、繪制文中一開始提到的圖，只需要加一個循環就可以實現了。

具體代碼如下：

>

<html>

<head>

    <meta charset="UTF-8">

    <title>使用canvas繪制圓形title>

    <style>

        #canvas{

            border:1px solid #000;

        }

    style>

head>

<body>

    <canvas width="500" height="500" id="canvas">canvas>

    <script>

        var myCanva  = document.getElementById("canvas");

        var ctx = myCanva.getContext("2d");



        for(var i = 0; i < 10; i++){

            ctx.beginPath();

            ctx.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);

            ctx.closePath();

            ctx.fillStyle = 'rgba(0,255,0,0.25)';

            ctx.fill();

        }

    script>

body>

html>