HTML5新特性之Canvas

1、概念

canvas標籤

相當於是一塊畫布（var canvas = document.getElementById("myCanvas");）

getContext(“2d”)

canvas標籤是畫布，那麼在這塊畫布上面繪製各式各樣圖片文字等等的工具是什麼？就是canvas標籤的一個方法getContext(“2d”), 它返回一個對象，這個對象也叫畫布的“上下文”，這個對象提供了各種屬性和方法，用來在畫布上繪製文本、線條、矩形、圖形等等。

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContenxt("2d");

2、來實現一個效果

canvas效果三板斧：落筆ctx.moveTo(x, y) --> 連線ctx.lineTo(x, y) --> 描邊ctx.stroke()

來繪製一個三角形：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContenxt("2d");
ctx.moveTo(50, 50); //起始座標50，50
ctx.lineTo(50, 200);
ctx.lineTo(200, 200);
ctx.lineTo(50, 50);
ctx.lineWidth = 2;
ctx.stroke();  //描邊

效果圖：

3、getContext(“2d”)對象的屬性和方法列表

3.1 顏色、樣式和陰影的屬性和方法

• fillStyle：設置或返回用於填充繪畫的顏色、漸變或模式
• strokeStyle：設置或返回用於筆觸的顏色、漸變或模式
• shadowColor：設置或返回用於陰影的顏色
• shadowBlur：設置或返回用於陰影的模糊級別
• shadowOffsetX：設置或返回陰影與形狀的水平距離
• shadowOffsetY：設置或返回陰影與形狀的垂直距離

---

• createLinearCradient()：創建線性漸變（用在畫布內容上）
• createPattern()：在指定的方向上重複指定的元素
• createRadialGradient()：創建放射/環形的漸變（用在畫布內容上）
• addColorStop()：規定漸變對象中的顏色和停止位置(通常配合createLinearCradient()和createRadialGradient()使用)

3.2 線條樣式

• lineCap：設置或返回線條的結束端點樣式。值類型有butt(默認，向線條的每個末端添加平直的邊緣)；round(向線條的每個末端添加圓形線帽)；square(向線條的每個末端添加正方形線帽)
• lineJoin：設置或返回兩條線相交時，所創建的拐角類型。值類型有bevel(斜角)；round(圓角)；miter(默認，尖角)
• lineWidth：設置或返回當前的線條寬度
• miterLimit：設置或返回最大斜接長度, 和lineJoin的miter配合使用

3.3 矩形相關方法

• rect()：創建矩形，配合stroke()和fill()使用。rect()+stroke()等效於strokeRect()；rect()+fill()等效於fillRect()
• fillRect()：繪製”被填充“的矩形
• strokeRect()：繪製矩形（無填充）
• clearRect()：在給定的矩形內清除指定的像素

3.4 路徑相關方法

• fill()：填充當前繪圖（路徑）
• stroke()：繪製已定義的路徑
• beginPath()：起始一個路徑，或重置當前路徑
• moveTo()：把路徑移動到畫布中指定點，不創建線條
• closePath()：創建從當前點回到起點的路徑
• lineTo()：添加一個新點，然後再畫布中創建從該點到最後指定點的線條
• clip()：從原始畫布剪切任意形狀和尺寸的區域
• quadraticCurveTo()：創建二次貝塞爾曲線
• bezierCurveTo()：創建三次貝塞爾
• arc()：創建弧/曲線(用於創建圓形或部分圓)
• arcTo()：創建兩切線之間的弧/曲線
• isPointInPath()：如果指定的點位於當前路徑中，則返回true, 否則返回false

3.5 轉換相關方法

• scale()：縮放當前繪圖至更大或更小
• rotate()：旋轉當前繪圖
• translate()：重新映射畫布上的(0,0)位置
• transform()：替換繪圖的當前轉換矩陣
• setTransform()：將當前轉換重置爲單位矩陣。然後運行transform()

3.6 文本屬性和方法

• font：設置或返回文本內容的當前字體屬性
• textAlign: 設置或返回文本內容的當前對齊方式
• textBaseline：設置或返回再繪製文本時使用的當前文本基線

---

