canvas學(xué)習(xí)筆記之2d畫(huà)布基礎(chǔ)的實(shí)現(xiàn)

發(fā)布時(shí)間：2019-02-21 16:44:13 作者：佚名

這篇文章主要介紹了canvas學(xué)習(xí)筆記之2d畫(huà)布基礎(chǔ)的實(shí)現(xiàn)的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

一. Canvas是啥

< canvas > 是一個(gè)可以使用腳本（通常是js）來(lái)繪圖的HTML元素

< canvas > 最早由Apple引入WebKit，用于Mac OS X 的 Dashboard和 Safari

如今，所有主流的瀏覽器都支持它（IE9+,更低版本需引入Explorer Canvas來(lái)支持）

1. 開(kāi)始畫(huà)圖（渲染上下文）

< canvas > 元素創(chuàng)造了一個(gè)固定大小的畫(huà)布，其上的渲染上下文CanvasRenderContext2D，可以用來(lái)繪制和處理要展示的內(nèi)容。

若要在canvas上繪圖，首先得獲取CanvasRenderContext2D2d渲染上下文。（此處指2d的，不談webgl）

const canvas = document.getElementById('mycanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'pink';
ctx.fillRect(10, 10, 300, 300);

示例

2. CanvasRenderContext2D的屬性：

通過(guò)設(shè)置上下文的屬性，可以指定繪圖的樣式。

所有屬性如下：

屬性	簡(jiǎn)介
canvas	canvas元素
fillStyle	用來(lái)填充路徑的當(dāng)前的顏色、模式或漸變
font	字體樣式
globalAlpha	指定在畫(huà)布上繪制的內(nèi)容的不透明度
globalCompositeOperation	指定顏色如何與畫(huà)布上已有的顏色組合（合成）
lineCap	指定線條的末端如何繪制
lineDashOffset	設(shè)置虛線偏移量
lineJoin	指定兩條線條如何連接
lineWidth	指定畫(huà)筆（繪制線條）操作的線條寬度
miterLimit	當(dāng) lineJoin 屬性為 "miter" 的時(shí)候，這個(gè)屬性指定了斜連接長(zhǎng)度和線條寬度的最大比率
shadowBlur	模糊效果程度
shadowColor	陰影顏色
shadowOffsetX	陰影水平偏移距離
shadowOffsetY	陰影垂直偏移距離
strokeStyle	用于畫(huà)筆（繪制）路徑的顏色、模式和漸變
textAlign	文本的對(duì)齊方式
textBaseline	文字垂直方向的對(duì)齊方式

3. Canvas寬高

Canvas的寬高需要用屬性值width，height來(lái)指定

若未指定，則Canvas 的默認(rèn)大小為300×150

通過(guò)樣式指定的寬高，只是canvas元素的顯示大小，并不是繪圖環(huán)境的大小

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);

寬高示例

為什么樣式設(shè)置了同樣大小，顯示卻截然不同的情況呢？