HTML5 學習總結（四）——canvas繪圖、WebGL、SVG

時間 2019-11-18

標籤 html5 html 學習總結 canvas 繪圖 webgl svg 欄目 HTML5 简体版

原文原文鏈接

HTML5 學習總結（四）——canvas繪圖、WebGL、SVG

1、Canvas

canvas是HTML5中新增一個HTML5標籤與操做canvas的javascript API，它能夠實如今網頁中完成動態的2D與3D圖像技術。<canvas> 標記和 SVG以及 VML 之間的一個重要的不一樣是，<canvas> 有一個基於 JavaScript 的繪圖 API，而 SVG 和 VML 使用一個 XML 文檔來描述繪圖。SVG 繪圖很容易編輯與生成，但功能明顯要弱一些。css

canvas能夠完成動畫、遊戲、圖表、圖像處理等原來須要Flash完成的一些功能。、html

瀏覽器支持狀況以下：html5

1.一、建立canvas元素

<canvas id="can" width="800" height="600">不支持Canvas</canvas>java

以上代碼建立了一個寬度爲800像素，高度爲600像素的canvas。不建議使用CSS樣式指定寬度和高度。
canvas標籤中間的內容爲替代顯示內容，當瀏覽器不支持canvas標籤時會顯示出來。git

建立了canvas元素後，要在canvas元素上面繪製圖象，首先必須獲取canvas環境上下文：
canvas.getContext(畫布上繪製的類型)
2d：表示2維
experimental-webgl：表示試驗版3維
webgl：表示3維github

Hello Wolrd示例代碼：web

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas繪圖1</title> </head> <body> <canvas id="canvas1" width="800" height="600"></canvas> <script type="text/javascript"> //得到畫布元素 var canvas1=document.getElementById("canvas1"); //得到2維繪圖的上下文 var ctx=canvas1.getContext("2d"); //設置線寬  ctx.lineWidth=10; //設置線的顏色  ctx.strokeStyle="blue"; //將畫筆移動到00點  ctx.moveTo(0,0); //畫線到800，600的座標  ctx.lineTo(800,600); //執行畫線  ctx.stroke(); </script> </body> </html>

運行效果：canvas

在頁面上就顯示了一條直線，另存爲後就是一張背景透明的png圖片。瀏覽器

練習：畫一個100X100的正方形在畫布正中央

1.二、畫線

context.moveTo(x,y)

把畫筆移動到x,y座標，創建新的子路徑。

context.lineTo(x,y)
創建上一個點到x,y座標的直線，若是沒有上一個點，則等同於moveTo(x,y)，把（x,y）添加到子路徑中。

context.stroke()
描繪子路徑

            //設置線寬 ctx.lineWidth = 10; //設置線的顏色 ctx.strokeStyle = "blue"; //將畫筆移到x0,y0處  context.moveTo(x0, y0); //從x0,y0到x1,y1畫一條線  ontext.lineTo(x1, y1); //從x1,y1到x2,y2畫條線  ontext.lineTo(x2, y2); //執行填充  ontext.fill(); //執行畫線 context.stroke();

結合javascript事件實現鼠標自由劃線：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>canvas繪圖2</title> </head> <body> <canvas id="canvas1" width="800" height="600"></canvas> <script type="text/javascript"> //得到畫布元素 var canvas1 = document.getElementById("canvas1"); //得到2維繪圖的上下文 var ctx = canvas1.getContext("2d"); //設置線寬  ctx.lineWidth = 10; //設置線的顏色  ctx.strokeStyle = "blue"; canvas1.onmousemove=function(e){ //劃線到當前客戶端的x與y座標  ctx.lineTo(e.clientX, e.clientY); //執行畫線  ctx.stroke(); } </script> </body> </html>

運行效果：

移動手機端：

View Code

1.2.一、路徑與closePath，beginPath,fill

canvas的環境上下文中總有惟一一個路徑，路徑包含多個子路徑，這些子路徑能夠當作是一系列點的集合。
beginPath()

