canvas

一、概念

canvas通常就是用來繪製圖像的

二、基本知識

上下文對象 
  var canvas = doucment.getElementById("canvas"); 
  var ctx = canvas.getContext("2d"); 
  ctx.fillStyle = "color";// 填充樣式 
  ctx.strokeStyle = "color";//邊框樣式 
  ctx.fill();//填充區域 
  ctx.stroke();//繪製邊框

  附：顏色值： 
  #fff 
  #642 
  rgb(255, 128, 0) 
  rgba(100, 100, 100, 0.8) 
  hsl(20, 62%, 28%) 
  hsla(40, 82%, 33%, 0.6) 
  red

 

三、繪製矩形

上下文對象 
  //一、設置填充樣式或者邊框樣式(ctx.fillStyle = "color";或者ctx.strokeStyle = "color";) 
  //二、繪製矩形區域(若是採用fillRect或者strokeRect繪製矩形，能夠省略第3步); 
  //三、填充或者加上邊框(ctx.fill();或者ctx.stroke();)

 

四、清除矩形區域

做用：就像剛交完工的房子，有不少垃圾，你須要清理，清理除一塊區域，之後將做爲你的臥室。 
  ctx.clearRect(x,y,w,h);

五、圓弧 

  //一、設置填充樣式或者邊框樣式(ctx.fillStyle = "color";或者ctx.strokeStyle = "color";) 
  //二、繪製原型區域 
  ctx.arc(x,y,r,startAngle,endAngle,boolean); 
  r表明半徑，startAngle,endAngle分別表明開始角度和結束角度，最後一個參數表示true(逆時針),false(順時針) 
  //三、填充或者加上邊框(ctx.fill();或者ctx.stroke();) 
  注：一、在繪製圓弧的時候，必須使用ctx.beginPath()開始和ctx.closePath()結束，固然，前提條件時你要畫規則的圖形 
  二、這裏的開始角度和結束角度不是deg，而是Math.PI*(相應的值)。

 

六、路徑

  ctx.beginPath()與ctx.closePath() 
  注：若是不加的話，就會出現「靈異事件」（它將你的上一個結束點做爲接下來的開始點）；變得不是你想要的圖形。

 

七、繪製線段 

  ctx.moveTo(x,y);-----這裏必須以moveTo開頭，實際上是將你的原點移動了位置 
  ctx.lineTo(x,y);---繪製接下來的點。 
  注：通常狀況下、只須要一個moveTo便可。 
  注：線條屬性lineCap： context.lineCap = 'butt'; context.lineCap = 'round';context.lineCap = 'square'( 案例 ) 
  注：線條屬性lineJoin： context.lineJoin = 'miter'; context.lineJoin = 'bevel';context.lineJoin = 'round';( 案例 )

  公式：cxt.lineTo(Math.cos((18 + i * 72 ) / 180 * Math.PI) * R + x, -Math.sin((18 + i * 72 ) / 180 * Math.PI) * R + y); 
     cxt.lineTo(Math.cos((54 + i * 72 ) / 180 * Math.PI) * r + x, -Math.sin((54 + i * 72 ) / 180 * Math.PI) * r + y);

 

八、繪製貝塞爾曲線 

  context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) 
  繪製二次樣條曲線 context.quadraticCurveTo(qcpx,qcpy,qx,qy) 
  cp1x:第一個控制點x座標 cp1y:第一個控制點y座標 cp2x:第二個控制點x座標 cp2y:第二個控制點y座標 
  x:終點x座標 y:終點y座標 qcpx:二次樣條曲線控制點x座標 qcpy:二次樣條曲線控制點y座標 
  qx:二次樣條曲線終點x座標 qy:二次樣條曲線終點y座標 
  
  注：context.quadraticCurveTo(qcpx,qcpy,qx,qy)還能夠換成 
   context.bezierCurveTo(x,y,cp2x,cp2y,x,y),第一組的x和y表示的是第一條曲線的終點

 

九、線性漸變

  var lg= context.createLinearGradient(xStart,yStart,xEnd,yEnd) 
  lg.addColorStop(offset,color); 
  eg:(lg.addColorStop(0,"red");lg.addColorStop(0.5,"green");lg.addColorStop(1,"blue"))
  ctx.fillStyle = lg;

 

