Canvas從入門到放棄 (二)

在慕課網上學習了 Canvas繪圖詳解 這門教程，寫了這篇canvas教程，想和大家分享學習的過程，希望和大家共同進步．=_=
這么久才更教程的第二篇，我該打(；′⌒`)

1. 效果展示

完整代碼請戳Lesson2/demo9.html

效果展示.png

2. 圖像的變換和保存

2.1 位移 translate(x,y)

完整代碼請戳Lesson2/demo1.html

　//第一個正方形從(0,0)點開始，x軸平移100像素，y軸平移100像素
   context.fillStyle = "#559ABB";
   context.translate(100,100);
   context.fillRect(0, 0, 100, 100);
        
   //第二個正方形從(100,100)點開始，x軸平移100像素，y軸平移100像素
   context.fillStyle = "#F8D184";
   context.translate(100,100);
   context.fillRect(0, 0, 100, 100);

可以看出兩個translate的效果是疊加的，為了使用圖形變換時效果不影響可保存canvas的狀態。

圖片.png

Canvas狀態的保存和恢復

save(): 保存當前圖形的狀態
restore(): 返回save的canvas的所有狀態

完整代碼請戳Lesson2/demo2.html

  //保存第一個正方形的狀態
  //從(0,0)點開始，x軸平移100像素，y軸平移100像素
  context.save();
  context.fillStyle = "#559ABB";
  context.translate(100,100);
  context.fillRect(0, 0, 100, 100);
  context.restore();

  //保存第二個正方形的狀態
  //從(0,0)點開始，x軸平移100像素，y軸平移100像素
  context.save();
  context.fillStyle = "#F8D184";
  context.translate(100,100);
  context.fillRect(0, 0, 100, 100);
  context.restore();

均以(0,0)為起點x,y軸平移100像素，藍色的正方形被黃色的正方形蓋住了

圖片.png

2.2 旋轉rotate(deg)

使用translate,rotate的星空圖
完整代碼請戳Lesson2/demo3.html

 window.onload = function () {
    var canvas = document.getElementById("canvas");
    var context = canvas.getContext("2d");
    canvas.width = 400;
    canvas.height = 400;
    context.fillStyle = "#283D52";
    context.fillRect(0, 0, canvas.width, canvas.height);
    //假設畫布中有50個星星
    for (var i = 0; i <= 50; i++) {
        //x軸偏移量
        var x = Math.random() * canvas.width;
        //y軸偏移量
        var y = Math.random() * canvas.height;
        //任意角度
        var a = Math.random() * 360;
        draw(context, x, y, a);
    }
};

    //繪制星星
    function draw(cxt, x, y, rot) {
        //保存canvas的狀態
        cxt.save();
        //x,y軸的偏移量
        cxt.translate(x, y);
        //旋轉的角度
        cxt.rotate(rot / 180 * Math.PI);
        //繪制星星的路徑
        starPath(cxt);

        cxt.fillStyle = "#F8D184";
        cxt.strokeStyle = "#FAD085";
        cxt.lineWidth = 2;
        cxt.lineJoin = "round";

        cxt.fill();
        cxt.stroke();
        cxt.restore();
    }
    
    //繪制一個星星的路徑,這里繪制星星時設定大圓半徑為10，小圓半徑為大圓半徑的一半
    function starPath(cxt) {
        cxt.beginPath();
        for (var i = 0; i < 5; i++) {
            cxt.lineTo(Math.cos((18 + i * 72) / 180 * Math.PI) * 10,
                　　　-Math.sin((18 + i * 72) / 180 * Math.PI) * 10);
            cxt.lineTo(Math.cos((54 + i * 72) / 180 * Math.PI) * 0.5 * 10,
                　　　-Math.sin((54 + i * 72) / 180 * Math.PI) * 0.5 * 10);
        }
        cxt.closePath();
    }

如何繪制星星　可參考 Canvas從入門到放棄 (一)
只有平移和旋轉，所有星星都是一樣大

圖片.png
2.3 縮放scale(sx,sy)

完整代碼請戳Lesson2/demo4.html

window.onload = function () {
    var canvas = document.getElementById("canvas");
    canvas.width = 400;
    canvas.height = 400;
    var context = canvas.getContext("2d");

    context.fillStyle = "#283D52";
    context.fillRect(0, 0, canvas.width, canvas.height);
    for (var i = 0; i < 80; i++) {
        //大圓半徑在[5-15)之間
        var R = Math.random() * 10 + 5;
        //x軸偏移量 
        var x = Math.random() * canvas.width;
        //y軸偏移量 
        var y =Math.random() * canvas.height;
        //旋轉角度
        var a = Math.random() * 360;
        drawStar(context, x, y, R, a);
     }
};
    function drawStar(cxt, x, y, R, rot) {
        cxt.save();
        //x,y軸的偏移量
        cxt.translate(x, y);
        //旋轉的角度
        cxt.rotate(rot / 180 * Math.PI);
        //縮放的大小
        cxt.scale(R, R);
        drawPath(cxt);

        cxt.fillStyle = "#F8D184";
        cxt.lineJoin = "round";
        cxt.fill();
        cxt.restore();
    }
    //繪制一個星星的路徑(繪制的星星看不見，因為這里沒有設置半徑，在上面用scale控制半徑)
    function drawPath(cxt) {
        cxt.beginPath();
        for (var i = 0; i < 5; i++) {
            //繪制大圓上的五個坐標點
            cxt.lineTo(Math.cos((18 + i * 72 ) / 180 * Math.PI),
               　　　　-Math.sin((18 + i * 72) / 180 * Math.PI));
            //繪制小圓上的五個坐標點
            cxt.lineTo(Math.cos((54 + i * 72) / 180 * Math.PI) * 0.5,
                　　　-Math.sin((54 + i * 72) / 180 * Math.PI) *0.5);
        }
        cxt.closePath();
    }
圖片.png

3. 填充樣式

3.1 漸變

線性漸變

step1: 設置漸變線

//參數是兩個坐標，構成了一條線段
var linearGrad = context.createLinearGradient(xstart,ystart,xend,yend)

step 2:在漸變線上設置關鍵色

//stop決定關鍵色的位置，color決定關鍵色的顏色
 linearGrad.addColorStop(stop,color);

繪制一片線性漸變的星空
完整代碼請戳Lesson2/demo5.html

   var canvas = document.getElementById("canvas");
   canvas.width = 400;
   canvas.height = 400;
   var context = canvas.getContext("2d");

   var linearGrad = context.createLinearGradient(0, 0, 0, 400);
   linearGrad.addColorStop(0, '#1C213B');
   linearGrad.addColorStop(0.25, '#2A2D49');
   linearGrad.addColorStop(0.5, '#4D4D5F');
   linearGrad.addColorStop(0.75, '#916580');
   linearGrad.addColorStop(1.0, '#C3919A');
   context.fillStyle = linearGrad;
   context.fillRect(0, 0, canvas.width, canvas.height);
線性漸變.png

徑向漸變

step 1: 設置漸變線

   //參數為第一個圓的圓心，半徑，第二個圓的圓心，半徑
   var linearGrad = context.createRadialGradient(x0,y0,r0,x1,y1,r1);

step 2: 在漸變線上設置漸變色

//stop決定關鍵色的位置，color決定關鍵色的顏色
linearGrad.addColorStop(stop,color);

繪制一片徑向漸變的星空
完整代碼請戳Lesson2/demo6.html

 var canvas = document.getElementById("canvas");
 canvas.width = 400;
 canvas.height = 400;
 var context = canvas.getContext("2d");

 var linearGrad = context.createRadialGradient(canvas.width/2, canvas.height, 0, 
                     canvas.width/2,canvas.height,canvas.height);
linearGrad.addColorStop(0, '#CC99A1');
linearGrad.addColorStop(1.0, '#213244');

context.fillStyle = linearGrad;
context.fillRect(0, 0, canvas.width, canvas.height);
徑向漸變.png

3.2 使用圖片填充畫布

完整代碼請戳Lesson2/demo7.html

//第一個參數，表示填充一個圖片，第二個參數填充方式
createPattern(img,repeat-style)

 window.onload = function () {
    var canvas = document.getElementById("canvas");
    canvas.width = 300;
    canvas.height = 300;
    var context = canvas.getContext("2d");

　　//創建一個圖片對象
    var backGroundImage = new Image();
    backGroundImage.src = "lemon.png";
    backGroundImage.onload = function () {
        var pattern = context.createPattern(backGroundImage, "repeat");
        context.fillStyle = pattern;
        context.fillRect(0, 0, 300, 300);
    }
}
圖片填充.png
3.3 使用另一個canvas填充畫布

完整代碼請戳Lesson2/demo8.html

//第一個參數，表示填充另外一個畫布，第二個參數填充方式
createPattern(canvas,repeat-style)

window.onload = function () {
    var canvas = document.getElementById("canvas");
    canvas.width = 400;
    canvas.height = 400;
    var context = canvas.getContext("2d");

    var backCanvas = creatBackCanvas();
    var pattern = context.createPattern(backCanvas, "repeat");
    context.fillStyle = pattern;
    context.fillRect(0, 0, 400, 400);
};
 //創建一個背景畫布，畫布中繪制一顆星星
function creatBackCanvas() {
    var backCanvas = document.createElement("canvas");
    backCanvas.width = 100;
    backCanvas.height = 100;

    var backCanvasContext = backCanvas.getContext("2d");
    drawStar(backCanvasContext, 50, 50, 20, 0);
    return backCanvas;
}
//繪制星星
function drawStar(cxt, x, y, R, a) {
    cxt.beginPath();
    for (let i = 0; i < 5; i++) {
        cxt.lineTo(Math.cos((18 + i * 72 - a) / 180 * Math.PI) * R + x,
                  -Math.sin((18 + i * 72 - a) / 180 * Math.PI) * R + y);
        cxt.lineTo(Math.cos((54 + i * 72 - a) / 180 * Math.PI) * R/2 + x,
                  -Math.sin((54 + i * 72 - a) / 180 * Math.PI) * R/2 + y);
    }
    cxt.closePath();

    cxt.fillStyle = "#F8D184";
    cxt.strokeStyle = "#FAD085";
    cxt.lineWidth = 3;
    cxt.lineJoin = "round";
    cxt.fill();
    cxt.stroke();
}
使用canvas填充.png

總結：填充樣式 fillStyle

fillStyle = color   （顏色）
            gradient（漸變）
            image   （圖片）
            canvas  （畫布）

下節預告：曲線的繪制，文字的渲染

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容