[發明專利]一種canvas繪制動態二維場景的方法

在審

• 申請號: 202011296688.4
• 申請日: 2020-11-18
• 公開（公告）號: CN112269575A
• 公開（公告）日: 2021-01-26
• 發明（設計）人: 張濤;胡興;王盛忠
• 申請（專利權）人: 安徽四創電子股份有限公司
• 主分類號: G06F8/34
• 分類號: G06F8/34;G06F8/38;G06F16/957
• 代理公司: 北京和信華成知識產權代理事務所(普通合伙) 11390
• 代理人: 杜家波

1.一種canvas繪制動態二維場景的方法，該方法具體包括下述步驟；

步驟1：確定繪制原點center，設定center.X和center.Y；

步驟2：利用JavaScript獲取當前瀏覽器的文檔寬度和高度所占像素大小，即寬度winWidth和高度winHeight，然后根據需要設置畫布的寬高canvasWidth和canvasHeight；

步驟3：將div作為canvas的父容器，通過動態的方式將canvas元素添加到div中；

步驟4：設置多個畫布，其中一個畫布設置為可視畫布_realCanvas，其他畫布設置為不可視畫布_notVisibleCanvas1、_notVisibleCanvas2,……_notVisibleCanvasN；

步驟5：將可視畫布的背景根據需求設置成一種或多種顏色，或者設置為一張圖片，即設置父容器的css樣式，為div的background背景元素設置某種顏色或者背景圖片，將其他不可視畫布的父容器div的背景設置為透明色，即“rgba(0,0,0,0)”或者“#0000”；

步驟6：從不可視畫布中確定靜態目標繪制的畫布以及動態目標繪制的畫布；

步驟7：在開始繪制第一幀前，分別計算步驟6中確定的動態和靜態目標其所在畫布中的計算屬性，然后利用步驟4中確定的畫筆，針對每種不可視畫布和相對應的場景，先將要繪制的目標繪制在該畫布上；

步驟8：在實際繪圖時，可視畫布的畫筆將不可視畫布當做一整副圖進行繪制，即_realCtx.drawImage；

步驟9：在后續的繪制每一幀時，動態目標的計算屬性仍要計算，靜態屬性如果沒有變動就不進行計算，根據步驟7中設定好的順序，在每一幀的繪制中將不可視畫布上的目標當作一張圖片繪制在可視畫布上。

2.根據權利要求1所述的一種canvas繪制動態二維場景的方法，其特征在于，步驟1中確定繪制原點center，其中center.X表示橫坐標，center.Y表示縱坐標,canvas畫布的默認繪制原點為畫布的左上角，橫坐標從屏幕左邊向右邊依次增大，縱坐標從屏幕上方向下方依次增大，依據實際場景的需求，通過坐標變化將原點設置在畫布中線的頂部或者底部，假設現在坐標原點在橫向平移w，縱向平移為h，那么新的center坐標為center.X＝center.X+w,center.Y＝center.Y+h。

3.根據權利要求1所述的一種canvas繪制動態二維場景的方法，其特征在于，步驟4中需要將所有的畫布設置為統一的長寬，即步驟2中確定的像素大小，同時需要為多個畫布設置一個畫筆，畫筆的作用就是將需要繪制的目標繪制在畫布上，畫筆可以通過canvas自帶api來獲得，以可視畫布為例_realCtx＝_realCanvas.getContext(“2d”)。

4.根據權利要求1所述的一種canvas繪制動態二維場景的方法，其特征在于，步驟8中其中第一個參數為不可視畫布，第二個和第三個參數分別表示圖像繪制的橫坐標和縱坐標，第三個和第四個參數表示不可視化畫布的大小，所以在繪制不同不可視畫布上的內容時，先根據其之間的上下層疊關系，設定不可視畫布繪制順序，然后依次對每張不可視畫布從最底層往最上層進行繪制。

5.根據權利要求1所述的一種canvas繪制動態二維場景的方法，其特征在于，該方法中有兩個核心部分分別為可視畫布和不可視畫布；

其中，不可視畫布，用于繪制需要繪制的目標；

可視畫布，用于將不可視畫布當作一幅圖像進行繪制，在瀏覽器中展示。

6.根據權利要求5所述的一種canvas繪制動態二維場景的方法，其特征在于，將該不可視畫布大小設置為統一大小和位置，保證多個不可視畫布重疊在一起，其背景色設置為完全透明，不可視畫布可以為多個，并將這些多個畫布分成兩類，一類用于繪制靜態目標，另一類用于繪制不可視目標。