欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

canvas學(xué)習(xí)筆記之2d畫(huà)布基礎(chǔ)的實(shí)現(xiàn)

  發(fā)布時(shí)間:2019-02-21 16:44:13   作者:佚名   我要評(píng)論
這篇文章主要介紹了canvas學(xué)習(xí)筆記之2d畫(huà)布基礎(chǔ)的實(shí)現(xiàn)的相關(guān)資料,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

一. Canvas是啥

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

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

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

1. 開(kāi)始畫(huà)圖(渲染上下文)

< canvas > 元素創(chuàng)造了一個(gè)固定大小的畫(huà)布,其上的渲染上下文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 指定在畫(huà)布上繪制的內(nèi)容的不透明度
globalCompositeOperation 指定顏色如何與畫(huà)布上已有的顏色組合(合成)
lineCap 指定線條的末端如何繪制
lineDashOffset 設(shè)置虛線偏移量
lineJoin 指定兩條線條如何連接
lineWidth 指定畫(huà)筆(繪制線條)操作的線條寬度
miterLimit 當(dāng) lineJoin 屬性為 "miter" 的時(shí)候,這個(gè)屬性指定了斜連接長(zhǎng)度和線條寬度的最大比率
shadowBlur 模糊效果程度
shadowColor 陰影顏色
shadowOffsetX 陰影水平偏移距離
shadowOffsetY 陰影垂直偏移距離
strokeStyle 用于畫(huà)筆(繪制)路徑的顏色、模式和漸變
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;}
<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)的大小
  • 如果通過(guò)width,height屬性來(lái)設(shè)置,是同時(shí)修改了元素本身和繪圖表面大小,
  • 如果canvas元素的大小不符合繪圖表面大小時(shí),則會(huì)對(duì)繪圖表面進(jìn)行縮放,使之符合元素本身大小,
  • 無(wú)特殊需求,建議直接使用canvas的width和height就好

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

相關(guān)文章

  • HTML5中的Microdata與歷史記錄管理詳解

    Microdata作為HTML5新增的一個(gè)特性,它允許開(kāi)發(fā)者在HTML文檔中添加更多的語(yǔ)義信息,以便于搜索引擎和瀏覽器更好地理解頁(yè)面內(nèi)容,本文將探討HTML5中Microdata的使用方法以及
    2025-04-21
  • HTML5表格語(yǔ)法格式詳解

    在HTML語(yǔ)法中,表格主要通過(guò)< table >、< tr >和< td >3個(gè)標(biāo)簽構(gòu)成,本文通過(guò)實(shí)例代碼講解HTML5表格語(yǔ)法格式,感興趣的朋友一起看看吧
    2025-04-21
  • html5的響應(yīng)式布局的方法示例詳解

    這篇文章主要介紹了HTML5中使用媒體查詢和Flexbox進(jìn)行響應(yīng)式布局的方法,簡(jiǎn)要介紹了CSS Grid布局的基礎(chǔ)知識(shí)和如何實(shí)現(xiàn)自動(dòng)換行的網(wǎng)格布局,感興趣的朋友一起看看吧
    2025-04-21
  • 基于Canvas的Html5多時(shí)區(qū)動(dòng)態(tài)時(shí)鐘實(shí)戰(zhàn)代碼

    本文介紹了如何使用Canvas在HTML5上實(shí)現(xiàn)一個(gè)多時(shí)區(qū)動(dòng)態(tài)時(shí)鐘的web展示,通過(guò)Canvas的API,可以繪制出6個(gè)不同城市的時(shí)鐘,并且這些時(shí)鐘可以動(dòng)態(tài)轉(zhuǎn)動(dòng),每個(gè)時(shí)鐘上都會(huì)標(biāo)注出對(duì)應(yīng)的
    2025-03-11
  • HTML5 data-*自定義數(shù)據(jù)屬性的示例代碼

    HTML5的自定義數(shù)據(jù)屬性(data-*)提供了一種標(biāo)準(zhǔn)化的方法在HTML元素上存儲(chǔ)額外信息,可以通過(guò)JavaScript訪問(wèn)、修改和在CSS中使用,文章還介紹了高級(jí)用法,如存儲(chǔ)JSON數(shù)據(jù)、事
    2025-03-11
  • HTML5中下拉框<select>標(biāo)簽的屬性和樣式詳解

    在HTML5中,下拉框(<select>標(biāo)簽)作為表單的重要組成部分,為用戶提供了一個(gè)從預(yù)定義選項(xiàng)中選擇值的方式,本文將深入探討<select>標(biāo)簽的屬性、樣式,并重點(diǎn)介
    2025-02-27
  • HTML5 Input 日期選擇器詳解

    本文介紹了HTML5InputDatePicker對(duì)象表示HTML``元素,是HTML5中的新對(duì)象,介紹了日期、周、月份、時(shí)間、日期+時(shí)間、本地日期時(shí)間等不同類型的日期選擇器,感興趣的朋友一起看
    2025-02-17
  • HTML5超鏈接和圖片基礎(chǔ)用法詳解

    本文介紹了HTML5中的超鏈接、相對(duì)路徑和圖片的使用方法,超鏈接可以創(chuàng)建指向另一個(gè)文檔或頁(yè)面內(nèi)部書(shū)簽的鏈接,相對(duì)路徑用于在同一服務(wù)器內(nèi)部跳轉(zhuǎn)頁(yè)面,圖片標(biāo)簽用于引入外部圖
    2025-02-17
  • HTML5超鏈接的創(chuàng)建方法

    本文介紹了HTML5超鏈接的創(chuàng)建方法,包括基本語(yǔ)法、創(chuàng)建圖像超鏈接的邊框去除方法以及錨點(diǎn)鏈接的使用,還討論了超鏈接的四種不同狀態(tài)(link、visited、hover、active)的CSS樣
    2025-02-17
  • HTML5使用details標(biāo)簽:展開(kāi)/收縮信息

    最近看一些技術(shù)網(wǎng)站發(fā)現(xiàn)了details 標(biāo)簽的妙用,這個(gè)不用js即可實(shí)現(xiàn)展開(kāi)/收縮信息,很方便用來(lái)讓用戶先才答案,然后下面點(diǎn)擊再給出答案的效果,這里就為大家簡(jiǎn)單介紹一下,
    2024-11-03

最新評(píng)論