canvas

一、canvas 概述

畫布<canvas>元素是 HTML5 中的新元素，能夠經過JavaScript 在頁面中指定的區域繪製圖形

<canvas id="canvas" width="400px" height="500px">畫布，你的瀏覽器不支持canvas，請更新瀏覽器</canvas>

canvas 須要設置 width 和 height 屬性，若是沒有設置這兩個屬性，width 和 height 有默認值（300，150）。若是經過style 設置 width 、height，則圖形有可能會拉伸變形，參見該文章。

使用canvas的步驟：一、取得canvas元素對象 ；二、經過canvas 元素對象的 getContext("2d") 取得繪圖2d上下文對象的引用；三、使用上下文的各類屬性和方法來繪製圖片。

2d上下文的座標起始於 canvas 的左上角，原點座標是 (0 , 0) 。

let imgURL = canvas.toDataURL("image/png");  //toDataURL() 是canvas對象的方法，導出畫布上的圖像
let img = document.createElement("img");
img.src = imgURL;
imgDiv.appendChild(img);

二、繪圖上下文對象的屬性和方法

fillStyle：該屬性指定填充的樣式（顏色，漸變對象，圖像），值能夠是字符串，漸變對象，模式對象，默認值是 「#000000」。若是是指定顏色的字符串，能夠是任何CSS中指定顏色的格式

strokeStyle：該屬性指定描邊的樣式，值能夠是字符串，漸變對象，模式對象，默認值是 「#000000」。若是是指定顏色的字符串，能夠是任何CSS中指定顏色的格式

 

fillRect( x, y, w, h)：填充一個矩形，並指定座標 (x , y)，寬高 w 、h。其填充的顏色是經過 fillStyle 屬性設置的

strokeRect( x, y, w, h)：繪製一個矩形，沒有填充

clearRect( x, y, w, h)：將畫布上的指定矩形區域清空，能夠去掉以前繪製的圖形

lineWidth：指定線條的寬度，能夠是任何整數

lineCap：指定線條末端的形狀，能夠是 "butt"（平頭），"round"（圓頭），"square"（方頭）

lineJoin：指定線條相交的方式，能夠是 "round"（圓交），"bevel"（斜交），"miter"（斜接）

 

beginPath()：表示開始繪製路徑，在繪製路徑以前必須先調用該方法

arc( x, y, radius, startAngle, endAngle, counterclockwise)：以 (x , y) 爲圓心繪製一條半徑爲 radius 的弧線，弧線的起始、截止角度分別是 startAngle，endAngle（角度是以弧度表示的），

counterclockwise表示是否按逆時針方向開始繪製（false是順時針方向），角度的零弧度在x軸右側

arcTo( x1, y1, x2, y2, radius)：繪製一條 半徑爲 radius 的弧線 穿過 (x1 , y1) ，(x2 , y2)兩個點

bezierCurveTo(c1x, c1y, c2x, c2y, x, y)：繪製三次貝塞爾曲線，(c1x, c1y)，(c1x, c1y) 是控制點1，控制點2的 座標，(x, y) 是終點的的座標

quadraticCurveTo(c1x, c1y, x, y)：繪製二次貝塞爾曲線，(c1x, c1y)，控制點的 座標，(x, y) 是終點的的座標

moveTo(x , y)：把畫筆移動到指定的座標(x, y)。至關於設置路徑的起始點座標。

lineTo(x , y)：繪製直線，從上一點開始到點 (x , y)

rect( x, y, w, h)：繪製矩形路徑，（不是獨立的形狀）

closePath()：閉合路徑，繪製一條鏈接路徑起點和終點的直線，閉合路徑以後，圖形繪製命令又從新指向到上下文中

stroke()：經過線條來繪製圖形輪廓

fill()：經過填充路徑的內容區域生成實心的圖形

clip()：能夠在路徑上建立一個剪切區域，剪切區的大小是以前路徑的範圍。一旦剪切了某個區域，則全部以後的繪圖都會被限制在被剪切的區域內（不能訪問畫布上的其餘區域），被剪切區域內圖形部分是可見的。