清空子路徑，通常用於開始路徑的建立。在幾回循環地建立路徑的過程當中，每次開始建立時都要調用beginPath函數。

closePath()

若是當前子路徑是打開的，就關閉它。不然把子路徑中的最後一個點和路徑中的第一個點鏈接起來，造成閉合迴路。

canvas繪圖有兩種模式，一種是fill，一種是stroke,fill是填充，stroke是描邊線，fillstyle,strokeStyle指定繪圖樣式

示例代碼：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>路徑與closePath，beginPath,fill</title> </head> <body> <canvas id="canvas1" width="600" height="600"></canvas> <script type="text/javascript"> //得到畫布元素 var canvas1 = document.getElementById("canvas1"); //得到2維繪圖的上下文 var ctx = canvas1.getContext("2d"); //設置線寬  ctx.lineWidth = 10; //設置線的顏色  ctx.strokeStyle = "blue"; ctx.moveTo(0,0); //移動畫筆到0,0點  ctx.lineTo(300,300); //畫線到300,300的位置  ctx.stroke(); //執行描邊  ctx.beginPath(); //清空子路徑，通常用於開始路徑的建立  ctx.strokeStyle = "red"; ctx.moveTo(300,300); ctx.lineTo(0,595); //畫線到0,300的位置  ctx.lineTo(595,595); //畫線到右下角  ctx.closePath(); //閉合 //ctx.stroke(); //執行描邊  ctx.fillStyle="lightgreen"; //設置填充顏色  ctx.fill(); //執行填充 </script> </body> </html>

運行效果：

練習：試着完成一個象棋或圍棋棋盤。

1.三、繪製矩形

context.strokeRect(x,y,width,height)
以x,y爲左上角，繪製寬度爲width,高度爲height的矩形。

context.fillRect(x,y,width,height)
以x,y爲左上角，填充寬度爲width,高度爲height的矩形。

context.clearRect(x,y,width,height)
清除以x,y爲左上角，寬度爲width,高度爲height的矩形區域。

示例代碼：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>繪製矩形</title> </head> <body> <canvas id="canvas1" width="600" height="600"></canvas> <script type="text/javascript"> //得到畫布元素 var canvas1 = document.getElementById("canvas1"); //得到2維繪圖的上下文 var ctx = canvas1.getContext("2d"); //設置線寬  ctx.lineWidth = 10; //設置線的顏色  ctx.strokeStyle ="dodgerblue"; //畫一個空心的矩形，  ctx.strokeRect(0,0,600,600); //畫一個實心矩形  ctx.fillStyle="aquamarine"; ctx.fillRect(200,200,200,200); //清除指定的矩形區域  ctx.clearRect(250,250,100,100); </script> </body> </html>

運行效果：

1.四、繪製圓弧

context.arc(x,y,radius,startAngle,endAngle,anticlockwise)

arc方法用來繪製一段圓弧路徑，以(x,y)圓心位置radius爲半徑、startAngle爲起始弧度、endAngle爲終止弧度來，而在畫圓弧時的旋轉方向則由最後一個參數 anticlockwise 來指定，若是爲 true 就是逆時針，false 則爲順時針，Math.PI * 2 恰好爲一週。

示例代碼：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>繪製圓弧</title> </head> <body> <canvas id="canvas1" width="600" height="600"></canvas> <script type="text/javascript"> //得到畫布元素 var canvas1 = document.getElementById("canvas1"); //得到2維繪圖的上下文 var ctx = canvas1.getContext("2d"); //設置線寬  ctx.lineWidth = 10; //設置線的顏色  ctx.strokeStyle ="dodgerblue"; //畫一段圓弧,300,300是圓心，200是半徑，0是超始角度，Math.PI是結束角度,是否逆時鐘  ctx.arc(300,300,200,0,Math.PI,false); //閉合  ctx.closePath(); ctx.stroke(); ctx.beginPath(); ctx.fillStyle="aquamarine"; ctx.arc(300,300,100,0,Math.PI*2,false); ctx.fill(); </script> </body> </html>

