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

在審

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

本發明公開一種canvas繪制動態二維場景的方法，該方法具體包括下述步驟；步驟1：確定繪制原點center，設定center.X和center.Y；步驟2：利用JavaScript獲取當前瀏覽器的文檔寬度和高度所占像素大小，即寬度winWidth和高度winHeight，然后根據需要設置畫布的寬高canvasWidth和canvasHeight；步驟3：將div作為canvas的父容器，通過動態的方式將canvas元素添加到div中；步驟4：設置多個畫布，其中一個畫布設置為可視畫布_realCanvas，其他畫布設置為不可視畫布_notVisibleCanvas1、_notVisibleCanvas2,……_notVisibleCanvasN；本發明通過瀏覽器對canvas的技術支持，創造性的構造出可視畫布和不可視畫布，進行渲染，達到大大提升canvas繪圖的瀏覽器性能，相對于現有的常見的繪圖方式，渲染更流暢，交互性大大提升。

技術領域

本發明涉及二維場景繪制技術領域，具體為一種canvas繪制動態二維場景的方法。

背景技術

傳統的canvas方法中，一般會將所有需要繪制的目標放在一個畫布中進行繪制，這種方式會極大消耗瀏覽器的性能，造成瀏覽器負荷較大。最直接的觀感是需要繪制的目標在頁面上顯示十分卡頓。造成這種結果的原因是，

1.圖像是按幀進行繪制的，如果將所有目標都繪制在一個畫布上，那么在渲染每一幀的時候需要計算所有目標在畫布上的坐標，特別的如果某些靜態目標的坐標計算非常復雜，那么每一幀在繪制時則同樣需要重新計算，這樣對瀏覽器引擎來說就是巨大的資源浪費。

2.canvas的繪制方法是基于Javascript的，如果將所有目標都繪制在一起，如果有某個目標在進行繪制前的計算時出現了運行錯誤，那么該錯誤將影響到后續所有目標的繪制。

目標在繪制時會存在一定的疊加關系，如果按照傳統方法，需要用額外的計算去處理相應的疊加關系，這樣也會造成性能影響。

發明內容

本發明的目的在于提供一種canvas繪制動態二維場景的方法。

本發明的目的可以通過以下技術方案實現：一種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；