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

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

我要評(píng)論

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

一. Canvas是啥

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

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

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

1. 開始畫圖（渲染上下文）

< canvas > 元素創(chuàng)造了一個(gè)固定大小的畫布，其上的渲染上下文CanvasRenderContext2D，可以用來繪制和處理要展示的內(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的屬性：

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

所有屬性如下：

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

3. Canvas寬高

Canvas的寬高需要用屬性值width，height來指定

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

通過樣式指定的寬高，只是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è)置了同樣大小，顯示卻截然不同的情況呢？