HTML5之4__Canvas API: 繪製曲線、變換
阿新 • • 發佈：2019-01-25
HTML5 開發 起點之一就是 Canvas, 通過它可以動態生成和展示圖形、圖表、影象以及動畫.
在Canvas 出現之前，開發人員若要在瀏覽器中使用繪圖API, 只能使用 Adobe 的Flash和 SVG(可伸縮向量圖形) 外掛， 或者只有IE才支援的VML(向量標記語言)， 以及一些JS技巧。
Canvas 和 SVG 對比
Canvas 本質上是一個位圖畫布, 其上繪製的圖形是不可縮放的， 不能像 SVG 影象那樣可以縮放, 此外用Canvas 繪製出來的物件不屬於頁面
DOM 結構或者任何名稱空間, 這被認為是一個缺陷， SVG 影象卻可以在不同的解析度下流暢地縮放， 並且支援單擊檢測. 儘管Canvas 有明顯的不足，但 Canvas API 有兩個優勢：
1. 不需要將所繪製圖像中的每個圖元當做物件儲存， 執行效能非常好。
2. 在其他程式語言現有的優秀二維繪圖API 的基礎上實現 Canvas API 相對來說比較簡單.
一. 先介紹 canvas 繪製曲線
看程式碼
<!DOCTYPE> <html> <head> <meta charset="utf-8" /> <title>繪製曲線</title> <script language="javascript"> function drawTrails() { var canvas = document.getElementById('trails'); var context = canvas.getContext('2d'); context.save(); context.translate(-10, 350); context.beginPath(); //第一條曲線向右上方彎曲 context.moveTo(0,0); context.quadraticCurveTo(170, -50, 260, -190); // 第二條曲線向右下方彎曲 context.quadraticCurveTo(310, -250, 410, -250); //使用棕色的粗線條來繪製路徑 context.strokeStyle = '#663300'; context.lineWidth = 20; context.stroke(); //恢復之前的canvas 狀態 context.restore(); } window.addEventListener("load", drawTrails, true); </script> </head> <body> <canvas height="400" width="400" id="trails" style="border: 1px solid;"/> </body> </html>
在Chrome 瀏覽器執行效果
二. 變換
canvas 繪製圖像的一種方式是 使用變換 transformation. 實際上 變換是實現複雜canvas 操作的最好方式.
可以這樣理解 變換: 把它當成是介於開發人員發出的指令和 canvas 顯示結果之間的一個修改正層,
以下一個例子展示瞭如何使用 最簡單變換方法---------translate()
看程式碼
執行效果<!DOCTYPE html> <html> <meta charset="utf-8" /> <title>變換對角線</title> <canvas id="diagonal" style="border: 1px solid;" width="200" height="200"> </canvas> <script> function drawDiagonal() { var canvas = document.getElementById('diagonal'); var context = canvas.getContext('2d'); // 儲存當前繪圖狀態 context.save(); //向右下方移動繪圖上下文 context.translate(70, 140); //以原點為起點，繪製與前面相同的線段 context.beginPath(); context.moveTo(0, 0); context.lineTo(70, -70); context.stroke(); // 恢復原有的繪圖狀態 context.restore(); } window.addEventListener("load", drawDiagonal, true); </script> </html>
