[發明專利]高性能網頁實時繪畫互動方法及其系統

在審

• 申請號: 201910966432.0
• 申請日: 2019-10-12
• 公開（公告）號: CN110727896A
• 公開（公告）日: 2020-01-24
• 發明（設計）人: 徐璇;盧曉飛;張元元;蔡榮
• 申請（專利權）人: 杭州天寬科技有限公司
• 主分類號: G06F16/958
• 分類號: G06F16/958;G06T11/20;G06F9/451
• 代理公司: 33289 杭州裕陽聯合專利代理有限公司
• 代理人: 姚宇吉

本申請公開了一種高性能網頁實時繪畫互動方法，基于HTML5的畫布功能，包括：記錄繪畫命令，在每一個周期內形成圖形變化的命令數據；對所有的命令數據按照記錄所產生的時間先后秩序規則進入通道；由通道中讀取命令數據并刷新至畫布中。在本申請實施例中，本申請提升了網頁上畫布(canvas)性能，充分結合其特性，使之能夠在網頁上完成一些復雜的圖形處理工作，利用websocket技術，結合服務端，可以達到多人網頁在線實時繪畫互動的效果。

技術領域

本申請涉及網頁繪圖技術領域，尤其涉及一種高性能網頁實時繪畫互動方法及其系統。

背景技術

現有的網頁畫布技術，尤其是以基于HTML5的畫布(canvas)功能比較簡單易上手，能夠在網頁上實現一些圖形圖表等的繪圖或一些簡單的單用戶繪畫功能。但是該畫布功能在互動性上比較匱乏，只能單用戶操作，且性能上，只能夠實現一些比較簡單的圖形處理工作。

發明內容

為了解決上述技術問題，本申請實施例提供一種高性能網頁實時繪畫互動方法及其系統。

本申請實施例第一方面提供了一種高性能網頁實時繪畫互動方法，基于HTML5的畫布功能，可包括：

記錄繪畫命令，在每一個周期內形成圖形變化的命令數據；

對所有的命令數據按照記錄所產生的時間先后秩序規則進入通道；

由通道中讀取命令數據并刷新至畫布中。

進一步地，所述記錄繪畫命令，在每一個周期內形成圖形變化的命令數據，包括：

設置繪畫命令記錄方法，記錄每個繪畫操作周期結束時的畫布存在圖形變化后的命令組，并以命名組為單位繪制出內存位圖。

進一步地，所述對所有的命令數據按照記錄所產生的時間先后秩序規則進入通道包括：

創建一個內存位圖緩存區作為通道，將繪畫模塊所繪制的內存位圖按記錄產生的時間先后秩序規則存入該緩存區。

進一步地，所述由通道中讀取命令數據并刷新至畫布中包括：

讀取緩存模塊中的內存位圖緩存區所緩存的內存位圖刷新顯示至畫布中。

本申請實施例第二方面提供了一種高性能網頁實時繪畫互動系統，包括：

繪畫模塊，用于記錄繪畫命令，在每一個周期內形成圖形變化的命令數據；其中，命令數據包括記錄每個繪畫操作周期結束時的畫布存在圖形變化后的命令組，命令數據以命名組為單位的形式繪制出內存位圖，并發送至緩存模塊；

緩存模塊，用于按照記錄所產生的時間先后秩序規則存儲所有的內存位圖；

刷新模塊，用于讀取緩存模塊中的內存位圖緩存區所緩存的內存位圖刷新顯示至畫布中。

進一步地，所述繪畫模塊中還包括：

多個繪畫記錄單元，每個所述繪畫記錄單元用于存儲繪畫命令記錄的方法。

進一步地，所述繪畫操作周期由所有繪畫記錄單元的單次單個調用進行繪畫的周期長度形成。

進一步地，所述刷新模塊讀取緩存模塊中的內存位圖緩存區所緩存的內存位圖并刷新顯示至畫布中，讀取時以先入先出的規則讀取。

進一步地，每個畫布設置有唯一標識；在繪畫模塊中，在用戶每次調用封裝的各類繪畫記錄單元進行繪畫操作時，通過其繪畫記錄單元調用時的各項數據參數捕捉到畫布上圖形的像素點數據變化，用以計算出當用戶發生各種繪畫操作時，畫布中所繪畫的圖形的各個像素點的數據變化，得出一個像素數據組，其中包含了圖形中所有存在變化的像素點數據，然后結合畫布的唯一標識形成一個圖形變化數據組；