能夠在使用 clip() 方法前經過使用 save() 方法對當前畫布區域進行保存，並在之後的任意時間對其進行恢復（經過 restore() 方法）

 

font：該屬性用於設置繪製文本的字體、大小、樣式，用css中字體格式設置方式，"bold 14px Arial"

textAlign：設置文本你的水平對齊方式，可選值："start"，"end"，"left"，"right"，"center"

textBaseline：表示文本的基線，設置垂直對齊方式，可選值："top"，"hanging"，"middle"，"alphabetic"，"ideographic"，"bottom"

fillText(string, x, y [,maxWidth])：填充式繪製文本（實體的）

strokeText(string, x, y [,maxWidth])：描邊式繪製文本（中空的）

measureText(string)：輔助肯定文本大小，接受一個要繪製的文本，返回TextMetrics對象，該對象有一個 width 屬性，表示在當前文本字體樣式下，文本繪製時須要的寬度

 

rotate(angle)：變換矩陣，圍繞遠點旋轉 angle 弧度

scale(scaleX, scaleY)：縮放圖像，在x，y方向上分別乘以縮放比例，默認縮放比例是1.0

translate(x , y)：變換矩陣，將座標原點移動到(x, y)

transform(m1_1, m1_2, m2_1, m2_2, dx, dy)：直接變換修改變換矩陣，修改方式是，乘以矩陣 

m1_1     m1_2    dx

m2_1     m2_2    dy

0            0           1

setTransform(m1_1, m1_2, m2_1, m2_2, dx, dy)：將變換矩陣重置爲默認狀態，而後再調用 transform()

 

save()：保存當前全部設置，而後可進行新的設置，繪製新樣式的圖形

restore()：恢復以前保存的設置，使用以前的設置繪圖，save() 和 restore() 能夠嵌套配合使用

 

drawImage(image, targetX, targetY [, targetW, targetH] )：將圖像繪製到畫布中，參數：圖像對象，畫布中圖像的起點的 x 座標，圖像起點的 y 座標，圖像的高度，圖像的寬度；最後兩個參數能夠不用設置，這樣繪製出來的圖像的高度和高度和原圖同樣

drawImage(image,sourceX, sourceY, sourceW, sourceH, targetX, targetY, targetW, targetH )：繪製圖像，能夠將原圖中的一部分繪製到畫布上，

參數：圖像對象，原圖像的起點的 x 座標，原圖像起點的 y 座標，原圖像的高度，原圖像的寬度，目標圖像的起點的 x 座標，目標圖像起點的 y 座標，目標圖像的高度，目標圖像的寬度；

 

shadowColor：設置陰影顏色，css顏色格式，默認黑色

shadowOffsetX：x 軸方向的陰影偏移量，默認爲0

shadowOffsetY：y 軸方向的陰影偏移量，默認爲0

shadowBlur：模糊的像素度，默認爲0（不模糊）

 

createLinerGradient(startX, startY, endX, endY)：建立線性的漸變對象，參數：起點x座標，起點y座標，終點x座標，終點y座標

createRadialGradient(x0, y0, r0, x1, y1, r1)：建立徑向漸變對象，參數：起點圓心座標x0，y0，半徑r0，終點圓心座標x1，y1，半徑r1

獲得漸變對象後，須要使用漸變的對象的 addColorStop(flag, colorString)方法，設置漸變開始和結束的顏色，flag只能是0 或 1 ，0表示開始，1表示結束。而後將漸變對象賦給 上下文的 fillStyle 或者 strokeStyle 屬性，最後繪製圖形

 

createPattern(image, repeat)：建立模式對象，表示如何重複圖像。參數：img對象/video對象/另外一個canvas對象（HTML的元素），圖像重複模式（和css 的 background-repeat 屬性同樣，"repeat"，"repeat-x"，"repeat-y"，"no-repeat"）;

獲得模式對象後，將它賦給 fillStyle 屬性，而後開始繪製區域

 

