使用HTML5的canvas標簽進行圖形繪制、動畫和游戲開發的方法和技巧
時間：2024-01-16 來源：華清遠見
一、基本使用
canvas基本使用
寬、高通過屬性調整
注意： 利用樣式調整寬高，內部圖像的尺寸不會成比例縮放，不是真實的像素比例
線條的繪制
（x-距離畫布左上角的水平位置， y-距離畫布左上角的垂直位置）
步驟1（必須）：指定繪制起始位置moveTo(x,y)
步驟2（必須）：指定繪制的結束位置lineTo(x,y)直線
步驟3：控制筆觸的顏色strokeStyle=''
步驟4：修改線條的寬度lineWidth=number
步驟5：設置線條結束端點的樣式lineCap='butt/round/square'
步驟6（必須）：執行繪制操作stroke()
線條繪制圖形
1-多個lineTo
lineTo()創建一個結束點，多個lineTo繪制時，會由前一個lineTo()結束位置作為下一個線的起始 點，開始繪制到當前結束點的一條直線
2-多個moveTo
設置多個moveTo作為形狀的最初起始點
閉合空間closePath()
closePath()-創建從當前點到開始點的路徑
繪制線時，調用開始路徑函數beginPath()、結束路徑函數closePath()，可以使得路徑變為閉合圖 形
每一組開始路徑函數beginPath()、結束路徑函數closePath()內部繪制時需要重新設置最初起始 點、添加stroke()執行繪制操作、單獨設置繪制筆觸顏色strokeStyle
lineWidth——只設置一個會影響所有，也可單獨設置
填充空間fill()
填充當前的圖像（路徑）
默認顏色是黑色
如果路徑未關閉，那么 fill() 方法會從路徑結束點到開始點之間添加一條線，以關閉該路徑 ，然后填 充該路徑。
填充樣式fillStyle='color'顏色
fillStyle=gradient漸變函數
createLinearGradient線性漸變函數（漸變開始x坐標，漸變開始y坐標，漸變結束x坐標，漸變 結束y坐標）
createRadialGradient放射性漸變函數（漸變開始圓的x坐標，漸變開始圓的y坐標， 開始圓的半 徑，漸變結束圓的x坐標，漸變結束圓的y坐標， 結束圓的半徑）
使用該對象作為 strokeStyle或 fillStyle屬性的值
用于填充 矩形、圓形、線條、文本
使用 addColorStop(位于gradient 對象中的位置0-1,'顏色')方法規定不同位置的漸變顏色，向一個 漸變添加一個顏色停止。
fillStyle=pattern對象
通過 createPattern(image貼圖的圖像,repetitionStyle貼圖方式)返回一個Canvas 的Pattern對象， 用于使用圖像來填充繪圖
· repetitionStyle貼圖方式
○ repeat——各個方向，默認值
○ repeat-x——只在x方向
○ repeat-y——只在y方向
○ no-repeat——不貼圖，只使用一次
注意： 在canvas里使用圖像，需要在頁面加載完成函數里使用
二、圖形繪制
矩形繪制rect
使用方法context.react(x-矩形左上角x坐標， y-矩形左上角y坐標， width-矩形的寬度， height-矩形 的高度)
空心矩形rect+stroke/strokeRect
實心矩形rect+fill/fillRect
畫布擦除clearRect
context.clearRect(x-要清除的矩形左上角的x坐標,y-要清除的,width-要清除的矩形的寬度,height- 要清除的矩形的高度)
圓形繪制arc
context.arc(圓的中心x坐標,圓的中心y坐標,圓的半徑,起始弧度,結束弧度,繪制方向) 弧度的計算=角度數*（ Math.PI/180° )
繪制的方向： false-順時針， true-逆時針
0度代表水平向右
扇形繪制（直線+弧長）
三、文本繪制
兩種方式fillText/strokeText
fillText ——繪制實心文本
strokeText ——繪制空心文本
顏色設置fillStyle/strokeStyle
ctx.fillStyle = 'color' ——填充文本顏色
ctx.strokeStyle = 'color' ——空心文本顏色
字體大小、類型設置font
ctx.font = 'font-size font-family' ；
font-size為字體大小，如： 32px；
font-family為字體類型，如： MircrosoftYaHei；
文本水平對齊方式textAlign
ctx.textAlign = 'start(默認) || left || center || right || end'；
start、 left、center、 right、end為textAlign的取值， 默認是start。
start和left效果一樣，將文本內容左對齊于文本繪制的起始位置；
center將文本內容在文本繪制的起始位置兩側各占一半；
end和right效果一樣，將文本內容右對齊于文本繪制的起始位置；
○ 文本繪制的起始位置指的是fillText或strokeText中的x位置
文本在垂直方向上的位置由fillText或strokeText中的y來控制；
文本基線對齊方式textBaseline
context.textBaseline="top" || "hanging" || "middle" || "alphabetic" ||
"ideographic" || "bottom";
○ 注意： 設置基線要在設置文字內容和位置之前，否則設置基線失效
文本方向direction
ctx.direction = “ltr” || "rtl" || “inherit”;
ltr
文本方向從左向右。
rtl
文本方向從右向左。
inherit 默認
根據情況繼承 元素或者 Document
預測量文本寬度measureText
四、圖片繪制
語法：
ctx.drawImage(image, dx, dy);
ctx.drawImage(image, dx,dy, dWidth, dHeight);
ctx.drawImage(image, sx, sy, sWidth,sHeight, dx, dy, dWidth, dHeight);
解釋：
image ：img標簽
dx,dy: 繪制圖片的坐標位置
dWidth, dHeight: 繪制圖片的寬度和高度
· sx, sy: 圖片內部的坐標，用于截取圖片
sWidth,sHeight: 截取圖片的寬高
五、畫布的requestAnimation
它是一個專門為實現高性能的幀動畫
是瀏覽器用于定時循環操作的一個接口，類似于setTimeout，主要用途是按幀對網頁進行重繪，讓 各種網頁動畫效果（DOM動畫、 Canvas動畫、 SVG動畫、 WebGL動畫）能夠有一個統一的刷新機
制，從而節省系統資源，提高系統性能，改善視覺效果。
格式：
requestAnimationFrame (回調函數)
回調函數A(獲取到瀏覽器每次刷新的時長){
獲取到每一幀的間隔intervalTime = 獲取到瀏覽器每次刷新的時長 - 上一幀時間
上一幀的時間 = 獲取到瀏覽器每次刷新的時間
六、如何使用Canvas制作游戲開發的方法和
技巧
1-準備工作
文本編輯器，如 Visual Studio Code。
一個 Web 服務器。
一些游戲素材，如圖片、聲音等。
一個 Canvas 游戲框架，如 Phaser、CreateJS、 PixiJS 等。
2-創建HTML頁面
注意：引入 Canvas 游戲框架
3-添加事件監聽器
監聽玩家的鍵盤輸入，使其能夠控制玩家移動。
監聽玩家與敵人的碰撞。
監聽游戲結束，使其能夠重新開始游戲
4-優化處理
避免頻繁的重繪
通過緩存來避免重復繪制
5-實現游戲邏輯
通過面向對象的方式，定義游戲的各種元素
定義游戲的規則
通過requestAnimation方法來實現游戲的主循環
6-動畫效果的植入
添加背景音樂、交互音效
圖形效果的改變：位置、大小、透明度
通過css3動畫屬性，來實現動畫效果
