canvas繪圖、WebGL、SVG

本文轉載自查看原文 2016-11-22 19:46 3749 canvas/ 前端

一、Canvas

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

canvas可以完成動畫、游戲、圖表、圖像處理等原來需要Flash完成的一些功能。、

瀏覽器支持情況如下：

1.1、創建canvas元素

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

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

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

Hello Wolrd示例代碼：

<!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>

運行效果：

在頁面上就顯示了一條直線，另存為后就是一張背景透明的png圖片。

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

1.2、畫線

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.1、路徑與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>

運行效果：

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

代碼如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>象棋</title>
    </head>
    <body>
        <canvas id="cans" width="600" height="600"></canvas>
        <script type="text/javascript">
            var shows={
                one:function(){
                     this.cans=document.getElementById("cans");
                     this.cts=cans.getContext("2d");
                     shows.two();
                     shows.three();
                     
                },
                two:function()
                {
                    shows.cts.beginPath();
                    shows.cts.lineWidth=3;
                    shows.seven();
                    shows.cts.strokeRect(20,20,280,360);
                },
                three:function()
                {
                    for (var i=1;i<=7;i++) {
                    shows.cts.beginPath();
                    shows.cts.lineWidth=3;
                    shows.seven();
                    shows.cts.moveTo(i*35+20,20);
                    shows.cts.lineTo(i*35+20,180);
                    shows.cts.stroke();
                    }
                    for (var i=1;i<=8;i++) {
                    shows.cts.beginPath();
                    shows.cts.lineWidth=3;
                    shows.seven();
                    shows.cts.moveTo(20,i*40+20);
                    shows.cts.lineTo(300,i*40+20);
                    shows.cts.stroke();
                    }
                    for (var i=1;i<=7;i++) {
                    shows.cts.beginPath();
                    shows.cts.lineWidth=3;
                    shows.seven();
                    shows.cts.moveTo(i*35+20,220);
                    shows.cts.lineTo(i*35+20,380);
                    shows.cts.stroke();
                    }
                    
                    shows.cts.lineWidth=3;
                    shows.seven();
                    shows.four(125,20,195,100);
                    shows.four(195,20,125,100);
                    shows.four(125,300,195,380);
                    shows.four(195,300,125,380);
                    
                    shows.cts.lineWidth=1;
                    shows.seven();
                    shows.six(50,80,50,95,35,95);
                    shows.six(60,80,60,95,75,95);
                    shows.six(260,80,260,95,245,95);
                    shows.six(270,80,270,95,285,95);
                    shows.six(50,120,50,105,35,105);
                    shows.six(60,120,60,105,75,105);
                    shows.six(260,120,260,105,245,105);
                    shows.six(270,120,270,105,285,105);
                    shows.six(25,120,25,135,40,135);
                    shows.six(25,160,25,145,40,145);
                    shows.six(70,135,85,135,85,120);
                    shows.six(70,145,85,145,85,160);    
                    shows.six(95,120,95,135,110,135);
                    shows.six(95,160,95,145,110,145);
                    shows.six(155,120,155,135,140,135);
                    shows.six(155,160,155,145,140,145);
                    shows.six(165,120,165,135,180,135);
                    shows.six(165,160,165,145,180,145);
                    shows.six(225,120,225,135,210,135);
                    shows.six(225,160,225,145,210,145);
                    shows.six(235,120,235,135,250,135);
                    shows.six(235,160,235,145,250,145);
                    shows.six(295,120,295,135,280,135);
                    shows.six(295,160,295,145,280,145);
                    
                    shows.six(50,280,50,295,35,295);
                    shows.six(60,280,60,295,75,295);
                    shows.six(260,280,260,295,245,295);
                    shows.six(270,280,270,295,285,295);
                    shows.six(50,320,50,305,35,305);
                    shows.six(60,320,60,305,75,305);
                    shows.six(260,320,260,305,245,305);
                    shows.six(270,320,270,305,285,305);
                    
                    shows.six(25,240,25,255,40,255);
                    shows.six(25,280,25,265,40,265);
                    shows.six(70,255,85,255,85,240);
                    shows.six(70,265,85,265,85,280);    
                    shows.six(95,240,95,255,110,255);
                    shows.six(95,280,95,265,110,265);
                    
                    shows.six(155,240,155,255,140,255);
                    shows.six(155,280,155,265,140,265);
                    shows.six(165,240,165,255,180,255);
                    shows.six(165,280,165,265,180,265);
                    shows.six(225,240,225,255,210,255);
                    shows.six(225,280,225,265,210,265);
                    shows.six(235,240,235,255,250,255);
                    shows.six(235,280,235,265,250,265);
                    shows.six(295,240,295,255,280,255);
                    shows.six(295,280,295,265,280,265);
                    shows.five();
                },
                four:function(a,b,c,d)
                {
                    shows.cts.beginPath();
                    shows.cts.moveTo(a,b);
                    shows.cts.lineTo(c,d);
                    shows.cts.stroke();
                },
                five:function()
                {
                    
                    shows.cts.font="30px microsoft yahei";
                    shows.seven();
                    shows.cts.translate(250, 185);
                    shows.cts.rotate(Math.PI / 2);
                    shows.cts.fillText("楚", 0, 0);
                    shows.cts.restore();
                    shows.cts.save();
                    shows.cts.translate(0, 65);
                    shows.cts.rotate(Math.PI *2);
                    shows.cts.fillText("河", 0, 0);
                    shows.cts.restore();
                    shows.cts.save();
                    shows.cts.translate(30, 180);
                    shows.cts.rotate(Math.PI );
                    shows.cts.fillText("漢", 0, 0);
                    shows.cts.restore();
                    shows.cts.save();
                    shows.cts.translate(30, 120);
                    shows.cts.rotate(Math.PI );
                    shows.cts.fillText("界", 0, 0);
                    shows.cts.restore();
                    shows.cts.save();
                 },
                 six:function(a,b,c,d,e,f)
                 {
                     shows.cts.beginPath();
                    shows.cts.moveTo(a,b);
                    shows.cts.lineTo(c,d);
                    shows.cts.lineTo(e,f);
                    shows.cts.stroke();
                 },
                 seven:function()
                 {
                 var a= "#" + parseInt(Math.random() * 16777216).toString(16);
                 shows.cts.strokeStyle=a;
                 }
                
            };
            shows.one();
        </script>
    </body>
