Canvas 都坐下，基本操做

前言

從最開始小白使用canvas採坑無數，讓本身也積累了些還不錯的想法，這期內容也是給本身作了些canvas api整理，以及須要注意的地方

參考網站

MDN

文章連接

微信H5實現網頁長按保存圖片及識別二維碼（canvas轉換）

前端學習筆記----canvas實現畫板及定製畫筆(畫筆錯位，撤回，粗細，顏色)

前端學習筆記----多張圖片生成canvas思路

替換內容

在比較老的不支持 canvas 的瀏覽器中（尤爲是IE9以前的IE瀏覽器）， canvas 會被標籤中的內容替換（可用於提示不兼容canvas）

<canvas width="150" height="150">
  該瀏覽器不兼容canvas
</canvas>

<canvas width="150" height="150">
  <img src="images/clock.png" width="150" height="150" alt=""/>
</canvas> 
複製代碼

渲染上下文 getContext('2d')

得到渲染上下文和它的繪畫功能。好比說用來定義畫筆樣式以及進行繪畫的全部操做。getContext()只有一個參數

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// ctx 即爲 id爲canvas的標籤的上下文
複製代碼

畫布柵格（canvas grid）

Canvas 畫布其實就是像一個座標系，使用內置的Api在畫板上進行繪製，一般來講座標上的一個單位至關於canvas的一個像素, 柵格就像一個座標系，不過是從左上角開始的，你能夠更具座標系來進行繪畫等操做

友情提醒：最好不要使用style 以及 class去定義canvas長寬樣式，畫布中的小格會被style等樣式壓縮或拉伸，這樣你畫的東西就會變形了

那怎麼辦呢

<canvas id="canvas" width="200" height="200"></canvas>
// 直接標籤中設置或者使用canvas上下文
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.width = 200
ctx.height = 200
複製代碼

圖形

繪製矩形

canvas是按照路徑生成圖形，canvas只支持一種原生的圖形繪製：矩形，不給過經過路徑繪畫使得繪製各類圖形變成了可能

fillRect(x, y, width, height)  //繪製一個填充的矩形
strokeRect(x, y, width, height) //繪製一個矩形的邊框
clearRect(x, y, width, height) //清除指定矩形區域，讓清除部分徹底透明。

複製代碼

x與y指定了在canvas畫布上所繪製的矩形的左上角（相對於原點）的座標。width和height設置矩形的尺寸。

var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  ctx.fillRect(25, 25, 100, 100);
  ctx.clearRect(45, 45, 60, 60); // 用來挖空上個圖形
  ctx.strokeRect(150, 50, 50, 50);

複製代碼

繪製路徑

路徑的組合使你能畫出任何你想要繪製的圖形，就像你在紙上畫畫同樣

beginPath()
// 新建一條路徑，生成以後，圖形繪製命令被指向到路徑上生成路徑。
// 至關於你拿起鉛筆準備畫畫了
closePath()
// 閉合路徑以後圖形繪製命令又從新指向到上下文中。
// 不是每次都須要closePath 來結束繪畫 這個接口功能就至關於 你畫出兩筆後造成一個直角，但你想畫出一個封閉的直接三角形使用這個接口，便可把終點和睦墊自動連上
stroke()
// 經過線條來繪製圖形輪廓。
fill()
// 經過填充路徑的內容區域生成實心的圖形。
複製代碼

closePath()

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);

ctx.stroke();
複製代碼

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.closePath();
ctx.stroke();
複製代碼

moveTo(x,y)

從哪開始下筆

你的鉛筆尖從哪一個點按到畫板上

固然也能使用moveTo 繪製不連續的點

lineTo(x,y)

繪製一條從當前位置到指定x以及y位置的直線。

開始點和以前的繪製路徑有關，以前路徑的結束點就是接下來的開始點，等等。。。開始點也能夠經過moveTo()函數改變。

圓弧

arc(x, y, radius, startAngle, endAngle, anticlockwise)`

畫一個以（x,y）爲圓心的以radius爲半徑的圓弧（圓），從startAngle開始到endAngle結束，按照anticlockwise給定的方向（默認爲順時針）來生成。

x,y爲繪製圓弧所在圓上的圓心座標。radius爲半徑。startAngle以及endAngle參數用弧度定義了開始以及結束的弧度。這些都是以x軸爲基準。參數anticlockwise`爲一個布爾值。爲true時，是逆時針方向，不然順時針方向。

友情提醒：arc()函數中表示角的單位是弧度。角度與弧度的js表達式: 弧度=(Math.PI/180)/角度

arcTo(x1, y1, x2, y2, radius)

根據給定的控制點和半徑畫一段圓弧，再以直線鏈接兩個控制點。

矩形

rect(x, y, width, height)

繪製一個左上角座標爲（x,y），寬高爲width以及height的矩形。

上色

fillStyle = color

設置圖形的填充顏色。

strokeStyle = color

設置圖形輪廓的顏色。