運行效果：

練習：

a、模擬鐘錶的時，分，秒

b、模擬水波，一個黑色的屏幕，多個從中心隨機產生彩色的圈不斷的放大，接觸到屏幕結束。

1.五、繪製圖像

context.drawImage(image,x,y)

把image圖像繪製到畫布上x,y座標位置。

context.drawImage(image,x,y,w,h)

把image圖像繪製到畫布上x,y座標位置，圖像的寬度是w,高度是h。

context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
截取image圖像以sx,sy爲左上角座標，寬度爲sw,高度爲sh的一塊矩形區域繪製到畫布上以dx,dy座標位置，圖像寬度是dw,高度是dh。
其中image能夠是htmlImageElement元素，htmlcanvasElement元素，htmlVideoElement元素

示例代碼：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>繪製圖像</title> </head> <body> <canvas id="canvas1" width="600" height="600"></canvas> <img src="img/apple.png" id="apple" hidden="hidden" /> <script type="text/javascript"> //必須當頁面中的圖片資源加載成功  window.onload = function() { //得到畫布元素 var canvas1 = document.getElementById("canvas1"); //得到2維繪圖的上下文 var ctx = canvas1.getContext("2d"); //設置線寬  ctx.lineWidth = 10; //設置線的顏色  ctx.strokeStyle = "dodgerblue"; ctx.moveTo(0,0); ctx.strokeRect(0,0,600,600); //圖片 var apple = document.getElementById("apple"); //將圖像繪製到畫布的，圖片的左上角  ctx.drawImage(apple, 300-52, 300-63); } </script> </body> </html>

運行效果：

1.六、繪製文字

context.fillText(text,x,y,[maxWidth])

在canvas上填充文字，text表示須要繪製的文字，x,y分別表示繪製在canvas上的橫，縱座標，最後一個參數可選，表示顯示文字的最大寬度，防止文字顯示溢出。

context.strokeText(text,x,y,[maxWidth])

在canvas上描邊文字，參數的意義同fillText
使用context.font屬性設置字體
context.font='italic bolder 48px 黑體';

示例代碼：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>繪製文字</title> </head> <body> <canvas id="canvas1" width="600" height="600"></canvas> <img src="img/apple.png" id="apple" hidden="hidden" /> <script type="text/javascript"> //必須當頁面中的圖片資源加載成功  window.onload = function() { //得到畫布元素 var canvas1 = document.getElementById("canvas1"); //得到2維繪圖的上下文 var ctx = canvas1.getContext("2d"); //設置線寬  ctx.lineWidth = 1; //設置線的顏色  ctx.strokeStyle = "dodgerblue"; ctx.moveTo(0,0); ctx.strokeRect(0,0,600,600); //繪製文字 //描邊  ctx.font="50px microsoft yahei"; ctx.strokeText("Hello Zhangguo",20,100); //填充  ctx.fillStyle= ctx.fillText("Hello Zhangguo",20,200); } </script> </body> </html>

運行結果：

1.七、隨機顏色與簡單動畫