• fillText()：在畫布上繪製”被填充的“文本
• strokeText()：在畫布中繪製文本（無填充）
• measureText()：返回包含指定文本寬度的對象

3.7 圖像繪製

• drawImage()：向畫布上繪製圖像、畫布或視頻

3.8 像素操作屬性和方法

• width： 返回ImageData對象的寬度
• height：返回ImageData對象的高度
• data：返回一個對象，其包含指定的ImageData對象的圖像數據

---

• createImageData()：創建新的、空白的ImageData對象
• getImageData()：返回ImageData對象，該對象爲畫布上指定的矩形複製像素數據
• putImageData()：把圖像數據（從指定的ImageData對象）放回畫布上

3.9 合成

• globalAlpha：設置或返回繪圖的當前alpha或透明值
• globalCompositeOperation：設置或返回新圖像如何繪製到已有的圖像上

4、一些測試示例

先看效果圖

這裏貼下”隨機折線圖“的代碼，其他的見github上demo
https://github.com/xiaotanit/Tan_HtmlDemo/blob/master/JS/h5%E6%96%B0%E7%89%B9%E6%80%A7.html

//隨機折線圖
function canvasRandomLine(){
    clearAllLayer()

    var maxW = canvasEle.width, maxH = canvasEle.height, boxW = 20;
    var rowsCount = maxH/boxW, colsCount = maxW/boxW;
    var maxX = maxW%boxW==0? boxW*(colsCount-1):boxW*colsCount;
    var maxY = maxH%boxW==0 ? boxW*(rowsCount-1):boxW*rowsCount;

    canvasGrid(); //繪製底層格子圖
    //繪製格子圖
    canvasArrows(); //繪製箭頭
    canvasOther(); //繪製其他隨機線
    function canvasGrid(){
        ctx.beginPath();
        ctx.strokeStyle = '#999999';
        ctx.lineWidth = 0.5;

        console.log(rowsCount, ", ", colsCount)
        //行格子
        for (let i = 0; i < rowsCount; i++){
            ctx.moveTo(0, boxW*i)
            ctx.lineTo(maxW, boxW*i)
        }
        //列格子
        for (let i = 0; i < colsCount; i++){
            ctx.moveTo(boxW * i, 0);
            ctx.lineTo(boxW*i, maxH)
        }
        ctx.stroke()
    }
    //繪製箭頭
    function canvasArrows(){
        ctx.beginPath();

        ctx.moveTo(boxW, boxW);
        ctx.lineTo(boxW, maxY);
        ctx.lineTo(maxX, maxY);
        ctx.strokeStyle = '#0000ff';
        ctx.stroke();

        //繪製兩個箭頭
        ctx.beginPath();
        ctx.moveTo(boxW, boxW);
        ctx.lineTo(boxW-5, boxW+10);
        ctx.lineTo(boxW+5, boxW+10);
        ctx.closePath();

        ctx.moveTo(maxX, maxY);
        ctx.lineTo(maxX-10, maxY-5);
        ctx.lineTo(maxX-10, maxY+5);
        ctx.closePath();

        ctx.fillStyle = '#0000ff';
        ctx.fill();
    }
    //繪製隨機線
    function canvasOther(){
        ctx.beginPath();
        var count = (Math.random() * 1000) % 10 + 3; //隨機數
        var pointsArr = [];
        //座標控制在boxW--maxX, boxW--maxY
        for (let i = 0; i < count; i++){
            var tempX = (Math.random() * 9999) % (maxX-boxW) + boxW;
            var tempY = (Math.random()*9999) % (maxY-boxW) + boxW;
            pointsArr.push({ x: tempX, y: tempY });
            if (i==0){
                ctx.moveTo(tempX, tempY)
            }
            else{
                ctx.lineTo(tempX, tempY);
            }
        }
        ctx.strokeStyle = 'red';
        ctx.stroke();

        //繪製矩形紅點
        ctx.beginPath();
        ctx.fillStyle = 'red'
        for (let i = 0; i < count; i++){
            var tempObj = pointsArr[i];
            ctx.fillRect(tempObj.x-5, tempObj.y-5, 10, 10);
        }
    }
}