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