</html>

1.3、繪制矩形

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.4、繪制圓弧

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.5、繪制圖像

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.6、繪制文字

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.7、隨機顏色與簡單動畫

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

<!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>

運行效果：

二、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.1、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.1、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.2、Egret（白鷺引擎）

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

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

特點：

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

三、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.1、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.2、多種引入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 Explorer9、谷歌Chrome和Safari中，你可以直接在HTML嵌入SVG代碼。 注意：SVG不能直接嵌入到Opera。
        <h2>image</h2>
        <img src="me.svg" width="108" height="108" />
    </body>

</html>

運行結果：

3.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.4、畫橢圓

示例代碼：

<!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.5、文本與矩形

示例代碼：

<!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.6、向下兼容與圖標

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>

運行結果：

參數：

image本身就是svg中引入外部圖像的元素，剛好在ie8下又能被解析。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 HTML5 學習總結（四）——canvas繪圖、WebGL、SVG HTML5 學習總結（四）——canvas繪圖、WebGL、SVG Html5中 SVG Canvas，WebGl 的區別前端繪圖方式Canvas和SVG的區別數據可視化實現技術（canvas/svg/webGL） canvas svg webgl threejs d3js 的區別 CSS3、SVG、Canvas、WebGL動畫精選整理三種圖表技術SVG、Canvas、WebGL 3D比較 H5中canvas和svg繪圖方式介紹 H5新特性——--第三方繪圖工具庫 echarts(canvas)---SVG繪圖