WEB前端第六十六課——H5新特性：canvas圖形繪製

時間 2021-03-31

標籤 javascript java canvas 數組瀏覽器函數優化動畫插件 3d 欄目 HTML 简体版

原文原文鏈接

1.canvas描述javascript

　　canvas（畫布）是H5提出的新標籤，其目的是用於替代相似flash動畫或遊戲的插件，java

　　可以極大地減小頁面結構大小，提升頁面響應速度。canvas

　　說明：數組

　　　　⑴ canvas標籤僅是一個圖形容器，提供了一個能夠繪製圖像、圖形的區域，能夠實時渲染瀏覽器

　　　　　圖形、動畫、虛擬圖像等，對快速繪圖進行了大量優化；函數

　　　　⑵ 使用<canvas>標籤習慣性在標籤內部設置元素大小，以及進行不支持說明；優化

　　　　　示例：<canvas width:300px height:360px><p>瀏覽器不支持「canvas」！</p></canvas>動畫

　　　　　固然，也能夠經過CSS設置尺寸屬性，還能夠經過「if語句」判斷瀏覽器是否支持canvas。插件

　　　　⑶ canvas標籤除了提供繪圖區域外，沒有其餘行爲功能，其內部的全部內容都要經過腳本3d

　　　　　（JavaScript）進行繪製完成；

　　　　⑷ 使用canvas的基礎模板：

<body>
<!--建立canvas畫布，並設置區域大小-->
    <canvas id="myCanvas" width="200" height="300">
        您的瀏覽器不支持Canvas！
    </canvas>
    <script>
    //  獲取canvas畫布
        var canvas=document.getElementById('myCanvas');
    //  在畫布上建立畫筆
        var ctx=canvas.getcontext('2d');
/*    //  或經過if語句判斷瀏覽器是否支持canvas
        if (canvas.getcontext){
            var ctx=canvas.getcontext('2d');
        }else {
            canvas.innerText='瀏覽器不支持canvas！';
        }*/
    //  在畫布上繪製圖形
        ctx.fillRect(10,10,60,60);
    </script>
</body>

　　　　⑸ 絕大部分Canvas的繪圖API都沒有定義在<canvas>元素自己上，而是定義在經過畫布的

　　　　　「getContext()」方法獲取的「繪圖上下文環境」這個對象上；

　　　　⑹ canvas元素只支持一種原生的圖形繪製：矩形，其餘全部圖形的繪製都至少須要生成一條路徑。

2.上屏即像素化

　　上屏即像素化是canvas的一個重要特徵，是指區域內圖形一旦繪製完成，便不能更改，如尺寸、位置等。

　　只有經過清除內容再從新繪製的方式，實現改變繪製內容的效果。

　　下面以繪製矩形爲例。

　　繪製矩形的相關方法：

　　　　⑴ fillRect( x ,y ,width, height)，繪製有填充的矩形；

　　　　⑵ strokeRect( x ,y ,width, height)，繪製無填充的矩形；

　　　　⑶ clearRect( x ,y ,width, height)，清除指定矩形內的像素；

　　　　⑷ rect( x, y, width, height) ，繪製矩形（定義矩形的路徑），須要配合stroke()方法完成繪製。

　　　　另外，設置填充繪畫的顏色，ctx.fillStyle='color';

　　代碼示例：

<body>
<!--建立canvas畫布，並設置區域大小-->
    <canvas id="myCanvas" width="360" height="360">
        您的瀏覽器不支持Canvas！
    </canvas>
    <script>
    //  獲取canvas畫布
        var canvas=document.getElementById('myCanvas');
    //  在畫布上建立畫筆
        var ctx=canvas.getContext('2d');

    //  在畫布上繪製圖形
        ctx.fillRect(50,50,60,60);
        ctx.strokeRect(30,30,100,100);
        ctx.clearRect(70,70,20,20);

        ctx.rect(150,150,60,60);
        ctx.stroke();       //繪製出rect()方法定義的路徑

    //  經過反覆清除、繪製，達到圖像位移的效果。
        var position=30;
        var direction=1;
        var timer=setInterval(function () {
            if (position>=230){
                direction=-1;
            }else if (position<=10){
                direction=1;
            }
            switch (direction) {
                case -1:{
                    ctx.clearRect(position+19,position+19,102,102);
                    ctx.fillRect(position+20,position+20,60,60);
                    ctx.strokeRect(position,position,100,100);
                    ctx.clearRect(position+40,position+40,20,20);
                    position-=20;
                }
                break;
                case 1:{
                    position+=20;
                    ctx.clearRect(position-21,position-21,102,102);
                    if (position<=130) {
                        ctx.fillRect(50,50,60,60);
                        ctx.strokeRect(30,30,100,100);
                        ctx.clearRect(70,70,20,20);

                    }
                    if (position>150&&position<=210) {
                        ctx.rect(150,150,60,60);
                        ctx.stroke();
                    }
                    ctx.fillRect(position+20,position+20,60,60);
                    ctx.strokeRect(position,position,100,100);
                    ctx.clearRect(position+40,position+40,20,20);
                }
                break;
            }
        },100);
    </script>
