設置填充和描邊顏色
- 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學習筆記，如有侵權，請聯繫刪除