整合營銷服務商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          HTML5基礎知識(2)初識canvas、svg、地理定位和新語義元素

          節(jié)主要簡單講解canvas、svg、地理定位和新語義元素

          HTML 5 Canvas

          canvas 元素用于在網(wǎng)頁上繪制圖形。HTML5 的 canvas 元素使JavaScript 在網(wǎng)頁上繪制圖像。畫布是一個矩形區(qū)域,您可以控制其每一像素。canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。

          <canvas id="myCanvas" width="200" height="100"></canvas>

          canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 內(nèi)部完成:

          <script type="text/javascript">

          var c=document.getElementById("myCanvas");

          var cxt=c.getContext("2d");返回一個用于在畫布上繪圖的環(huán)境,目前僅支持2d,

          cxt.fillStyle="#FF0000";//染成紅色

          cxt.fillRect(0,0,150,75);//fillRect 方法規(guī)定了形狀、位置和尺寸

          </script>

          、什么是Canvas

          想必學習前端的同學們對Canvas 都不陌生,它是 HTML5 新增的“畫布”元素,可以使用JavaScript來繪制圖形。

          Canvas元素是在HTML5中新增的標簽用于在網(wǎng)頁實時生成圖像,并且可以操作圖像內(nèi)容,基本上它是一個可以用JavaScript操作的位圖(bitmap)。Canvas 由一個可繪制區(qū)域HTML代碼中的屬性定義決定高度和寬度。JavaScript代碼可以訪問該區(qū)域,通過一套完整的繪圖功能的API生成動態(tài)的圖形。

          二. 引入Canvas的重要性

          HTML5 在 2012 年已形成了穩(wěn)定的版本,在此之前很長一段時間,開發(fā)者們繪制圖形選擇的方案更多是SVG來實現(xiàn)。SVG使用XML來定義圖形,就像使用HTML標簽一樣來控制元素的排布,SVG的本質(zhì)就是一個DOM元素。當圖形內(nèi)容太過豐富后,性能和內(nèi)存上就會大打折扣。一旦涉及頻繁的圖片繪制場景,這個實現(xiàn)對于用戶的體驗將是毀滅性的。

          渲染動畫的基本原理,無非是反復地擦除和重繪。為了動畫的流暢,留給開發(fā)者渲染一幀的時間,只有短短的 16.67ms。在這16.67ms中,我不僅需要處理一些繪制邏輯,計算每個對象的位置、狀態(tài),還需要把它們都畫出來。如果消耗的時間稍稍多了一些,用戶就會感受到“卡頓”。所以,在編寫動畫時,開發(fā)者們無時無刻不擔憂著動畫的性能,唯恐渲染的耗時過長。

          在現(xiàn)代 Web 開發(fā)中,開發(fā)者們更多的會借助 Canvas 提供的API去繪制上下文,可以自由繪制各種2D和3D圖形,創(chuàng)建富有視覺沖擊力的游戲場景和角色。Canvas的使用可以使得游戲能夠?qū)崿F(xiàn)流暢的動態(tài)效果和用戶交互。無論是簡單的小游戲還是復雜的游戲引擎,Canvas 都被廣泛應用。

          下面是做的一個簡單的對比試驗,可以很明顯感受到兩者的差距,分別使用SVG和Canvas繪制一個包含著100w個圓形的500*500的圖片,根據(jù)耗時計算對比,Canvas耗費的時間幾乎只有SVG的一半:

          三. 計算與渲染

          把動畫的一幀渲染出來,需要經(jīng)過以下步驟:

          1. 計算:處理網(wǎng)頁渲染邏輯,計算每個對象的狀態(tài)和位置。
          2. 渲染:真正把對象繪制出來。
          • JavaScript 調(diào)用 DOM API(包括 Canvas API)以進行渲染。
          • 瀏覽器(通常是另一個渲染線程)把渲染后的結果呈現(xiàn)在屏幕上的過程。

          之前提到過,在動畫設計和開發(fā)中,每幀只有16.67毫秒的時間用于渲染。這個數(shù)值是通過計算每秒60幀得出的平均每幀渲染時間。實際上,并不是所有設備都能夠穩(wěn)定地達到60FPS。因此,為了確保在不同設備上實現(xiàn)一致性的動畫效果,最好將每幀的渲染時間控制在10毫秒以內(nèi)。

          大家都知道,通常情況下,渲染的開銷遠大于計算(相差3~4個量級)。除非使用了一些時間復雜度很高的算法,否則不需要過于深入優(yōu)化計算環(huán)節(jié)。Canvas的渲染是在JavaScript引擎中執(zhí)行繪制邏輯,通過構建畫布在內(nèi)存中,并遍歷所有像素點的顏色,最終輸出到屏幕上。這種強大的功能可能會增加學習成本,但如今仍然有很多開發(fā)者選擇和接受Canvas,這要歸功于Canvas最大的優(yōu)勢:渲染性能的出色表現(xiàn)。

          四. Canvas渲染性能優(yōu)勢

          當談論圖形渲染技術時,就不得不提到DOM駐留模式和Canvas快速模式。

          DOM駐留模式

          DOM駐留模式是一種基于文檔對象模型(DOM)的渲染技術。在DOM駐留模式下,頁面的布局和樣式是由DOM樹來掌管的。當頁面需要更新時,瀏覽器會重新計算布局和樣式并重新渲染。此模式非常靈活,特別適用于處理動態(tài)頁面交互和多樣化的樣式控制。然而,由于需要頻繁地重新計算布局和樣式,對于復雜的圖形渲染任務來說,性能開銷相對較高。

          Canvas快速模式

          Canvas快速模式利用HTML5的Canvas元素進行圖形渲染。在這種模式下,開發(fā)者可以使用Canvas提供的2D或3D繪圖API直接在畫布上繪制圖形。相比于DOM駐留模式,Canvas快速模式更加高效。它不關心頁面的布局和樣式,而是在需要時只重繪受影響的部分。這樣就避免了頻繁的布局和樣式計算,提高了渲染性能。

          分層提高Canvas性能

          開發(fā)者們通過分析大量實際場景,總結出一套可以進一步提升Canvas性能的策略,即對變化較少和變化較多的內(nèi)容進行分開渲染。這種策略就是所謂的分層Canvas。它能夠顯著降低完全沒有必要的渲染性能開銷。分層渲染的思想被廣泛應用于各種圖形相關的領域,從古老的皮影戲、套色印刷術,到現(xiàn)代電影/游戲工業(yè)以及虛擬現(xiàn)實領域等等。而分層Canvas只是分層渲染思想在Canvas動畫上的一個基礎應用。

          分層Canvas的核心理念是,動態(tài)頁面中的每種元素(層)對于渲染頻率的需求是不同的。對于許多金融會計等大數(shù)據(jù)行業(yè)的從業(yè)者來說,主要數(shù)據(jù)內(nèi)容的變化頻率和幅度較大(他們通常面臨數(shù)據(jù)變動和頻繁計算),而背景表格樣式的變化頻率或幅度相對較小(基本不變,或者變化緩慢,或者僅在特定時機變化)。因此,需要頻繁更新和重繪數(shù)據(jù),但對于背景,可能只需要繪制一次,或者每隔200毫秒才重繪一次,而沒有必要每16毫秒就重繪一次。

          視野之外的繪制

          在許多情況下,Canvas 僅僅作為數(shù)據(jù)展示頁面的一部分,充當著一個“窗口”的角色。如果在每次數(shù)據(jù)更新時,都將所有數(shù)據(jù)完全繪制到 Canvas 上,很可能會出現(xiàn)大量內(nèi)容繪制到Canvas 范圍之外的情況。雖然調(diào)用了繪制 API,但實際上并沒有產(chǎn)生任何效果。

          因此,判斷對象是否位于 Canvas 范圍內(nèi)需要進行額外的計算(例如,需要通過對游戲角色的全局模型矩陣求逆來得出對象的世界坐標,這是一項相對耗時的操作),同時也會增加代碼的復雜性。因此,關鍵是是否需要這樣做。

          通過在本地代碼中進行測試,比較了在視野內(nèi)和視野外分別繪制100萬個圓的耗時。在視野內(nèi)繪制耗時8936ms,而在視野外繪制耗時2540ms。考慮到計算和繪制之間的耗時差距在3~4個數(shù)量級,因此通過計算來判斷并避免繪制視野外的內(nèi)容是一種非常有效的方法。

          五. Canvas的應用

          之前探討了SVG和Canvas的繪制性能差異以及Canvas常見的優(yōu)化方法。知道,對于使用快速模式渲染的Canvas來說,瀏覽器的每次重繪都是由代碼驅(qū)動的,無須進行多層解析,因此它的速度非常快。除了速度快之外,Canvas的靈活性也顯著優(yōu)于DOM。可以通過代碼精確控制何時以及如何繪制出期望的效果。

          在資源消耗方面,DOM的駐留模式意味著場景中的每一個新增元素都會導致額外的內(nèi)存消耗,而Canvas則沒有這個問題。這種差異在頁面元素數(shù)量增多時尤為明顯。

          在Canvas出現(xiàn)之前,前端渲染表格只能通過構建復雜的DOM來實現(xiàn)。然而,這種方式會導致瀏覽器性能成為Web應用的瓶頸,許多開發(fā)人員因此放棄了在瀏覽器上實現(xiàn)電子表格的想法。

          Canvas出現(xiàn)后,其快速模式帶來的出色性能優(yōu)勢成為了一大亮點,大量、復雜的DOM渲染處理所帶來的性能問題因此有了解決之道。

          回到電子表格的應用場景,現(xiàn)在已經(jīng)出現(xiàn)了使用Canvas繪制畫布的表格組件。這類組件在渲染數(shù)據(jù)層時無須重復創(chuàng)建和銷毀DOM元素,而且在畫布的繪制過程中受到的限制也比DOM元素渲染更少。其中,葡萄城公司的純前端表格控件——SpreadJS就用到了Canvas實現(xiàn)表格繪制,除了表格之外,Canvas也為數(shù)字孿生可視化大屏、頁面游戲等應用場景帶來了變革(如下圖所示)。

          六、總結

          本文通過介紹Canvas的原理、Canvas的重要性、Canvas在計算與渲染上的作用、Canvas渲染性能優(yōu)勢和Canvas的應用這五個部分,全面而系統(tǒng)地闡述了HTML Canvas在高性能渲染方面的相關知識和技巧。希望讀者通過閱讀本文能夠深入了解Canvas的基本原理和特性,認識到Canvas在Web開發(fā)中的重要性,并掌握Canvas在計算與渲染上的作用。

          開發(fā)vue項目,有時會遇到需要頁面截圖或指定區(qū)域截圖需求。今天給大家推薦2個超贊的截圖插件。

          1、html2canvas

          一款超強大的Javascript頁面截圖類庫,star高達21.4K+。支持h5頁面截圖、區(qū)域截圖及跨域截圖等功能。

          截圖效果

          下面講一下如何在vue中使用html2canvas截圖。

          安裝

          $ npm i html2canvas -S

          使用組件

          <template>
            <div class="shot-wrapper">
              <!-- 要截圖的區(qū)域,動態(tài)生成 -->
              <div class="shot-area" id="content" ref="imageToFile"></div>
              
              <!-- 截圖生成圖片 -->   
              <img :src="img" v-if="img"/>
              
              <button type="button" class="shot-btn" @click="screenShot">開始截圖</button>
            </div>
          </template>
          <script>
            import html2canvas from 'html2canvas'
            export default {
              data() {
                return {
                  img: ""
                }
              },
              methods: {
                screenShot() {
                  html2canvas(this.$refs.imageToFile, {
                    width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth,
                    height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight,
                  }).then((canvas) => {// 第一個參數(shù)是需要生成截圖的元素,第二個是自己需要配置的參數(shù),寬高等
                    this.img = canvas.toDataURL('image/png');
                  })
                },
              },
              components: {
                html2canvas
              }
            }
          </script>

          如果大家想要了解更多用法,可以自行去官網(wǎng)查閱資料哈~~

          # 文檔地址
          http://html2canvas.hertzen.com/
          
          # 倉庫地址
          https://github.com/niklasvh/html2canvas

          2、Dom-To-Image

          一款超不錯的將任意DOM節(jié)點轉換為用JavaScript編寫的矢量(SVG)或光柵(PNG或JPEG)圖像的庫。star高達6.4K+

          下面介紹下在vue中如何使用domtoimage進行截圖。

          安裝

          $ npm i dom-to-image -S

          使用組件

          <template>
            <div class="domtoimage-wrapper">
              <!-- 要截圖的區(qū)域,動態(tài)生成 -->
              <div class="dom-area" id="my-node"></div>
              
              <!-- 截圖生成圖片 -->   
              <img :src="img" v-if="img"/>
              
              <button type="button" class="shot-btn" @click="shotPic">開始截圖</button>
            </div>
          </template>
          
          <script>
            import domtoimage from 'dom-to-image'
            export default {
              data() {
                return {
                  img: ""
                }
              },
              methods: {
                shotPic() {
                  let node = document.getElementById('my-node');
                  domtoimage.toPng(node)
                    .then((dataUrl) => {
                      this.img = dataUrl;
                    })
                    .catch(function (error) {
                      console.error('oops, something went wrong!', error);
                    });
                }
              },
              components: {
                domtoimage
              }
            }
          </script>

          domtoimage主要的屬性

          • filter:過濾器節(jié)點中默寫不需要的節(jié)點;
          • bgcolor:圖片背景顏色;
          • height,width:圖片寬高;
          • style:傳入節(jié)點的樣式,可以是任何有效的樣式;
          • quality:圖片的質(zhì)量,也就是清晰度;
          • cacheBust:將時間戳加入到圖片的url中,相當于添加新的圖片;
          • imagePlaceholder:圖片生成失敗時,在圖片上面的提示,相當于img標簽的alt;

          domtoimage主要的方法

          • domtoimage.toPng(...); 將節(jié)點轉化為png格式的圖片;
          • domtoimage.toJpeg(...); 將節(jié)點轉化為jpg格式的圖片;
          • domtoimage.toSvg(...); 將節(jié)點轉化為svg格式的圖片,生成的圖片的格式都是base64格式;
          • domtoimage.toBlob(...); 將節(jié)點轉化為二進制格式,這個可以直接將圖片下載;
          • domtoimage.toPixelData(...); 獲取原始像素值,以Uint8Array 數(shù)組的形式返回;

          最后附上項目地址,可以去了解更多信息。

          # 倉庫地址
          https://github.com/tsayen/dom-to-image

          ok,就介紹到這里。如果大家有其它優(yōu)秀的Vue截圖組件,歡迎分享交流!


          主站蜘蛛池模板: 久久精品无码一区二区无码| 日韩色视频一区二区三区亚洲| 午夜福利一区二区三区在线观看| 亚洲字幕AV一区二区三区四区| 国产福利视频一区二区| 蜜臀Av午夜一区二区三区| 国产在线视频一区二区三区| 国产精品制服丝袜一区| 中文字幕精品一区二区精品| 一区二区三区日本视频| 日韩在线视频一区| 天堂一区二区三区在线观看| 亚洲一区免费视频| 亚洲一区在线观看视频| 中文字幕视频一区| 水蜜桃av无码一区二区| 激情内射日本一区二区三区| 中文字幕在线播放一区| 国产在线观看一区二区三区精品| 国产精品一区三区| 国产午夜精品一区理论片| 国产在线一区二区在线视频| 国产区精品一区二区不卡中文| 亚洲一区二区三区无码中文字幕| 国产亚洲自拍一区| 无码精品人妻一区二区三区漫画| 高清国产AV一区二区三区| 一区二区三区四区精品视频| 无码人妻精品一区二区三区久久| 香蕉免费一区二区三区| 麻豆AV一区二区三区| 亚洲欧美日韩一区二区三区在线| 国模一区二区三区| 精品综合一区二区三区| 高清一区二区三区| 国精品无码一区二区三区在线| 亚洲乱色熟女一区二区三区丝袜 | 久久se精品一区精品二区| 精品一区二区久久| 国产主播在线一区| 精品视频一区二区三区在线播放|