主要結合隨機方法與定時器、時鐘實現簡單的動畫。

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>隨機顏色與簡單動畫</title> </head> <body> <canvas id="canvas1" width="1000" height="650"></canvas> <img src="img/apple.png" id="apple" hidden="hidden" /> <script type="text/javascript"> var magicCircle = { randomColor: function() { return "#" + parseInt(Math.random() * 16777216).toString(16); }, getNum: function(min, max) { return parseInt(Math.random() * (max - min)) + min; }, r: 10, run: function() { //得到畫布元素 this.canvas1 = document.getElementById("canvas1"); //得到2維繪圖的上下文 this.ctx = this.canvas1.getContext("2d"); //運行  setInterval(this.draw, 100); this.bindEvent(); }, draw: function() { magicCircle.ctx.beginPath(); magicCircle.ctx.lineWidth = magicCircle.getNum(1,10); magicCircle.ctx.strokeStyle = magicCircle.randomColor(); magicCircle.ctx.arc(magicCircle.getNum(1,1000), magicCircle.getNum(1,600), magicCircle.r, 0, Math.PI * 2); magicCircle.ctx.stroke(); magicCircle.r += 10; if(magicCircle.r > 300) magicCircle.r = 10; }, bindEvent:function() { this.canvas1.onmousemove=function(e){ magicCircle.ctx.lineWidth = magicCircle.getNum(1,10); magicCircle.ctx.strokeStyle = magicCircle.randomColor(); magicCircle.ctx.arc(e.clientX, e.clientY, magicCircle.r, 0, Math.PI * 2); magicCircle.ctx.stroke(); magicCircle.r += 10; if(magicCircle.r > 300) magicCircle.r = 10; } } }; magicCircle.run(); </script> </body> </html>

運行效果：

2、WebGL

WebGL（全寫Web Graphics Library）是一種3D繪圖標準，這種繪圖技術標準容許把JavaScript和OpenGL ES 2.0結合在一塊兒，經過增長OpenGL ES 2.0的一個JavaScript綁定，WebGL能夠爲HTML5 Canvas提供硬件3D加速渲染，這樣Web開發人員就能夠藉助系統顯卡來在瀏覽器裏更流暢地展現3D場景和模型了，還能建立複雜的導航和數據視覺化。顯然，WebGL技術標準免去了開發網頁專用渲染插件的麻煩，可被用於建立具備複雜3D結構的網站頁面，甚至能夠用來設計3D網頁遊戲等等。

WebGL完美地解決了現有的Web交互式三維動畫的兩個問題：

第一，它經過HTML腳本自己實現Web交互式三維動畫的製做，無需任何瀏覽器插件支持;

第二，它利用底層的圖形硬件加速功能進行的圖形渲染，是經過統一的、標準的、跨平臺的OpenGL接口實現的。

通俗說WebGL中canvas繪圖中的3D版本。由於原生的WebGL很複雜，咱們常常會使用一些三方的庫，如three.js等，這些庫多數用於HTML5遊戲開發。

Three.js的示例代碼：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Three.js</title> </head> <body> <script src="js/three.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); var geometry = new THREE.CubeGeometry(1, 1, 1); var material = new THREE.MeshBasicMaterial({ color: 0x0000ff }); var cube = new THREE.Mesh(geometry, material); scene.add(cube); camera.position.z = 5; function render() { requestAnimationFrame(render); cube.rotation.x += 0.1; cube.rotation.y += 0.1; renderer.render(scene, camera); } render(); </script> </body> </html>

three.js示例運行結果：

2.一、HTML5遊戲開發

隨着HTML5的發展與硬件性能的提高HTML5遊戲開發愈來愈受到遊戲開發者的重視，由於WebGL存在必定的複雜度，全部產生了許多優秀的開源HTML5遊戲引擎，下面是github上開源免費的HTML5遊戲引擎：

Name	Updated Time	Watch	Star	Fork	Commits	Contributors
Three.js	2016/3/28	1590	24041	7768	14825	588
Phaser	2016/2/18	837	11782	4095	4423	206
Pixi.js	2016/3/17	656	10063	1942	2860	161
egret	2016/3/30	215	1275	303	4268	25
enchantjs	2016/1/4	185	1445	301	1683	27
crafty	2016/3/21	134	2050	473	1807	106
turbulenz	2015/11/23	271	2544	406	1737	13
cocos2d-js	2016/3/30	162	1207	469	4559	45
playcanvas	2016/3/30	164	1784	368	5142	16
melonjs	2016/3/30	13	1579	371	3907	40
quintus	2016/2/3	136	1023	412	256	33
Hilo	2016/2/3	173	2449	340	20	2

2.2.一、Cocos2D-HTML5

開源，免費的HTML5 2D遊戲開發框架，Cocos2D擁有幾個主要版本，包括Cocos2D-iPhone、Cocos2D-X，以及被社區廣泛看好的Cocos2D-HTML5和JavaScriptbindings for Cocos2D-X。CocoStudio工具集是開源遊戲引擎。特色：與Cocos2d的API相似，容易上手、中文文檔齊全，資料豐富、基於MIT協議的開源引擎。它由國內Cocos2d-x核心團隊主導開發和維護，行業領袖、HTML5大力推進者Google爲這個項目提供支持。

github:https://github.com/cocos2d/cocos2d-html5

官網：http://www.cocos.com/

HelloWorld示例：

<!DOCTYPE html> <html> <head> <title>Hello Cocos2d-JS</title> </head> <body> <canvas id="gameCanvas" width="800" height="450"></canvas> <script type="text/javascript" src="cocos2d-js-v3.12-lite.js" charset="UTF-8"></script> <script type="text/javascript"> window.onload = function(){ cc.game.onStart = function(){ //load resources  cc.LoaderScene.preload(["HelloWorld.png"], function () { var MyScene = cc.Scene.extend({ onEnter:function () { this._super(); var size = cc.director.getWinSize(); var sprite = cc.Sprite.create("HelloWorld.png"); sprite.setPosition(size.width / 2, size.height / 2); sprite.setScale(0.8); this.addChild(sprite, 0); var label = cc.LabelTTF.create("Hello World", "Arial", 40); label.setPosition(size.width / 2, size.height / 2); this.addChild(label, 1); } }); cc.director.runScene(new MyScene()); }, this); }; cc.game.run("gameCanvas"); }; </script> </body> </html>

運行結果：

2.2.二、Egret（白鷺引擎）

是一個基於TypeScript語言開發的HTML5遊戲引擎，圍住神經貓就是用這個框架開發的。

官網：http://www.egret.com/

特色：

a)、基於TypeScript及JavaScript技術，支持Flash到Egret高效轉換，引擎、工具、運行時完整工做流
b)、跨平臺：HTML5,iOS,Android,Windows Phone
c)、全中文文檔：文檔與開發者社區齊全
d)、開源免費，BSD開源協議、任意定製及擴展