getImageData(x, y, w, h)：返回一個ImageData對象的實例，參數：要取得數據畫面區域的座標和寬高。ImageData對象有三個屬性：width，height，data。data是一個數組，保存着所選的區域的每一個像素的數據（rgba，連續四個），data中每一個像素的數據時依次排列的，數值大小介於0-255之間

globalAlpha：設置全部繪製圖像的透明度，值[0,1]，默認是0

globalCompositionOperation：表示後繪製的圖形怎麼樣與先繪製的圖形結合，可能的值：

"source-over"：默認值，後繪製的圖形位於先繪製的圖形的上方

"source-in"：後繪製的圖形與先繪製的圖形重疊的部分可見，二者其餘部分徹底透明

"source-out"：後繪製的圖形與先繪製的圖形不重疊的部分可見，先繪製的圖形徹底透明

"source-atop"：後繪製的圖形與先繪製的圖形重疊部分可見，新繪製的圖形不受影響

"destination-over"：後繪製的圖形位於先繪製的圖形的下方，只有以前透明像素下的部分可見

"destination-in"：後繪製的圖形位於先繪製的圖形下方，二者不重疊部分徹底透明

"destination-out"：後繪製的圖形擦除與先繪製的圖形的重疊部分

"destination-atop"：後繪製的圖形位於先繪製圖形的下方，在二者不重疊的地方，先繪製的圖形變透明

"ligher"：後繪製的圖形與先繪製的圖形重疊部分的值相加，使該部分變亮

"copy"：後繪製的圖形徹底替代與之重疊的先繪製的圖形

"xor"：後繪製的圖形與先繪製的圖形的重疊部分執行」異或「操做

 

 <img src="img/next.png" alt="ss">
    <canvas id="canvas" width="500" height="400">畫布，你的瀏覽器不支持canvas，請更新瀏覽器</canvas>
    <div id="imgDiv"></div>


    let canvas = document.querySelector("#canvas");
    let imgDiv = document.querySelector("#imgDiv");


    let ctx = canvas.getContext("2d");

    ctx.fillStyle="red";
    ctx.strokeStyle="blue";
   // ctx.strokeRect(10,10,50,50);
    ctx.fillRect(10,10,50,50);
    ctx.clearRect(25,25,10,10);



    let imgURL = canvas.toDataURL("image/png")
    let img = document.createElement("img");
    img.src = imgURL;
    imgDiv.appendChild(img);

    ctx.beginPath();
    ctx.arc( 150, 150, 40, 0, 0.5*Math.PI, false);
    ctx.closePath();
    ctx.stroke();

    ctx.font = "bold 20px Arial";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillText("hello",100,100,50);
    ctx.strokeText("hello",140,140,50);


    var gradient = ctx.createLinearGradient(150,20,150,90);
    gradient.addColorStop(0,"#FFFF00");
    gradient.addColorStop(1,"#000000");

    ctx.fillStyle = gradient;
    ctx.fillRect(130,20,40,70);

    gradient = ctx.createRadialGradient(230,60,15,230,60,35);

    gradient.addColorStop(0,"#FFFF00");
    gradient.addColorStop(1,"#000000");

    ctx.fillStyle = gradient;
    ctx.fillRect(180,10,100,100);

    var pattern = ctx.createPattern(document.images[0],"repeat");
    ctx.fillStyle = pattern;
    ctx.fillRect(290,10,160,155);

   drawImg();
    function drawImg() {  // 簡單的灰階過濾
        let ctx = canvas.getContext("2d");
        let img = document.images[0];
        let imgData,data;

        ctx.drawImage(img,0,0);

        imgData = ctx.getImageData(0,0,img.width,img.height);
        data = imgData.data;

        for(let i=0,len = data.length; i<len; i+=4){
            let red = data[i];
            let green = data[i+1];
            let blue =  data[i+2];
            let alpha = data[i+3];

            let average = Math.floor((red + green + blue)/3);

            data[i] = average;
            data[i+1] = average;
            data[i+2] = average;
        }

        imgData.data = data;
        ctx.putImageData(imgData,0,0);
    }