欧美日韩激情视频一区二区三区,在线看一区二区

一. 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	文本的對齊方式
textBaseline	文字垂直方向的對齊方式

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è)置了同樣大小，顯示卻截然不同的情況呢？

canvas本身有兩套大?。阂粋€(gè)是元素本身大小，一個(gè)是繪圖表面（drawing surface）的大小
如果通過width,height屬性來設(shè)置，是同時(shí)修改了元素本身和繪圖表面大小，
如果canvas元素的大小不符合繪圖表面大小時(shí)，則會(huì)對繪圖表面進(jìn)行縮放，使之符合元素本身大小，
無特殊需求，建議直接使用canvas的width和height就好

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

標(biāo)簽：阿克蘇松原廣東果洛鄂爾多斯常德蚌埠廣西

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《canvas學(xué)習(xí)筆記之2d畫布基礎(chǔ)的實(shí)現(xiàn)》，本文關(guān)鍵詞 canvas,學(xué)習(xí),筆記,之,畫布,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。