3、SVG

SVG可縮放矢量圖形（Scalable Vector Graphics）是基於可擴展標記語言（XML），用於描述二維矢量圖形的一種圖形格式。SVG是W3C("World Wide Web ConSortium" 即 " 國際互聯網標準組織")在2000年8月制定的一種新的二維矢量圖形格式，也是規範中的網絡矢量圖形標準。SVG嚴格聽從XML語法，並用文本格式的描述性語言來描述圖像內容，所以是一種和圖像分辨率無關的矢量圖形格式。SVG 於 2003 年 1 月 14 日成爲 W3C 推薦標準。

特色：

1．任意放縮
用戶能夠任意縮放圖像顯示，而不會破壞圖像的清晰度、細節等。
2．文本獨立
SVG圖像中的文字獨立於圖像，文字保留可編輯和可搜尋的狀態。也不會再有字體的限制，用戶系統即便沒有安裝某一字體，也會看到和他們製做時徹底相同的畫面。
3．較小文件
整體來說，SVG文件比那些GIF和JPEG格式的文件要小不少，於是下載也很快。
4．超強顯示效果
SVG圖像在屏幕上老是邊緣清晰，它的清晰度適合任何屏幕分辨率和打印分辨率。
5．超級顏色控制
SVG圖像提供一個1600萬種顏色的調色板，支持ICC顏色描述文件標準、RGB、線X填充、漸變和蒙版。
6．交互X和智能化。SVG面臨的主要問題一個是如何和已經佔有重要市場份額的矢量圖形格式Flash競爭的問題，另外一個問題就是SVG的本地運行環境下的廠家支持程度。

瀏覽器支持：

