h5新特性 canvas標籤(補充)

2021-08-20 02:48:55 字數 1930 閱讀 3203

上下文物件 = painter

1.透明度

語法:painter.globalalpha = 0~1;

任何操作都要在fill()之前

2.線性

1)設定線寬

painter.linewidth = number;

2)端點

painter.lincap = 端點型別;

型別:butt:無端點,

round:圓弧端點

square:方塊端點

3)設定連線型別

painter.linejoin="連線型別";

round:圓弧

level:截面

miter:直角

4)設定虛線

pointer.setlinedash(第一段長度,第二段長度……)

5)設定偏移

pointer.linedashoffset = 數值;(配合虛線使用)

3.漸變

1)線性漸變

pointer.createlinergradeent(開始橫座標,開始縱座標,結束橫座標,結束縱座標)

.addcolorstop(0,『green』);

2)徑向漸變

pointer.createradiagradient(開始橫座標,開始縱座標,開始r座標,結束橫座標,結束縱座標,借宿r座標);

3.陰影與文字

1)陰影

pointer.shadowcolor = "顏色";

pointer.shadowblur = "模糊數值";

pointer.shadowoffsety = "垂直偏移距離";

注意:陰影的設定必須在canvas之前,寫在之後會導致繪製內容失敗

2)文字

pointer.font = "大小  字型";

pointer.filltext(『text content』,文字x 文字y);

4.繪製

關鍵方法:pointer.drawimage();

pointer.drawimage(img,x,y);

pointer.drawimage(img,x,y,w,h);

pointer.drawimage(img,裁切x,裁切y,裁切寬度,裁切高度);

5.轉換與變形

注意:在canvas中變換是變化整個畫布,而不是變換圖形,所有的變換都必須在變換開始之前

先儲存畫布狀態

所有變化結束後

再儲存畫布狀態

以達到只改變目標圖形的變換效果

1)translate(x,y) 位移變換

2)rotate(x,y)旋轉變換

3)scale(x,y)比例變換

6.合成

pointer.globalcompositeoperation = '不同的繪製方式'

source-over    在上面畫

source-in    在上面畫,背景透明,溢位隱藏

source-out 在上面畫,背景透溢位處現實

source-atop    在上面畫 溢位隱藏

destination-over 在下面,同上

destination-in

destination-out

destination-astop

lighter 堆疊

copy 繪製顯示,原圖隱藏

xor 異或

7.畫素集操作

1)建立指定繪製區域:pointer.createimagedata(區域w,區域h)

說明:a 本方法會返回乙個陣列

b 陣列長度是w*h*4

c 陣列中每4個畫素代表乙個畫素:r g b a

2)獲取指定區域元素

pointer.getimagedata(x,y,w,h);

3)繪製指定區域元素

pointer.putimagedata(imagedata,x,y) ;

H5常用新特性

注意 這些新特性都有相容性的問題,基本是ie9 以上版本的瀏覽器才支援,如果不考相容性問題,可以大量使用這些新特性 html5新增的語義話標籤 html新增的多 標籤 屬性值描述 autoplay autoplay controls controls width pixels height pxlo...

H5新標籤 新功能

1.h5新標籤 語義標籤 定義文章 定義文章側邊欄 定義一組 物件以及文字內容 定義figure的標題 布局頁面時用的語義標籤 定義導航 頭部定義文件中的區段 區域 尾部input其他的型別 1.text 文字輸入框 2.password 密碼 3.button 按鈕 4.checkbox 複選 5...

H5新特性 本地儲存

注意 本地儲存呼叫者必須統一,用臨時儲存儲存的資料,只有臨時儲存才能找到 localstorage 永久儲存 相對 其中的資料不隨著瀏覽器的開關而改變 sessionstorage 臨時儲存 相對 當瀏覽器關閉 當前頁面關閉時,資料消失,頁面重新整理時不會影響 兩者區別 local 和 sessio...