摘要:若要在上繪圖,首先得獲取渲染上下文。此處指的,不談示例的屬性通過設(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 | 用來填充路徑的當前的顏色、模式或漸變 |
font | 字體樣式 |
globalAlpha | 指定在畫布上繪制的內(nèi)容的不透明度 |
globalCompositeOperation | 指定顏色如何與畫布上已有的顏色組合(合成) |
lineCap | 指定線條的末端如何繪制 |
lineDashOffset | 設(shè)置虛線偏移量 |
lineJoin | 指定兩條線條如何連接 |
lineWidth | 指定畫筆(繪制線條)操作的線條寬度 |
miterLimit | 當 lineJoin 屬性為 "miter" 的時候,這個屬性指定了斜連接長度和線條寬度的最大比率 |
shadowBlur | 模糊效果程度 |
shadowColor | 陰影顏色 |
shadowOffsetX | 陰影水平偏移距離 |
shadowOffsetY | 陰影垂直偏移距離 |
strokeStyle | 用于畫筆(繪制)路徑的顏色、模式和漸變 |
textAlign | 文本的對齊方式 |
textBaseline | 文字垂直方向的對齊方式 |
Canvas的寬高需要用屬性值width,height來指定
若未指定,則Canvas 的默認大小為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元素的大小不符合繪圖表面大小時,則會對繪圖表面進行縮放,使之符合元素本身大小,
無特殊需求,建議直接使用canvas的width和height就好
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/108909.html
摘要:學習資源來自慕課網(wǎng)炫麗的倒計時效果繪圖與動畫基礎(chǔ),非常感謝老師的課程分享創(chuàng)建標簽的標簽定義了一塊畫布,我們所有的繪圖都是基于這一塊畫布。正是因為是基于狀態(tài)的,所以不同的狀態(tài)應(yīng)該有明確的起始標志。 喜歡前端,學習前端的最原始的動機,就是因為它可以制作非常酷炫的效果。然而現(xiàn)在上班所用的技巧,多是在業(yè)務(wù)邏輯那一塊,并非是我最初想要去做的東西。所以在下班以后,打算重新拾起自己的興趣,去學習真正...
摘要:設(shè)置繪制字符串的垂直對齊方式,該屬性支持等屬性值。調(diào)用的方法關(guān)閉子路徑。與前一個方法相比,只是定義弧的方式不同。把的當前路徑從當前結(jié)束點連接到對應(yīng)的點。向添加一段二次曲線。 1.使用canvas元素 在HTML頁面上定義元素與定義其他普通元素并無任何不同,它除了可以指定id、style、class、hidden等通用屬性之外,還可以指定如下兩個屬性: height:該屬性設(shè)置該畫布組...
摘要:使用將能夠利用硬件加速從而提高渲染性能。這個渲染器比渲染器有更好的性能。聲明構(gòu)造器是一個可選對象,包含用來定義渲染器行為的屬性。所用的渲染上下文對象。設(shè)置背景色和背景色透明度渲染器渲染器不使用來繪制場景,而使用相對較慢的。 渲染器api WebGL渲染器(WebGLRenderer) WebGL渲染器使用WebGL來繪制您的場景,如果您的設(shè)備支持的話。使用WebGL將能夠利用GPU硬...
閱讀 1118·2021-10-09 09:43
閱讀 18473·2021-09-22 15:52
閱讀 1059·2019-08-30 15:44
閱讀 3050·2019-08-30 15:44
閱讀 3243·2019-08-26 14:07
閱讀 904·2019-08-26 13:55
閱讀 2566·2019-08-26 13:41
閱讀 3087·2019-08-26 13:29