h5 canvas基本知識

Canvas

canvas 最先由Apple引入WebKit,用於Mac OS X 的 Dashboard,後來又在Safari和Google Chrome被實現。 基於 Gecko 1.8的瀏覽器,好比 Firefox 1.5, 一樣支持這個元素。 canvas 元素是WhatWG Web applications 1.0規範的一部分,也包含於HTML 5中。

體驗Canvas

什麼是Canvas？

HTML5 的 canvas 元素使用 JavaScript 在網頁上繪製圖像。 畫布是一個矩形區域，您能夠控制其每一像素。 canvas 擁有多種繪製路徑、矩形、圓形、字符以及添加圖像的方法。

建立Canvas元素

向 HTML5 頁面添加 canvas 元素。 規定元素的 id、寬度和高度：

    <canvas id="myCanvas" width="200" height="100"></canvas>

經過JavaScript來繪製

    /*獲取元素*/
    var myCanvas = document.querySelector('#myCanvas');
    /*獲取繪圖工具*/
    var context = myCanvas.getContext('2d');
    /*設置繪圖的起始位置*/
    context.moveTo(100,100);
    /*繪製路徑*/
    context.lineTo(200,200);
    /*描邊*/
    context.stroke();

Canvas的基本使用

圖形繪製

須要理解些概念：

• 路徑的概念

• 路徑的繪製

  • 描邊 stroke()

  • 填充 fill()

• 閉合路徑

  • 手動閉合

  • 程序閉合 closePath()

• 填充規則(非零環繞) :（1）看這個區域是否填充（2）拉一條直線

  （3）看和這條直線相交的軌跡。

  （4）順時針+1 逆時針-1，默認值爲0

  （5）結果非0則填充，不爲0則不填充。

• 開啓新的路徑 beginPath()

設置樣式

• 畫筆的狀態

  • lineWidth 線寬，默認1px

  • lineCap 線末端類型：(butt默認)、round、square

  • lineJoin 相交線的拐點 miter(默認)、round、bevel

  • strokeStyle 線的顏色

  • fillStyle 填充顏色

  • setLineDash() 設置虛線

  • getLineDash() 獲取虛線寬度集合: 參數爲一個數組 :描述實 虛 線的寬度.

  • lineDashOffset 設置虛線偏移量（負值向右偏移）

參考文檔

• w3school

• Canvas_API

Canvas圖形繪製

矩形繪製

• rect(x,y,w,h) 沒有獨立路徑

• strokeRect(x,y,w,h) 有獨立路徑，不影響別的繪製

• fillRect(x,y,w,h) 有獨立路徑，不影響別的繪製

• clearRect(x,y,w,h) 擦除矩形區域

• css設置一個漸變的背景：

  background-image: linear-gradient(to right, red, yellow, skyblue, blue, green);

圓弧繪製

• 弧度概念

• arc()

  • x 圓心橫座標

  • y 圓心縱座標

  • r 半徑

  • startAngle 開始角度

  • endAngle 結束角度

  • anticlockwise 是否逆時針方向繪製（默認false表示順時針；true表示逆時針）

繪製文本

• ctx.font = '微軟雅黑' 設置字體

• strokeText()

• fillText(text,x,y,maxWidth)

  • text 要繪製的文本

  • x,y 文本繪製的座標（文本左下角）

  • maxWidth 設置文本最大寬度，可選參數

• ctx.textAlign文本水平對齊方式，相對繪製座標來講的

  • left

  • center

  • right

  • start 默認

  • end

• ctx.direction屬性css(rtl ltr) start和end於此相關

  • 若是是ltr,start和left表現一致

  • 若是是rtl,start和right表現一致

• ctx.textBaseline 設置基線（垂直對齊方式 ）

  • top 文本的基線處於文本的正上方，而且有一段距離

  • middle 文本的基線處於文本的正中間

  • bottom 文本的基線處於文本的證下方，而且有一段距離

  • hanging 文本的基線處於文本的正上方，而且和文本粘合

  • alphabetic 默認值，基線處於文本的下方，而且穿過文字

  • ideographic 和bottom類似，可是不同

• measureText() 獲取文本寬度obj.width

作動畫

繪製圖片

• drawImage()

  • 三個參數drawImage(img,x,y)

    • img 圖片對象、canvas對象、video對象

    • x,y 圖片繪製的左上角

  • 五個參數drawImage(img,x,y,w,h)

    • img 圖片對象、canvas對象、video對象

    • x,y 圖片繪製的左上角

    • w,h 圖片繪製尺寸設置(圖片縮放，不是截取)

  • 九個參數drawImage(img,x,y,w,h,x1,y1,w1,h1)

    • img 圖片對象、canvas對象、video對象

    • x,y,w,h 圖片中的一個矩形區域

    • x1,y1,w1,h1 畫布中的一個矩形區域

序列幀動畫

• 繪製精靈圖

• 動起來

• 控制邊界

• 鍵盤控制

座標變換

• 平移 移動畫布的原點

  • translate(x,y) 參數表示移動目標點的座標

• 縮放

  • scale(x,y) 參數表示寬高的縮放比例

• 旋轉

  • rotate(angle) 參數表示旋轉角度

​