十、徑向漸變（發散）

  var rg=context.createRadialGradient(xStart,yStart,radiusStart,xEnd,yEnd,radiusEnd) 
  徑向漸變（發散）顏色rg.addColorStop(offset,color) 
  xStart:發散開始圓心x座標 
  yStart:發散開始圓心y座標 radiusStart:發散開始圓的半徑 xEnd:發散結束圓心的x座標 yEnd:發散結束圓心的y座標 
  radiusEnd:發散結束圓的半徑 offset:設定的顏色離漸變結束點的偏移量(0~1) 
  color:繪製時要使用的顏色 
  用法同上：九、線性漸變 
  案例：同心圓、三角案例、扇形案例

 

十一、圖形變形（平移、旋轉、縮放）

  ctx.translate(x,y); 
  ctx.rotate(Math.PI*(angleValue)); 
  ctx.scale(x,y); 
  注：平移2個值，縮放2個值，旋轉角度是弧度

 

十二、transform() 方法

  context.transform(a,b,c,d,e,f); 
  context.setTransform(1, 0, 0, 1, 100, 100); 
  /////////////////////////// 
   // a c e 
   // b d f 
   // 0 0 1 
   ////////////////////////// 
   // a,d 水平、垂直縮放 
   // b,c 水平、垂直傾斜 
   // c,f 水平、垂直位移 
   //////////////////////////

 

 

1三、給圖形繪製陰影

  ctx.shadowOffsetX = "5"; 
  ctx.shadowOffsetY = "5"; 
  ctx.shadowBlur = "5"; 
  ctx.shadowColor = "red"; 
  繪製須要的圖形

 

1四、繪製文字

  ctx.font="italic 30px 微軟雅黑";//順序不能改 
  *ctx.fillStyle = "color";或者ctx.strokeStyle = "color"; 
  ctx.textBaseline = "";設置垂直對齊方式 
  ctx.textAlign = "";設置水平對齊方式 
  ctx.fillText("文本",x,y)（實心字）或者ctx.strokeText("文本",x,y)（字的輪廓）; 
  注：上面帶*的那個設置，其實設置的時字體的顏色

 

1五、保存和恢復狀態（context）

  ctx.save();//保存當前繪製的圖形， 
  ctx.restore();//恢復到離他最近的那個save的狀態

 

1六、圖像組合( 案例 )

  在繪製完成第一個圖形以後，加 
   context.globalCompositeOperation=type 
   再接着繪製第二個圖形 
   type： 
   source-over（默認值）:在原有圖形上繪製新圖形 
   destination-over:在原有圖形下繪製新圖形 
   source-in:顯示原有圖形和新圖形的交集，新圖形在上，因此顏色爲新圖形的顏色 
   destination-in:顯示原有圖形和新圖形的交集，原有圖形在上，因此顏色爲原有圖形的顏色 
   source-out:只顯示新圖形非交集部分 
   destination-out:只顯示原有圖形非交集部分,是將交集的部分轉化爲透明 
   source-atop:顯示原有圖形和交集部分，新圖形在上，因此交集部分的顏色爲新圖形的顏色 
   destination-atop:顯示新圖形和交集部分，新圖形在下，因此交集部分的顏色爲原有圖形的顏色 
   lighter:原有圖形和新圖形都顯示，交集部分作顏色疊加 
   xor:重疊飛部分不現實 
   copy:只顯示新圖形

 

1七、結合setInterval製做動畫

  window.setInterval(function(){ 
  //執行的方法體 
  },10)；

 

1八、繪圖 context.drawImage

  context.drawImage(image,x,y)   image:Image對象var img=new Image(); img.src="url(...)";   x:繪製圖像的x座標 y:繪製圖像的y座標   context.drawImage(image,x,y,w,h)   image:Image對象var img=new Image(); img.src="url(...)";   x:繪製圖像的x座標 y:繪製圖像的y座標 w:繪製圖像的寬度 h:繪製圖像的高度   context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh):選取圖像的一部分矩形區域進行繪製   image:Image對象var img=new Image(); img.src="url(...)";   sx：圖像上的x座標 sy：圖像上的y座標 sw：矩形區域的寬度 sh：矩形區域的高度   dx：畫在canvas的x座標 dy：畫在canvas的y座標 dw：畫出來的寬度 dh：畫出來的高度