</body>

3.路徑繪製

　　canvas中路徑是圖形的基本元素，路徑是不一樣顏色、寬度、長度的線段或曲線相鏈接造成的點線集合。

　　繪製路徑的通常步驟：

　　　　⑴ beginPath()，路徑繪製開始

　　　　⑵ moveTo(x,y)，設置筆觸(落點)的座標位置

　　　　⑶ lineTo(x,y)，設置線段的終點座標位置

　　　　⑷ strokeStyle='color'，設置筆觸繪畫的顏色，默認爲黑色

　　　　⑸ stroke()，執行路徑繪製

　　　　⑹ fillStyle='color'，設置封閉路徑內部填充顏色，默認爲黑色

　　　　⑺ fill()，執行顏色填充

　　　　　　當使用fill()方法時，沒有閉合的路徑會自動閉合，能夠不使用closePath()函數，

　　　　　　但stroke()方法不會自動閉合路徑。

　　　　⑻ closePath()，路徑繪製結束

　　　　　　使用路徑開始和結束方法，能夠確保各個路徑之間的獨立性。

　　　　代碼示例：

<body>
    <canvas id="myCanvas" width="500" height="300">
        <p>Sorry，您的瀏覽器不支持Canvas！</p>
    </canvas>
    <script>
        var canvas=document.getElementById('myCanvas');
        var ctx=canvas.getContext('2d');
    //  建立未閉合路徑，不進行填充
        ctx.beginPath()
        ctx.moveTo(70,80);
        ctx.lineTo(70,150);
        ctx.lineTo(120,150);
        ctx.strokeStyle='yellowgreen';
        ctx.stroke();
        ctx.closePath();
    //  建立未閉合路徑，進行顏色填充
        ctx.beginPath()
        ctx.moveTo(170,80);
        ctx.lineTo(170,150);
        ctx.lineTo(220,150);
        ctx.lineTo(270,110);
        ctx.fillStyle='yellowgreen';
        ctx.fill();
        ctx.closePath();
    </script>
</body>

4.圓弧繪製

　　繪製圓弧或者圓形，使用「arc()」方法。

　　語法：ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

　　說明：arc()方法一共有6個參數，表示以(x,y)座標爲圓心、radius爲半徑、從startAngle角度開始、

　　　　　到endAngle角度結束，進行圓弧繪製，anticlockwise參數爲布爾值，false表示順時針繪製，

　　　　　true表示逆時針繪製。

　　　　　其中，arc()方法中的開始和結束角度單位是「弧度」，而不是度！

　　　　　在JS中角度和弧度的換算表達式：radius=(Math.PI/180)*angleDegrees，也就至關於使用

　　　　　「0~2」之間的任意數值乘以「Math.PI」獲得相應的弧度。

　　　　　另外，設置好圓弧路徑以後，可使用「Stroke()」方法進行繪製，也可使用「fill()」方法填充。

　　代碼示例：

<body>
    <canvas height="300" width="500" id="canvasArc">
        您的瀏覽器不支持Canvas！
    </canvas>
    <script>
        var canvas = document.getElementById('canvasArc');
        var ctx = canvas.getContext('2d');
        ctx.beginPath();
        ctx.arc(200,150,60,0,0.8*Math.PI,true);
        ctx.strokeStyle='blue';
        ctx.stroke();
        ctx.closePath();

        ctx.beginPath();
        ctx.arc(200,150,60,0,0.8*Math.PI,false);
        ctx.strokeStyle='red';
        ctx.stroke();
        ctx.closePath();

        ctx.beginPath();
        ctx.arc(200,150,60,1.5*Math.PI,0.3*Math.PI,false);
        ctx.fillStyle='lightgreen';
        ctx.fill();
        ctx.closePath();

        ctx.beginPath();
        ctx.arc(200,150,60,1.5*Math.PI,0.7*Math.PI,true);
        ctx.fillStyle='orange';
        ctx.fill();
        ctx.closePath();
    </script>
</body>

5.線型設置

　　⑴ 設置線條寬度

　　　　語法：ctx.lineWidth=value;

　　⑵ 設置線條端點

　　　　語法：ctx.linCap=style;

　　　　說明：

　　　　　　lineCap有三種樣式，butt（默認值）、round（圓形末端）、square（方形末端）

　　⑶ 設置線條鏈接處樣式

　　　　語法：ctx.lineJoin=style;

