設置填充和描邊顏色
- fillStyle : 設置用於填充繪畫的顏色
- strokeStyle : 設置用於描邊的顏色
- 以上兩個值都可以接受顏色名,16 進制數據,rgb 值,甚至 rgba. 一般先進行設置樣式然後進行繪製。
設置陰影
- 此部分內容由於使用性能差,故瞭解即可,陰影的設置常用圖片實現
- shadowColor : 設置或返回用於陰影的顏色。
- shadowBlur : 設置或返回用於陰影的模糊級別,大於 1 的正整數,數值越高,模糊程度越大
- shadowOffsetX: 設置或返回陰影距形狀的水平距離
- shadowOffsetY: 設置或返回陰影距形狀的垂直距離
線性漸變樣式
- 一般不用,都是用圖片代替,canvas 繪製圖片效率更高
- 線性漸變可以用於 矩形、圓形、文字等顏色樣式,線性漸變是一個對象
- 語法:ctx.createLinearGradient(x0,y0,x1,y1); //參數:x0,y0 起始座標,x1,y1 結束座標
//創建線性漸變的對象,
var grd = ctx.createLinearGradient(0, 0, 170, 0);
grd.addColorStop(0, 'black'); //添加一個漸變顏色,第一個參數介於 0.0 與 1.0 之間的值,表示漸變中開始與結束之間的位置。
grd.addColorStop(1, 'white'); //添加一個漸變顏色
ctx.fillStyle = grd; //關鍵點,把漸變設置到 填充的樣式
圓形漸變(徑向漸變)
- 創建放射狀/圓形漸變對象。可以填充文本、形狀等
- 語法: context.createRadialGradient(x0,y0,r0,x1,y1,r1);
- x0: 漸變的開始圓的 x 座標
- y0: 漸變的開始圓的 y 座標
- r0: 開始圓的半徑
- x1: 漸變的結束圓的 x 座標
- y1: 漸變的結束圓的 y 座標
- r1: 結束圓的半徑
繪製背景圖
- 語法:ctx.createPattern(img,repeat) 方法在指定的方向內重複指定的元素
- 不常用,瞭解即可
- 第一參數:設置平鋪背景的圖片,第二個背景平鋪的方式。
- image : 規定要使用的圖片、畫布或視頻元素
- repeat : 默認。該模式在水平和垂直方向重複
- repeat-x : 該模式只在水平方向重複。
- repeat-y : 該模式只在垂直方向重複。
- no-repeat: 該模式只顯示一次(不重複)
var ctx = c.getContext('2d');
var img = document.getElementById('lamp');
var pat = ctx.createPattern(img, 'repeat');
ctx.rect(0, 0, 150, 100);
ctx.fillStyle = pat; // 把背景圖設置給填充的樣式
ctx.fill();
縮放(重點內容)
- scale() 方法縮放當前繪圖,更大或更小
- 語法:context.scale(scalewidth,scaleheight)
- scalewidth : 縮放當前繪圖的寬度 (1=100%, 0.5=50%, 2=200%, 依次類推)
- scaleheight : 縮放當前繪圖的高度 (1=100%, 0.5=50%, 2=200%, etc.) +注意:縮放的是整個畫布,縮放後,繼續繪製的圖形會被放大或縮小。
位移畫布(重點)
- ctx.translate(x,y) 方法重新映射畫布上的 (0,0) 位置
- x: 添加到水平座標(x)上的值
- y: 添加到垂直座標(y)上的值
- 發生位移後,相當於把畫布的 0,0 座標 更換到新的 x,y 的位置,所有繪製的新元素都被影響,已繪製的舊元素不會改變
- 位移畫布一般配合縮放和旋轉等
畫布旋轉
- context.rotate(angle); 方法旋轉當前的繪圖
- 注意參數是弧度(PI)
繪製環境的保存和還原
- ctx.save() 保存當前環境的狀態,可以把當前繪製環境進行保存到緩存中。
- ctx.restore() 返回之前保存過的路徑狀態和屬性,獲取最近緩存的 ctx
- 一般配合位移畫布使用
繪製環境的透明度
- 語法 : context.globalAlpha=number
- number:透明值。必須介於 0.0(完全透明) 與 1.0(不透明) 之間
- 設置透明度是全局的透明度的樣式。注意是全局的。
本文摘錄自老馬前端canvas學習筆記,如有侵權,請聯繫刪除