摘要：一基礎(chǔ)知識(shí)基礎(chǔ)知識(shí)代碼示例獲取元素獲取畫圖環(huán)境，指明為基礎(chǔ)知識(shí)線條線條寬度繪制出輪廓圓形填充路徑填充顏色描邊繪制文字繪制文字繪制描邊文字清除二高級(jí)功能保存和恢復(fù)繪圖狀態(tài)代碼示例保存狀態(tài)保存狀態(tài)恢復(fù)狀態(tài)你可以用棧的概覽去理解保存和恢復(fù)繪圖的狀

代碼示例

var canvas = document.getElementById("canvas"),  //獲取canvas元素
    context = canvas.getContext("2d");          //獲取畫圖環(huán)境，指明為2d
    
    // 1,基礎(chǔ)知識(shí)
    context.fillStyle="rgb(0,255,0)";
    context.fillRect(0,0,200,200);

        context.lineWidth = 5; // 線條寬度
        context.beginPath();
        context.moveTo(40,40);
        context.lineTo(340,40);
        context.closePath();
        context.stroke();// 繪制出輪廓

context.arc(x,y,radius,startAngle,endAngle,anticlockwise);

    context.beginPath();
    context.arc(230,90,50,0,Math.PI*2,false);
    context.closePath();
    context.fill();// 填充路徑

    context.fillStyle = "rgb(255,0,0)";
    context.fillRect(40,40,100,100);

    context.strokeStyle = "rgb(255,0,0)";
    context.strokeRect(40,40,100,100);

    var text = "Zeng tian sheng";
    context.font = "30px serif";
    context.fillText(text,40,40); // 繪制文字
    //context.strokeText(text,40,40); // 繪制描邊文字

context.clearRect(0,0,100,100);

    context.fillStyle = "rgb(255,0,0)";
    context.save();  // 保存狀態(tài)
    context.fillRect(0,0,50,50);
    
    context.fillStyle = "rgb(0,255,255)";
    context.save();  // 保存狀態(tài)
    context.fillRect(100,0,50,50);
    
    context.restore(); // 恢復(fù)狀態(tài)
    context.fillRect(200,0,50,50);

你可以用棧的概覽去理解保存和恢復(fù)繪圖的狀態(tài)，save() 將當(dāng)前繪圖層存入棧中，restore()取出棧頂?shù)膱D層，后進(jìn)先出。

注意：平移的是像素值 ，100px

context.translate(100,100)

注意：縮放的是比例，下面代碼是將圖形寬高放大 2 倍

context.scale(2,2)

context.rotate(Math.PI/4);// 順時(shí)針旋轉(zhuǎn) 45"

(1)、transform()

transform(a, b, c, d, e, f)

    context.transform(2,0,2,150,150) ;// 平移+縮放
    context.fillRect(0,0,100,100)

(2)、setTransform(1,0,0,1,0,0)

需要重置矩陣才能進(jìn)行下面的再次 transform（）

    context.transform(2,0,2,150,150) ;// 平移+縮放
    context.fillRect(0,0,100,100);
    
    context.setTransform(1,0,0,1,0,0);// 單位矩陣
    context.transform(2,0,2,150,150) ;// 平移+縮放
    context.fillRect(100,100,100,100)

    context.fillStyle = "rgb(255,0,0)";
    context.fillRect(0,0,50,50);

    context.globalAlpha = 0.5;
    
    context.fillStyle = "rgb(0,255,255)";
    context.fillRect(25,25,50,50);

注意：上面的圖層也有合成的效果，但都是使用默認(rèn)的
context.globalCompositeOperation = "source-over";
所以都是 上一層覆蓋下一層的效果

context.globalCompositeOperation = "source-over|lighter ....";

更多請(qǐng)見示例代碼

    context.fillStyle= "rgb(0,255,0)";
    context.shadowBlur = 50;
    context.shadowColor = "rgb(0,255,0)";
    context.shadowOffsetX = 2;
    context.shadowOffsetY = 2;
    context.arc(100,100,50,0,Math.PI*2,false);
    context.fill();

createLinearGradient(x1,y1,x2,y2); 漸變的起點(diǎn)個(gè)終點(diǎn) ?

var gradient = context.createLinearGradient(10,10,50,100);
    gradient.addColorStop(0,"rgb(0,0,0)");
    gradient.addColorStop(1,"rgb(0,255,0)");
    context.fillStyle = gradient;  // gradient
    context.fillRect(0,0,100,100);

createRadialGradient(x0,y0,r0,x1,y1,r1);

var gradient = context.createRadialGradient(300,300,10,100,100,50);
    gradient.addColorStop(0,"rgb(0,0,0)");
    gradient.addColorStop(1,"rgb(0,255,0)");
    context.fillStyle = gradient;
    context.fillRect(0,0,200,200);

    context.fillStyle = "rgb(255,0,0)";
    context.beginPath();
    context.moveTo(100,50);
    context.lineTo(150,150);
    context.lineTo(50,150);
    context.closePath();
    context.stroke();
    context.fill();

二次貝塞爾只有一次彎曲，三次貝塞爾有兩次彎曲 ?

(1)、二次貝塞爾 quadraticCurveTo(cpx ,cpy ,x ,y)

    context.lineWidth = 5;
    context.beginPath();
    context.moveTo(50,250);
    context.quadraticCurveTo(250,100,450,250);
    context.stroke();

(2)、三次貝塞爾 bezierCurveTo(cp1x, cpp1y, cp2x,cp2y, x, y)

    context.lineWidth = 5;
    context.beginPath();
    context.moveTo(50,250);
    context.bezierCurveTo(150,50,350,450,450,250);
    context.stroke();

 var image = new Image();
    image.src = "https://avatars3.githubusercontent.com/u/15622519?v=3&u=48049875e3e38cfc9499bda745ec77b1c000066d&s=400";
    image.onload = function () {
        context.drawImage(image,0,0);
    }

(1)、調(diào)整圖片大小

context.drawImage(image,x,y,width,height);

(2)、裁剪圖片

context.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

（1）、獲取canvas的像素值

訪問(wèn)像素值  /  一個(gè)像素點(diǎn)有4個(gè)值 rgba
可以拿到像素點(diǎn)對(duì)其進(jìn)行一定比例的改變像素值從而得到比如灰度的圖片,不同色調(diào)的圖片等 ?

var imgData = context.getImageData(x,y,width,height);
    var pixel = imgData.data; // 得到一個(gè)數(shù)組像素
    var red = pixel[0];
    var green = pixel[1];
    var blue = pixel[2];
    var alpha = pixel[3];

（2）用像素點(diǎn)繪制圖像

 var imgdata = context.createImageData(200,200);
    var pixel = imgdata.data;
    var numpixel = imgdata.width*imgdata.height;
    for(i=0;i

三、? 實(shí)戰(zhàn)篇  示例代碼