　　　　說明：

　　　　　　lineJoin有三種樣式，miter（默認值）、round（圓弧形）、bevel（切面形）

　　⑷ 設置線條虛線樣式

　　　　語法：ctx.setLineDash([segment1,segment2,segment3,...]);

　　　　說明：

　　　　　　setLineDash()方法的參數是一個數組，數組內的value依次表示虛線每一節的長度，

　　　　　　數組內的值將在線條上循環重複使用。

　　　　　　getLineDash()方法，用於獲取當前線條的虛線樣式，返回值爲數組。

　　　　　　lineDashOffset()方法，用於設置當前線條第一節的偏移量。

　　⑸ 代碼示例：

<body>
    <canvas id="canvasLineStyle" width="500" height="300"></canvas>
    <script>
        var canvas=document.getElementById('canvasLineStyle');
        var ctx=canvas.getContext('2d');
        ctx.beginPath();
        ctx.moveTo(330,25);
        ctx.lineTo(399,25);
        ctx.lineTo(370,150);
        ctx.lineWidth=8;                    //設置線條寬度
        // ctx.lineCap='round';             //設置線條端點樣式
        // ctx.lineJoin='bevel';            //設置線條鏈接處樣式
        ctx.setLineDash([3,2,1]);           //設置線條虛線樣式
        ctx.lineDashOffset=2;               //設置虛線起始位置偏移量
        var lineStyle=ctx.getLineDash();    //獲取虛線樣式
        console.log(lineStyle);
        ctx.stroke();
        ctx.closePath();

        ctx.strokeStyle="#e20213";
        for (var i=0;i<6; i++){
            ctx.lineWidth=2+i*5;            //設置線條寬度
            ctx.beginPath();
            ctx.moveTo(5+i*50, 25);
            ctx.lineTo(5+i*50, 150);
            ctx.stroke();
            ctx.closePath();
        }
    </script>
</body>

6.Gradients漸變

　　⑴ 線性漸變

　　　　語法：ctx.createLinearGradient(x1,y1,x2,y2);

　　　　說明：該方法有4個參數，(x1,y1)表示漸變的起點，(x2,y2)表示漸變的終點。

　　　　　　　該方法返回一個Gradient對象。

　　⑵ 徑向漸變

　　　　語法：ctx.createRadialGradient(x1,y1,r1,x2,y2,r2);

　　　　說明：該方法有6個參數，(x,y,r)表示以(x,y)爲圓心，以r爲半徑的圓，建立漸變區域。

　　　　　　　該方法返回一個Gradient對象。

　　⑶ 顏色設置

　　　　語法：canvasGradient.addColorStop(position,color);

　　　　說明：該方法有2個參數，position的值爲「0~1」之間的任意數，表示漸變顏色的相對位置，

　　　　　　　參數color用於設置漸變色，能夠是十六進制顏色值，也能夠是rgba()顏色。

　　⑷ 漸變填充

　　　　建立Gradient對象，並設置漸變顏色，而後將Gradient對象賦予「fillStyle」，便可進行繪製填充。

　　　　代碼示例：

<body>
    <canvas height="300" width="1000" id="canvasGradient"></canvas>
    <script>
        var canvas=document.getElementById('canvasGradient');
        var ctx=canvas.getContext('2d');
    //  建立線性漸變對象。
        var linearGradient=ctx.createLinearGradient(50,50,100,100);
    //  線性漸變對象顏色設置。
        linearGradient.addColorStop(0,'red');
        linearGradient.addColorStop(0.5,'yellow');
        linearGradient.addColorStop(1,'yellowgreen');
    //  線性漸變繪製。
        ctx.beginPath();
        ctx.fillStyle=linearGradient;
        ctx.fillRect(10,10,150,150);
        ctx.closePath();

    //  建立徑向漸變,外圓包含內圓。
        var radialGradient=ctx.createRadialGradient(300,80,10,270,80,80);
        radialGradient.addColorStop(0,'red');
        radialGradient.addColorStop(0.5,'yellow');
        radialGradient.addColorStop(1,'yellowgreen');
        ctx.beginPath();
        ctx.fillStyle=radialGradient;
        ctx.fillRect(200,10,150,150);
        ctx.fill();
        ctx.closePath();

        //  建立徑向漸變，外圓不包含內圓。
        var radialGradient=ctx.createRadialGradient(500,80,30,600,80,60);
        radialGradient.addColorStop(0,'red');
        radialGradient.addColorStop(0.5,'yellow');
        radialGradient.addColorStop(1,'yellowgreen');
        ctx.beginPath();
        ctx.fillStyle=radialGradient;
        ctx.fillRect(360,10,300,150);
        ctx.fill();
        ctx.closePath();
    </script>
</body>