var ctx = document.getElementById('canvas').getContext('2d');
for (var i=0;i<6;i++){
  for (var j=0;j<6;j++){
    ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' + 
                       Math.floor(255-42.5*j) + ',0)';
    ctx.fillRect(j*25,i*25,25,25);
  }
}
複製代碼

其餘線條Api

lineWidth = value
// 設置線條寬度。
lineCap = type
// 設置線條末端樣式。
lineJoin = type
// 設定線條與線條間接合處的樣式。
miterLimit = value
// 限制當兩條線相交時交接處最大長度；所謂交接處長度（斜接長度）是指線條交接處內角頂點到外角頂點的長度。
getLineDash()
// 返回一個包含當前虛線樣式，長度爲非負偶數的數組。
setLineDash(segments)
// 設置當前虛線樣式。
lineDashOffset = value
// 設置虛線樣式的起始偏移量。
複製代碼

lineWidth = value 線條寬度。

lineCap = type 線條末端樣式。

type == butt，round ，square
複製代碼

友情提醒：如使用鼠標繪製路徑是 使用butt會致使 起始結尾 棱角比較多 可使用 round 達到更好的視覺效果

lineJoin = type 線條與線條間接合處的樣式。

type = round，bevel，miter。默認是miter。
複製代碼

友情提醒：同上 使用默認值會致使繪畫時棱角比較多 ,可使用 round 達到更好的視覺效果

虛線

setLineDash 方法和 lineDashOffset 屬性來制定虛線樣式. setLineDash 方法接受一個數組，來指定線段與間隙的交替；lineDashOffset屬性設置起始偏移量.

var ctx = document.getElementById('canvas').getContext('2d');
var offset = 0;

function draw() {
  ctx.clearRect(0,0, canvas.width, canvas.height);
  ctx.setLineDash([4, 2]);
  ctx.lineDashOffset = -offset;
  ctx.strokeRect(10,10, 100, 100);
}

function march() {
  offset++;
  if (offset > 16) {
    offset = 0;
  }
  draw();
  setTimeout(march, 20);
}

march();
複製代碼

圖像

canvas也能夠吧已經有的圖片 繪製在畫板上進行編輯

var img = new Image();   // 建立一個img
img.src = 'xxx.png'; // 設置圖片地址
複製代碼

友情提醒：如需把圖片經過src繪製至canvas必定必定要使用img.onload 等待img.src加載完畢再執行渲染至canvas，否則可能渲染空白

var img = new Image();   // 建立img對象
img.onload = function(){
  // 執行drawImage語句
}
img.src = 'myImage.png'; // 設置圖片地址
複製代碼

繪製

drawImage(image, x, y)

Image 爲 上面的img對象或者 canvas 對象 x和y 是其在目標 canvas畫布 裏的起始座標。

縮放 Scaling

drawImage(image, x, y, width, height)

這個方法多了2個參數：width 和 height，這兩個參數用來控制 當向canvas畫入時應該縮放的大小

切片

若是隻須要使用一張圖像上的部分 就得使用切片

drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

第一個參數和其它的是相同的，其它8個參數最好是參照右邊的圖解，前4個是定義圖像源的切片位置和大小，後4個則是定義切片的目標顯示位置和大小。

save() remote()

兩個騷操做 怎麼個意思呢

把配置好的 樣式 一次次放入一個棧中，須要事在從棧中 取出 就像一個迴文同樣」12344321「

function draw() {
  var ctx = document.getElementById('canvas').getContext('2d');

  ctx.fillRect(0,0,150,150);   // 使用默認設置繪製一個矩形
  ctx.save();                  // 保存默認狀態

  ctx.fillStyle = '#09F'       // 在原有配置基礎上對顏色作改變
  ctx.fillRect(15,15,120,120); // 使用新的設置繪製一個矩形

  ctx.save();                  // 保存當前狀態
  ctx.fillStyle = '#FFF'       // 再次改變顏色配置
  ctx.globalAlpha = 0.5;    
  ctx.fillRect(30,30,90,90);   // 使用新的配置繪製一個矩形

  ctx.restore();               // 從新加載以前的顏色狀態
  ctx.fillRect(45,45,60,60);   // 使用上一次的配置繪製一個矩形

  ctx.restore();               // 加載默認顏色配置
  ctx.fillRect(60,60,30,30);   // 使用加載的配置繪製一個矩形
}
複製代碼

移動translate

translate(x, y)
複製代碼

translate方法接受兩個參數。x 是左右偏移量，y 是上下偏移量，如右圖所示。

旋轉 Rotating

rotate(angle)
複製代碼

這個方法只接受一個參數：旋轉的角度(angle)，它是順時針方向的，以弧度爲單位的值。

縮放 Scaling

scale(x, y)

友情提醒：默認柵格一個單位爲一個像素 經過scale 進行單位級別的縮放 ,每一個圖像所佔單位不變

scale方法接受兩個參數。x,y 分別是橫軸和縱軸的縮放因子，它們都必須是正值。值比 1.0 小表示縮小，比 1.0 大則表示放大，值爲 1.0 時什麼效果都沒有。