HTML5 - canvas : gradient & pattern

HTML

<canvas id="myCanvas" width="400" height="400"></canvas>

JQuery 1.9.1

$(function(){
  var cxt=$('#myCanvas')[0].getContext('2d');
  //繪製不規則圖形
  cxt.beginPath();
  cxt.moveTo(100,50);//繪圖開始
  cxt.bezierCurveTo(120,0,140,0,135,50);
  cxt.bezierCurveTo(170,10,180,20,190,50);
  cxt.bezierCurveTo(250,10,300,20,290,70);
  cxt.bezierCurveTo(350,70,360,130,300,130);
  cxt.bezierCurveTo(300,200,250,190,200,150);
  cxt.bezierCurveTo(150,200,100,200,120,130);
  cxt.bezierCurveTo(50,100,0,20,100,50);
  cxt.closePath();//繪圖結束
  var img=new Image();//建立image物件
  img.src='https://c1.staticflickr.com/1/359/18606422976_a1fa874e07_k.jpg';//載入圖片
  var pattern=cxt.createPattern(img,'no-repeat');//設定圖片為pattern並給予cxt物件
  cxt.fillStyle=pattern;//將cxt填滿
  cxt.fill();
  cxt.stroke();
  
  cxt.beginPath();//繪圖開始
  cxt.rect(10,200,300,50);//繪製方形
  var grd=cxt.createLinearGradient(10,200,300,50);//繪製線性漸層並給予cxt物件
  grd.addColorStop(0,'yellow');//漸層起始顏色
  grd.addColorStop(1,'red');//漸層結束顏色
  cxt.fillStyle=grd;//將cxt填滿
  cxt.fill();
  
  cxt.beginPath();//繪圖開始
  cxt.arc(60,330,50,0,Math.PI,true);//繪製半圓
  cxt.closePath();//繪圖結束，缺少這個設定，半圓將因為未關閉，所以缺少下方直線線條
  var rGrd=cxt.createRadialGradient(60,330,0,60,330,50);//繪製圓形漸層並給予cxt物件
  rGrd.addColorStop(0,"yellow");//漸層起始顏色
  rGrd.addColorStop(1,"red");//漸層結束顏色
  cxt.fillStyle=rGrd;//將cxt填滿
  cxt.fill()
  cxt.stroke();
});

主要使用function :

1. closePath() - 告知程式這邊為繪圖的閉鎖點，結束繪製圖型。
2. createPattern() - 將外部圖片導入為繪製物件的背景圖片，createPattern('圖片物件','repeat / no-repeat / repeat-x / repeat-y')。
3. createLinearGradient() - 繪製線性漸層，須先畫好底部的框架物件，才能將漸層填入，createLinearGradient('漸層的起始點x軸', '漸層的起始點y軸', '漸層的寬度', '漸層的高度')。
4. addColorStop() - 配對createLinearGradient()顯示漸層的顏色區段addColorStop('顏色錨點0~1', '顏色')。
5. createRadialGradient() - 繪製放射狀漸層，須先畫好底部的框架物件，才能將漸層填入，createRadialGradient('漸層起始x軸', '漸層起始y軸', '起始半徑', '漸層結束x軸', '漸層結束y軸', '結束半徑')。

Result

JSFiddle
https://jsfiddle.net/MickeyChen/0dyg5fp5/