canvas使用注意點(diǎn)總結(jié)
發(fā)布時(shí)間:2013-07-19 15:50:41 作者:佚名
我要評(píng)論

canvas默認(rèn)寬高是300、150,為避免異常,最好使用顯示屬性添加而不通過(guò)css來(lái)添加寬高,下面簡(jiǎn)單的為大家介紹下canvas使用注意事項(xiàng),感興趣的朋友可以參考下哈,希望對(duì)大家有所幫助
1、canvas中文教程https://developer.mozilla.org/zh-CN/docs/Canvas_tutorial
2、canvas默認(rèn)寬高是300、150,為避免異常,最好使用顯示屬性添加而不通過(guò)css來(lái)添加寬高
3、在canvas標(biāo)簽內(nèi)部添加不支持canvas標(biāo)簽的瀏覽器的說(shuō)明
4、通過(guò)下面的js代碼也能判斷瀏覽器是否支持canvas
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-unsupported code here
}
5、canvas只支持一種基本形狀的繪制,即矩形,但是其它圖形都可以通過(guò)canvas路徑來(lái)繪制
6、繪制矩形有四個(gè)函數(shù):rect、fillRect、strokeRect和clearRect
7、beginPath的作用用來(lái)開(kāi)始一個(gè)新的路徑層,如果不加就表示在原來(lái)路徑層上繪制,下面兩段代碼效果是完全不一樣的,第一段代碼顯示兩條紅線,第二段代碼顯示一條黑線和一條紅線
var ctx = document.getElementById('cvs').getContext('2d');
ctx.beginPath();
ctx.moveTo(100.5,20.5);
ctx.lineTo(200.5,20.5);
ctx.stroke();
ctx.moveTo(100.5,40.5);
ctx.lineTo(200.5,40.5)
ctx.strokeStyle = '#f00';
ctx.stroke();
var ctx = document.getElementById('cvs').getContext('2d');
ctx.beginPath();
ctx.moveTo(100.5,20.5);
ctx.lineTo(200.5,20.5);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(100.5,40.5);
ctx.lineTo(200.5,40.5)
ctx.strokeStyle = '#f00';
ctx.stroke();
8、如果不需要路徑閉合,closePath可以不用,如果使用了fill則路徑則會(huì)自動(dòng)閉合,不需要再使用closePath了
9、只要有足夠的耐性是完全可以利用貝塞爾曲線繪制任何圖形的
10、二次方曲線在火狐下存在bug,因此可以利用三次方曲線代替二次方曲線使用
11、圖像(如 PNG,GIF,JPEG等)都可以引入到 canvas 中,而且其它的 canvas 元素也可以作為圖像的來(lái)源
12、下面是基本的canvas圖片繪制代碼,其中 image 是 image 或者 canvas 對(duì)象,x 和 y 是其在目標(biāo) canvas 里的起始坐標(biāo)
drawImage(image, x, y)
下面一段代碼表示縮放圖片,width和height表示縮放的尺寸
drawImage(image, x, y, width, height)
下面一段代碼表示剪切圖片,第一個(gè)參數(shù)和其它的是相同的,都是一個(gè)圖像或者另一個(gè) canvas 的引用。其它8個(gè)參數(shù)中分別表示圖片中裁減的起始x坐標(biāo),圖片中裁減的起始y坐標(biāo),裁減區(qū)域?qū)挾?,裁減區(qū)域高度,所畫位置x坐標(biāo),所畫位置y坐標(biāo),所畫圖形寬度,所畫圖形高度,裁剪區(qū)域的尺寸是可以和所畫圖形的尺寸不一樣的,此時(shí)會(huì)縮放到所畫圖片的尺寸
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
13、strokeStyle 是用于設(shè)置圖形輪廓的顏色,而 fillStyle 用于設(shè)置填充顏色。color 可以是表示 CSS 顏色值的字符串,漸變對(duì)象或者圖案對(duì)象。默認(rèn)情況下,線條和填充顏色都是黑色(CSS 顏色值 #000000)。
14、圖像透明度可以用globalAlpha = transparency value或者rgba顏色值來(lái)表示
15、lineWidth 屬性設(shè)置當(dāng)前繪線的粗細(xì),為解決1px線寬bug問(wèn)題,采用+0.5的方式來(lái)解決
16、lineCap 屬性最左邊的線用了默認(rèn)的 butt 。可以注意到它是與輔助線齊平的。中間的是 round 的效果,端點(diǎn)處加上了半徑為一半線寬的半圓。右邊的是 square 的效果,端點(diǎn)處加上了等寬且高度為一半線寬的方塊
17、lineJoin 屬性這里我同樣用三條折線來(lái)做例子,分別設(shè)置不同的 lineJoin 值。最上面一條是 round 的效果,邊角處被磨圓了,圓的半徑等于線寬。中間和最下面一條分別是 bevel 和 miter 的效果。當(dāng)值是 miter 的時(shí)候,線段會(huì)在連接處外側(cè)延伸直至交于一點(diǎn),延伸效果受到下面將要介紹的 miterLimit 屬性的制約
18、save 和 restore 方法是用來(lái)保存和恢復(fù) canvas 狀態(tài)的,都沒(méi)有參數(shù)。Canvas 的狀態(tài)就是當(dāng)前畫面應(yīng)用的所有樣式和變形的一個(gè)快照。Canvas 狀態(tài)是以堆(stack)的方式保存的,每一次調(diào)用 save 方法,當(dāng)前的狀態(tài)就會(huì)被推入堆中保存起來(lái)。每一次調(diào)用 restore 方法,上一個(gè)保存的狀態(tài)就從堆中彈出,所有設(shè)定都恢復(fù)。
19、transform(1, 0, 0, 1, 0, 0)參數(shù)分別表示水平方向縮放、水平方向旋轉(zhuǎn)(順時(shí)針)、垂直方向旋轉(zhuǎn)(逆時(shí)針)、垂直方向縮放、水平方向偏移量、垂直方向偏移量
setTransform(1, 0, 0, 1, 0, 0)表示重置前一個(gè)變換矩陣然后構(gòu)建新的矩陣,參數(shù)作用同上
rotate(angle),(一個(gè)半徑等于1弧度,2πr/r=弧度即360=2π,即1=π/180)
20、動(dòng)畫其實(shí)就是不斷清空畫板(clearRect()),然后重繪
2、canvas默認(rèn)寬高是300、150,為避免異常,最好使用顯示屬性添加而不通過(guò)css來(lái)添加寬高
3、在canvas標(biāo)簽內(nèi)部添加不支持canvas標(biāo)簽的瀏覽器的說(shuō)明
4、通過(guò)下面的js代碼也能判斷瀏覽器是否支持canvas
復(fù)制代碼
代碼如下:var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// drawing code here
} else {
// canvas-unsupported code here
}
5、canvas只支持一種基本形狀的繪制,即矩形,但是其它圖形都可以通過(guò)canvas路徑來(lái)繪制
6、繪制矩形有四個(gè)函數(shù):rect、fillRect、strokeRect和clearRect
7、beginPath的作用用來(lái)開(kāi)始一個(gè)新的路徑層,如果不加就表示在原來(lái)路徑層上繪制,下面兩段代碼效果是完全不一樣的,第一段代碼顯示兩條紅線,第二段代碼顯示一條黑線和一條紅線
復(fù)制代碼
代碼如下:var ctx = document.getElementById('cvs').getContext('2d');
ctx.beginPath();
ctx.moveTo(100.5,20.5);
ctx.lineTo(200.5,20.5);
ctx.stroke();
ctx.moveTo(100.5,40.5);
ctx.lineTo(200.5,40.5)
ctx.strokeStyle = '#f00';
ctx.stroke();
復(fù)制代碼
代碼如下:var ctx = document.getElementById('cvs').getContext('2d');
ctx.beginPath();
ctx.moveTo(100.5,20.5);
ctx.lineTo(200.5,20.5);
ctx.stroke();
ctx.beginPath();
ctx.moveTo(100.5,40.5);
ctx.lineTo(200.5,40.5)
ctx.strokeStyle = '#f00';
ctx.stroke();
8、如果不需要路徑閉合,closePath可以不用,如果使用了fill則路徑則會(huì)自動(dòng)閉合,不需要再使用closePath了
9、只要有足夠的耐性是完全可以利用貝塞爾曲線繪制任何圖形的
10、二次方曲線在火狐下存在bug,因此可以利用三次方曲線代替二次方曲線使用
11、圖像(如 PNG,GIF,JPEG等)都可以引入到 canvas 中,而且其它的 canvas 元素也可以作為圖像的來(lái)源
12、下面是基本的canvas圖片繪制代碼,其中 image 是 image 或者 canvas 對(duì)象,x 和 y 是其在目標(biāo) canvas 里的起始坐標(biāo)
drawImage(image, x, y)
下面一段代碼表示縮放圖片,width和height表示縮放的尺寸
drawImage(image, x, y, width, height)
下面一段代碼表示剪切圖片,第一個(gè)參數(shù)和其它的是相同的,都是一個(gè)圖像或者另一個(gè) canvas 的引用。其它8個(gè)參數(shù)中分別表示圖片中裁減的起始x坐標(biāo),圖片中裁減的起始y坐標(biāo),裁減區(qū)域?qū)挾?,裁減區(qū)域高度,所畫位置x坐標(biāo),所畫位置y坐標(biāo),所畫圖形寬度,所畫圖形高度,裁剪區(qū)域的尺寸是可以和所畫圖形的尺寸不一樣的,此時(shí)會(huì)縮放到所畫圖片的尺寸
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
13、strokeStyle 是用于設(shè)置圖形輪廓的顏色,而 fillStyle 用于設(shè)置填充顏色。color 可以是表示 CSS 顏色值的字符串,漸變對(duì)象或者圖案對(duì)象。默認(rèn)情況下,線條和填充顏色都是黑色(CSS 顏色值 #000000)。
14、圖像透明度可以用globalAlpha = transparency value或者rgba顏色值來(lái)表示
15、lineWidth 屬性設(shè)置當(dāng)前繪線的粗細(xì),為解決1px線寬bug問(wèn)題,采用+0.5的方式來(lái)解決
16、lineCap 屬性最左邊的線用了默認(rèn)的 butt 。可以注意到它是與輔助線齊平的。中間的是 round 的效果,端點(diǎn)處加上了半徑為一半線寬的半圓。右邊的是 square 的效果,端點(diǎn)處加上了等寬且高度為一半線寬的方塊
17、lineJoin 屬性這里我同樣用三條折線來(lái)做例子,分別設(shè)置不同的 lineJoin 值。最上面一條是 round 的效果,邊角處被磨圓了,圓的半徑等于線寬。中間和最下面一條分別是 bevel 和 miter 的效果。當(dāng)值是 miter 的時(shí)候,線段會(huì)在連接處外側(cè)延伸直至交于一點(diǎn),延伸效果受到下面將要介紹的 miterLimit 屬性的制約
18、save 和 restore 方法是用來(lái)保存和恢復(fù) canvas 狀態(tài)的,都沒(méi)有參數(shù)。Canvas 的狀態(tài)就是當(dāng)前畫面應(yīng)用的所有樣式和變形的一個(gè)快照。Canvas 狀態(tài)是以堆(stack)的方式保存的,每一次調(diào)用 save 方法,當(dāng)前的狀態(tài)就會(huì)被推入堆中保存起來(lái)。每一次調(diào)用 restore 方法,上一個(gè)保存的狀態(tài)就從堆中彈出,所有設(shè)定都恢復(fù)。
19、transform(1, 0, 0, 1, 0, 0)參數(shù)分別表示水平方向縮放、水平方向旋轉(zhuǎn)(順時(shí)針)、垂直方向旋轉(zhuǎn)(逆時(shí)針)、垂直方向縮放、水平方向偏移量、垂直方向偏移量
setTransform(1, 0, 0, 1, 0, 0)表示重置前一個(gè)變換矩陣然后構(gòu)建新的矩陣,參數(shù)作用同上
rotate(angle),(一個(gè)半徑等于1弧度,2πr/r=弧度即360=2π,即1=π/180)
20、動(dòng)畫其實(shí)就是不斷清空畫板(clearRect()),然后重繪
相關(guān)文章
- Microdata作為HTML5新增的一個(gè)特性,它允許開(kāi)發(fā)者在HTML文檔中添加更多的語(yǔ)義信息,以便于搜索引擎和瀏覽器更好地理解頁(yè)面內(nèi)容,本文將探討HTML5中Microdata的使用方法以及2025-04-21
- 在HTML語(yǔ)法中,表格主要通過(guò)< table >、< tr >和< td >3個(gè)標(biāo)簽構(gòu)成,本文通過(guò)實(shí)例代碼講解HTML5表格語(yǔ)法格式,感興趣的朋友一起看看吧2025-04-21
- 這篇文章主要介紹了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-11HTML5 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-11HTML5中下拉框<select>標(biāo)簽的屬性和樣式詳解
在HTML5中,下拉框(<select>標(biāo)簽)作為表單的重要組成部分,為用戶提供了一個(gè)從預(yù)定義選項(xiàng)中選擇值的方式,本文將深入探討<select>標(biāo)簽的屬性、樣式,并重點(diǎn)介2025-02-27- 本文介紹了HTML5InputDatePicker對(duì)象表示HTML``元素,是HTML5中的新對(duì)象,介紹了日期、周、月份、時(shí)間、日期+時(shí)間、本地日期時(shí)間等不同類型的日期選擇器,感興趣的朋友一起看2025-02-17
- 本文介紹了HTML5中的超鏈接、相對(duì)路徑和圖片的使用方法,超鏈接可以創(chuàng)建指向另一個(gè)文檔或頁(yè)面內(nèi)部書(shū)簽的鏈接,相對(duì)路徑用于在同一服務(wù)器內(nèi)部跳轉(zhuǎn)頁(yè)面,圖片標(biāo)簽用于引入外部圖2025-02-17
- 本文介紹了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