Internet Explorer9，火狐，谷歌Chrome，Opera和Safari都支持SVG。
IE8和早期版本都須要一個插件 - 如Adobe SVG瀏覽器，這是免費提供的。

3.一、SVG Hello Wrold

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>SVG Hello World</title> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="100" r="30" stroke="blue" stroke-width="2" fill="red" /> </svg> </body> </html>

運行結果：

svg是一個新增長標籤，xmlns是命名空間，version是svg的版本，circle標籤就是對svg要展現的圖像進行描述，cx與cy表示位置，r表示半徑，stroke是描邊樣式，stroke-width就線寬，fill是填充樣式。瀏覽器兼容性很好：

3.二、多種引入SVG的方法

SVG 文件可經過如下標籤嵌入 HTML 文檔：<embed>、<object> 或者 <iframe>。
SVG的代碼能夠直接嵌入到HTML頁面中，或您能夠直接連接到SVG文件

引入方式以下：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>引入SVG的方法</title> <style type="text/css"> body{ background:url(me.svg); } </style> </head> <body> <h2>embed</h2> <embed src="me.svg" type="image/svg+xml" width="108" height="108" /> 優點：全部主要瀏覽器都支持，並容許使用腳本 缺點：不推薦在HTML4和XHTML中使用（但在HTML5容許） <h2>object</h2> <object data="me.svg" type="image/svg+xml" width="108" height="108"></object> 優點：全部主要瀏覽器都支持，並支持HTML4，XHTML和HTML5標準 缺點：不容許使用腳本。 <h2>iframe</h2> <iframe src="me.svg" frameborder="0" width="108" height="108"></iframe> 優點：全部主要瀏覽器都支持，並容許使用腳本 缺點：不推薦在HTML4和XHTML中使用（但在HTML5容許） <h2>直接嵌入</h2> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="108" height="108"> <circle cx="54" cy="54" r="50" stroke="blue" stroke-width="2" fill="blue" /> </svg> 在Firefox、Internet Explorer九、谷歌Chrome和Safari中，你能夠直接在HTML嵌入SVG代碼。 注意：SVG不能直接嵌入到Opera。 <h2>image</h2> <img src="me.svg" width="108" height="108" /> </body> </html>

運行結果：

3.三、畫直線

示例代碼：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Line</title> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500"> <line x1="0" y1="0" x2="500" y2="500" style="stroke:rgb(0,0,255);stroke-width:3" /> </svg> </body> </html>

參數：

x1 屬性在 x 軸定義線條的開始
y1 屬性在 y 軸定義線條的開始
x2 屬性在 x 軸定義線條的結束
y2 屬性在 y 軸定義線條的結束

運行結果：

3.四、畫橢圓

示例代碼：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>橢圓</title> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" hidden="500"> <ellipse cx="300" cy="80" rx="100" ry="50" style="fill:yellow;stroke:dodgerblue;stroke-width:5" /> </svg> </body> </html>

參數：

CX屬性定義的橢圓中心的x座標
CY屬性定義的橢圓中心的y座標
RX屬性定義的水平半徑
RY屬性定義的垂直半徑

運行結果：

3.五、文本與矩形

示例代碼：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>文本與矩形</title> </head> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="500"> <text x="0" y="50" fill="blue" style="font-size:30px; font-family: 'microsoft yahei';">My Teacher Zhangguo</text> <rect x="40" y="60" width="260" height="260" style="fill:blue;stroke:pink;stroke-width:5; fill-opacity:0.1;stroke-opacity:0.9" /> </svg> </body> </html>

運行結果：

3.六、向下兼容與圖標

IE8並不直接兼容SVG，若是須要顯示則可使用插件，若是不使用插件也有向下兼容的辦法。

示例代碼：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>向下兼容與圖標</title> </head> <body> <svg width="78" height="78"> <image xlink:href="money.svg" width="78" height="78" src="money.png"></image> </svg> </body> </html>