成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

canvas學(xué)習(xí)筆記-2d畫布基礎(chǔ)

habren / 3102人閱讀

摘要:若要在上繪圖,首先得獲取渲染上下文。此處指的,不談示例的屬性通過(guò)設(shè)置上下文的屬性,可以指定繪圖的樣式。

一. Canvas是啥

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

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

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


1. 開(kā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ì)齊方式
3. Canvas寬高

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

相關(guān)文章

  • Canvas學(xué)習(xí)筆記(一)

    摘要:學(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í)真正...

    codecraft 評(píng)論0 收藏0
  • Canvas學(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è)置該畫布組...

    ad6623 評(píng)論0 收藏0
  • 【three.js學(xué)習(xí)筆記】渲染器

    摘要:使用將能夠利用硬件加速?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硬...

    劉玉平 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<