資訊專欄INFORMATION COLUMN
摘要：若要在上繪圖，首先得獲取渲染上下文。此處指的，不談示例的屬性通過設(shè)置上下文的屬性，可以指定繪圖的樣式。
一. Canvas是啥
< canvas > 是一個可以使用腳本（通常是js）來繪圖的HTML元素
< canvas > 最早由Apple引入WebKit，用于Mac OS X 的 Dashboard和 Safari
如今，所有主流的瀏覽器都支持它（IE9+,更低版本需引入Explorer Canvas來支持）
< canvas > 元素創(chuàng)造了一個固定大小的畫布，其上的渲染上下文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" 的時候，這個屬性指定了斜連接長度和線條寬度的最大比率 |
| shadowBlur | 模糊效果程度 |
| shadowColor | 陰影顏色 |
| shadowOffsetX | 陰影水平偏移距離 |
| shadowOffsetY | 陰影垂直偏移距離 |
| strokeStyle | 用于畫筆（繪制）路徑的顏色、模式和漸變 |
| textAlign | 文本的對齊方式 |
| textBaseline | 文字垂直方向的對齊方式 |
Canvas的寬高需要用屬性值width，height來指定
若未指定，則Canvas 的默認(rèn)大小為300×150
通過樣式指定的寬高，只是canvas元素的顯示大小，并不是繪圖環(huán)境的大小
canvas {width: 1000px;height: 600px;}
...
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 100, 100);
寬高示例
為什么樣式設(shè)置了同樣大小，顯示卻截然不同的情況呢？
canvas本身有兩套大?。阂粋€是元素本身大小，一個是繪圖表面（drawing surface）的大小
如果通過width,height屬性來設(shè)置，是同時修改了元素本身和繪圖表面大小，
如果canvas元素的大小不符合繪圖表面大小時，則會對繪圖表面進(jìn)行縮放，使之符合元素本身大小，
無特殊需求，建議直接使用canvas的width和height就好
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/108909.html
摘要：學(xué)習(xí)資源來自慕課網(wǎng)炫麗的倒計時效果繪圖與動畫基礎(chǔ)，非常感謝老師的課程分享創(chuàng)建標(biāo)簽的標(biāo)簽定義了一塊畫布，我們所有的繪圖都是基于這一塊畫布。正是因為是基于狀態(tài)的，所以不同的狀態(tài)應(yīng)該有明確的起始標(biāo)志。 喜歡前端，學(xué)習(xí)前端的最原始的動機(jī)，就是因為它可以制作非?？犰诺男Ч?。然而現(xiàn)在上班所用的技巧，多是在業(yè)務(wù)邏輯那一塊，并非是我最初想要去做的東西。所以在下班以后，打算重新拾起自己的興趣，去學(xué)習(xí)真正...
摘要：設(shè)置繪制字符串的垂直對齊方式，該屬性支持等屬性值。調(diào)用的方法關(guān)閉子路徑。與前一個方法相比，只是定義弧的方式不同。把的當(dāng)前路徑從當(dāng)前結(jié)束點(diǎn)連接到對應(yīng)的點(diǎn)。向添加一段二次曲線。 1.使用canvas元素 在HTML頁面上定義元素與定義其他普通元素并無任何不同，它除了可以指定id、style、class、hidden等通用屬性之外，還可以指定如下兩個屬性： height：該屬性設(shè)置該畫布組...
摘要：使用將能夠利用硬件加速從而提高渲染性能。這個渲染器比渲染器有更好的性能。聲明構(gòu)造器是一個可選對象，包含用來定義渲染器行為的屬性。所用的渲染上下文對象。設(shè)置背景色和背景色透明度渲染器渲染器不使用來繪制場景，而使用相對較慢的。 渲染器api WebGL渲染器（WebGLRenderer） WebGL渲染器使用WebGL來繪制您的場景，如果您的設(shè)備支持的話。使用WebGL將能夠利用GPU硬...
閱讀 1211·2021-10-09 09:43
閱讀 19168·2021-09-22 15:52
閱讀 1161·2019-08-30 15:44
閱讀 3121·2019-08-30 15:44
閱讀 3307·2019-08-26 14:07
閱讀 965·2019-08-26 13:55
閱讀 2631·2019-08-26 13:41
閱讀 3163·2019-08-26 13:29
