一. Canvas是啥
- < canvas > 是一個可以使用指令碼(通常是js)來繪圖的HTML元素
- < canvas > 最早由Apple引入WebKit,用於Mac OS X 的 Dashboard和 Safari
- 如今,所有主流的瀏覽器都支援它(IE9+,更低版本需引入Explorer Canvas來支援)
1. 開始畫圖(渲染上下文)
< canvas > 元素創造了一個固定大小的畫布,其上的渲染上下文CanvasRenderContext2D
,可以用來繪製和處理要展示的內容。
若要在canvas上繪圖,首先得獲取CanvasRenderContext2D
2d渲染上下文。(此處指2d的,不談webgl)
const canvas = document.getElementById(`mycanvas`);
const ctx = canvas.getContext(`2d`);
ctx.fillStyle = `pink`;
ctx.fillRect(10, 10, 300, 300);
示例
2. CanvasRenderContext2D的屬性:
通過設定上下文的屬性,可以指定繪圖的樣式。
所有屬性如下:
屬性 | 簡介 |
---|---|
canvas | canvas元素 |
fillStyle | 用來填充路徑的當前的顏色、模式或漸變 |
font | 字型樣式 |
globalAlpha | 指定在畫布上繪製的內容的不透明度 |
globalCompositeOperation | 指定顏色如何與畫布上已有的顏色組合(合成) |
lineCap | 指定線條的末端如何繪製 |
lineDashOffset | 設定虛線偏移量 |
lineJoin | 指定兩條線條如何連線 |
lineWidth | 指定畫筆(繪製線條)操作的線條寬度 |
miterLimit | 當 lineJoin 屬性為 “miter” 的時候,這個屬性指定了斜連線長度和線條寬度的最大比率 |
shadowBlur | 模糊效果程度 |
shadowColor | 陰影顏色 |
shadowOffsetX | 陰影水平偏移距離 |
shadowOffsetY | 陰影垂直偏移距離 |
strokeStyle | 用於畫筆(繪製)路徑的顏色、模式和漸變 |
textAlign | 文字的對齊方式 |
textBaseline | 文字垂直方向的對齊方式 |
3. Canvas寬高
- Canvas的寬高需要用屬性值width,height來指定
- 若未指定,則Canvas 的預設大小為300×150
- 通過樣式指定的寬高,只是canvas元素的顯示大小,並不是繪圖環境的大小
canvas {width: 1000px;height: 600px;}
<canvas id="mycanvas" width="1000" height="600"></canvas>
<canvas id="mycanvas1" width="500" height="300"></canvas>
<canvas id="mycanvas2"></canvas>
...
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 100, 100);
寬高示例
為什麼樣式設定了同樣大小,顯示卻截然不同的情況呢?
- canvas本身有兩套大小:一個是元素本身大小,一個是繪圖表面(drawing surface)的大小
- 如果通過width,height屬性來設定,是同時修改了元素本身和繪圖表面大小,
- 如果canvas元素的大小不符合繪圖表面大小時,則會對繪圖表面進行縮放,使之符合元素本身大小,
- 無特殊需求,建議直接使用canvas的width和height就好