canvas Path2D 物件
canvas 新增物件,並未正式釋出,只有最新版本的瀏覽器才會支援。
Path2D 物件讓開發者可以儲存路徑,簡化 canvas 繪製程式碼,並提升執行速度。
建構函式提供三種方式來建立Path2D 物件:
[JavaScript] 純文字檢視 複製程式碼// 建構函式沒有引數 new Path2D(); // Path2D 物件作為引數 new Path2D(path); // SVG 路徑作為引數 new Path2D(d);
第三個建構函式的過載是使用 SVG 路徑資料來構建。
開發者可以重複使用自己的 SVG 路徑在 canvas 中直接來繪製同樣的形狀:
[JavaScript] 純文字檢視 複製程式碼let p = new Path2D("M10 10 h 80 v 80 h -80 Z");
在構建一個空的路線物件時,可以在 CanvasRenderingContext2D 環境中直接使用自己熟悉的路徑方法。
對於 CanvasRenderingContext2D 基礎知識可以參閱 canvas getContext()一章節。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="https://www.softwhy.com/" /> <title>螞蟻部落</title> <style> canvas { border:2px dotted #ccc; } </style> <script> window.onload = ()=> { let cvs = document.getElementById('canvas'); let ctx = cvs.getContext("2d"); let circle = new Path2D(); circle.arc(60, 60, 50, 0, 2 * Math.PI); ctx.stroke(circle); } </script> </head> <body> <canvas id="canvas"></canvas> </body> </html>
上述程式碼利用 Path2D 物件繪製一個圖形,程式碼執行效果截圖如下:
程式碼分析如下:
(1).通過構造方法構造一個空路徑Path2D物件例項。
(2).此時可以利用CanvasRenderingContext2D 環境提供的路徑方法arc()。
(3).然後為路徑方法提供相關引數,最後描邊將圓形繪製出來。
下面再演示一下建構函式引數是 SVG 路徑的情形。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="https://www.softwhy.com/" /> <title>螞蟻部落</title> <style> canvas { border:2px dotted #ccc; } </style> <script> window.onload = ()=> { let cvs = document.getElementById('canvas'); let ctx = cvs.getContext("2d"); let circle = new Path2D("M10 10 h 80 v 80 h -80 Z"); ctx.stroke(circle); } </script> </head> <body> <canvas id="canvas"></canvas> </body> </html>
Path2D()建構函式引數是一個 SVG 路徑,程式碼執行效果截圖如下:
建構函式引數是一個矩形路徑,然後描邊將其繪製出來。
再來看一段關於此物件的程式碼例項:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="https://www.softwhy.com/" /> <title>螞蟻部落</title> <style> canvas { border:2px dotted #ccc; } </style> <script> window.onload = ()=> { let cvs = document.getElementById("canvas"); let ctx = cvs.getContext("2d"); ctx.translate(180, 170); let rect = new Path2D(); rect.rect(80, 20, 80, 40); setInterval(function () { ctx.clearRect(-180, -170, 500, 350); ctx.rotate(Math.PI / 100); ctx.fill(rect); },20); } </script> </head> <body> <canvas id="canvas" width="500" height="350"></canvas> </body> </html>
上面程式碼將繪製矩形的路徑儲存起來,之前回撥函式中的程式碼大致如下:
[JavaScript] 純文字檢視 複製程式碼ctx.clearRect(-180, -170, 500, 350); ctx.rotate(Math.PI / 100); ctx.fillRect(80, 20, 100, 40);
首先儲存矩形路徑,然後在後面重復使用,簡化了操作,效能也會增加。
如果複雜龐大的程式碼 Path2D 物件優勢體現的會更加明顯。
原有canvas API 也會跟隨者發生變化,距離如下:
[JavaScript] 純文字檢視 複製程式碼ctx.fill(path) ctx.stroke(path)
舊的API 上述兩個方法是沒有引數的,現在增加通過Path2D()建立的路徑物件。
特別說明:當前螞蟻部落 canvas 教程並沒有更新 API,正式釋出後會第一時間更新。
相關文章
- canvas ImageData 物件Canvas物件
- JavaScript HTML DOM Canvas 物件JavaScriptHTMLCanvas物件
- 《HTML5canvas開發詳解(第2版)》——1.9 HTML5Canvas物件HTMLCanvas物件
- 《HTML5canvas開發詳解(第2版)》——1.4 文件物件模型(DOM)和CanvasHTMLCanvas物件模型
- 可擴充套件物件導向的canvas畫圖程式套件物件Canvas
- canvasCanvas
- canvas clearRect()Canvas
- canvas toBlob()Canvas
- canvas toDataURL()Canvas
- canvas stroke()Canvas
- canvas fill()Canvas
- canvas fillRect()Canvas
- canvas translate()Canvas
- canvas rotate()Canvas
- canvas scale()Canvas
- canvas fillText()Canvas
- canvas createPattern()Canvas
- canvas createImageData()Canvas
- canvas restore()CanvasREST
- canvas save()Canvas
- canvas putImageData()Canvas
- canvas drawImage()Canvas
- canvas clip()Canvas
- canvas arcTo()Canvas
- canvas isPointInPath()Canvas
- canvas arc()Canvas
- canvas getImageData()Canvas
- canvas fillStyleCanvas
- canvas closePath()Canvas
- canvas beginPath()Canvas
- canvas strokeRect()Canvas
- canvas strokeStyleCanvas
- canvas rect()Canvas
- canvas setTransform()CanvasORM
- canvas(三)Canvas
- 初探canvasCanvas
- Canvas 教程Canvas
- canvas transform()CanvasORM