HTML學習總結（四）【canvas繪圖、WebGL、SVG】

時間  2019-11-09
標籤 html 學習 總結 canvas 繪圖 webgl svg 欄目 HTML 简体版
原文   原文鏈接

 

1、Canvas

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

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

瀏覽器支持狀況以下：html

 

1.一、建立canvas元素

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

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

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

 

1.二、畫線

context.moveTo(x,y)git

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

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

context.stroke() 
描繪子路徑canvas

 

示例代碼： 

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="800px" height="600px">            
        </canvas>        
    </body>
    <script type="text/javascript">       
        //獲取畫布
        var canvas1=document.getElementById("canvas1");
        //獲取上下文
        var ctx1=canvas1.getContext("2d");
        //線條的寬度爲5
        ctx1.lineWidth=5;
        //設置填充顏色
        ctx1.fillStyle="brown";
        ctx1.moveTo(50,50);
        ctx1.lineTo(300,50);
        ctx1.lineTo(300,300);
        //閉合
        ctx1.closePath();
        //執行填充
        ctx1.fill();
        
        ctx1.beginPath();
        //設置描邊顏色
        ctx1.strokeStyle="burlywood";
        ctx1.moveTo(250,250);
        ctx1.lineTo(400,30);
        //執行描邊
        ctx1.stroke();        
        
    </script>
</html>
View Code

 

結果顯示：

 

 

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="800px" height="600px">            
        </canvas>        
    </body>
    <script type="text/javascript">      
        //獲取畫布
        var canvas1=document.getElementById("canvas1");
        //獲取上下文
        var ctx1=canvas1.getContext("2d");
        //線條的寬度爲5
        ctx1.lineWidth=5;
        //設置填充顏色
        ctx1.strokeStyle="bisque";
        //繪製矩形：context.strokeRect(x,y,width,height)
        ctx1.strokeRect(10,10,200,100);
        
        //context.fillRect(x,y,width,height)
        ctx1.beginPath();
        ctx1.fillStyle="aquamarine";
        ctx1.fillRect(220,10,200,200);
        
        //清除指定區域
        ctx1.clearRect(250,30,100,100);
        //執行描邊
        ctx1.stroke();        
        
    </script>
</html>
View Code

 

結果顯示：

 

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="600px" height="600px">            
        </canvas>        
    </body>
    <script type="text/javascript">      
        //獲取畫布
        var canvas1=document.getElementById("canvas1");
        //獲取上下文
        var ctx1=canvas1.getContext("2d");
        //線條的寬度爲5
        ctx1.lineWidth=5;
        //設置填充顏色
        ctx1.strokeStyle="darkgoldenrod";
        //context.arc(x,y,radius,startAngle,endAngle,anticlockwise)
        //(x,y)圓心;radius半徑、startAngle起始弧度、endAngle終止弧度，anticlockwise 旋轉方向
        ctx1.arc(300,300,150,0,Math.PI,false);
        ctx1.closePath();
        //執行描邊    
        ctx1.stroke();    
        
        ctx1.beginPath();
        ctx1.strokeStyle="cornflowerblue";
        ctx1.arc(300,300,100,0,Math.PI*2,false);
        ctx1.fillStyle="cadetblue";
        ctx1.fill();    
    </script>
</html>
View Code

 

結果顯示 ：

 

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>
        <img src="img/logo.png" id="img1" hidden="hidden"/>
        <canvas id="canvas1"  width="600px" height="600px">            
        </canvas>        
    </body>
    <script type="text/javascript">      
        window.onload=function(){
            //獲取畫布
        var canvas1=document.getElementById("canvas1");
        //獲取上下文
        var ctx1=canvas1.getContext("2d");
        //線條的寬度爲5
        ctx1.lineWidth=5;
        //設置填充顏色
        ctx1.strokeStyle="darkgoldenrod";
        var img=document.getElementById("img1");
        ctx1.drawImage(img,200,200);
        ctx1.fill();    
        }
    </script>
</html>
View Code

 

結果顯示 ：

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="600px" height="600px">            
        </canvas>        
    </body>
    <script type="text/javascript">      
        //獲取畫布
        var canvas1=document.getElementById("canvas1");
        //獲取上下文
        var ctx1=canvas1.getContext("2d");
        //線條的寬度爲5
        ctx1.lineWidth=1;
        //設置描邊顏色
        ctx1.strokeStyle="darkgoldenrod";
        ctx1.font="40px 黑體";
        ctx1.strokeText("Hello!",40,50);
        ctx1.fillText("Hello!",170,170);
        ctx1.storke();
        
    </script>
</html>
View Code

 

結果顯示：

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

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

 示例代碼：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>隨機顏色與簡單動畫</title>
    </head>
    <body>
        <canvas id="canvas1" width="600px" height="600px">            
        </canvas>
    </body>
    <script type="text/javascript">
        var margicCrcle = {
            //獲取隨機顏色
            randomColor: function() {
                return '#' + parseInt(Math.random() * 16777216).toString(16);
            },
            //獲取隨機數
            GetrandomNumber: function(min, max) {
                return parseInt(Math.random() * (max - min)) + min;
            },
            r: 10,
            run: function() {
                //得到畫布元素
                this.canvas1 = document.getElementById("canvas1");
                //得到2維繪圖的上下文
                this.ctx1 = this.canvas1.getContext("2d");
                //運行
                setInterval(this.draw, 100);
                this.bindEvent();
            },
            bindEvent: function() {
                this.canvas1.onmousemove = function(e) {
                    margicCrcle.ctx1.lineWidth = 1;
                    //設置描邊顏色
                    margicCrcle.ctx1.strokeStyle = margicCrcle.randomColor();

                    margicCrcle.ctx1.arc(e.clientX, e.clientY, margicCrcle.r, 0, Math.PI * 2);
                    margicCrcle.ctx1.stroke();
                    margicCrcle.r += 10;
                    if(margicCrcle.r > 300)
                        margicCrcle.r = 10;
                }
            },
            draw: function() {
                margicCrcle.ctx1.beginPath();
                //線條的寬度爲1
                margicCrcle.ctx1.lineWidth = 1;
                //設置描邊顏色
                margicCrcle.ctx1.strokeStyle = margicCrcle.randomColor();

                margicCrcle.ctx1.arc(margicCrcle.GetrandomNumber(1, 1000), margicCrcle.GetrandomNumber(1, 1000), margicCrcle.r, 0, Math.PI * 2);
                margicCrcle.ctx1.stroke();
                margicCrcle.r += 10;
                if(margicCrcle.r > 300)
                    margicCrcle.r = 10;
            }
        };
        margicCrcle.run();
    </script>

</html>
View Code

 

結果顯示：

 

1.8 繪製象棋

 代碼以下:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Canvas_繪製象棋</title>
    </head>
    
    <body>

        <canvas id="canvas1" width="600px" height="600px">            
        </canvas>
    </body>
    <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        //獲取畫布
        var canvas1 = document.getElementById("canvas1");
        //獲取上下文
        var ctx1 = canvas1.getContext("2d");
        //設置線條的寬度
        ctx1.lineWidth = 2;
        ctx1.strokeStyle = "brown";

        ctx1.strokeRect(45, 45, 410, 460);

        //橫線
        for(var i = 1; i < 6; i++) {
            ctx1.beginPath();
            ctx1.moveTo(50, i * 50);
            ctx1.lineTo(450, i * 50);
            ctx1.stroke();

            ctx1.beginPath();
            ctx1.moveTo(50, i * 50 + 250);
            ctx1.lineTo(450, i * 50 + 250);
            ctx1.stroke();
        }
        //豎線
        for(var i = 1; i < 10; i++) {
            var y1 = 250;
            if(i == 1 || i == 9) {
                y1 = 300;
            }
            ctx1.beginPath();
            ctx1.moveTo(i * 50, 50);
            ctx1.lineTo(i * 50, y1);
            ctx1.stroke();

            var y2 = 500;
            ctx1.beginPath();
            ctx1.moveTo(i * 50, 300);
            ctx1.lineTo(i * 50, y2);
            ctx1.stroke();
        }

        ctx1.beginPath();
        ctx1.moveTo(200, 50);
        ctx1.lineTo(300, 150);
        ctx1.stroke();

        ctx1.beginPath();
        ctx1.moveTo(300, 50);
        ctx1.lineTo(200, 150);
        ctx1.stroke();

        //one_up_left
        for(var i = 1; i < 5; i++) {
            //右上
            var h = 55;
            ctx1.beginPath();
            ctx1.moveTo(((i - 1) * 100) + h, 175);
            ctx1.lineTo(((i - 1) * 100) + h, 195);
            ctx1.lineTo(((i - 1) * 100) + h + 20, 195);
            ctx1.stroke();
            //右下
            ctx1.beginPath();
            ctx1.moveTo(((i - 1) * 100) + h, 225);
            ctx1.lineTo(((i - 1) * 100) + h, 205);
            ctx1.lineTo(((i - 1) * 100) + h + 20, 205);
            ctx1.stroke();
        }

        //two_up_left
        for(var i = 1; i < 5; i++) {
            //右上
            var h = 55;
            ctx1.beginPath();
            ctx1.moveTo(((i - 1) * 100) + h, 325);
            ctx1.lineTo(((i - 1) * 100) + h, 345);
            ctx1.lineTo(((i - 1) * 100) + h + 20, 345);
            ctx1.stroke();

            //右下
            ctx1.beginPath();
            ctx1.moveTo(((i - 1) * 100) + h, 375);
            ctx1.lineTo(((i - 1) * 100) + h, 355);
            ctx1.lineTo(((i - 1) * 100) + h + 20, 355);
            ctx1.stroke();
        }
        //one_up 左上
        for(var i = 1; i < 5; i++) {
            var h = 445;
            ctx1.beginPath();
            ctx1.moveTo(h - ((i - 1) * 100), 175);
            ctx1.lineTo(h - ((i - 1) * 100), 195);
            ctx1.lineTo(h - ((i - 1) * 100) - 20, 195);
            ctx1.stroke();
        }
        //one_up2 左下
        for(var i = 1; i < 5; i++) {
            var h = 445;
            ctx1.beginPath();
            ctx1.moveTo(h - ((i - 1) * 100), 225);
            ctx1.lineTo(h - ((i - 1) * 100), 205);
            ctx1.lineTo(h - ((i - 1) * 100) - 20, 205);
            ctx1.stroke();
        }
        //x:450 two_bottom
        for(var i = 1; i < 5; i++) {
            var h = 445;
            ctx1.beginPath();
            ctx1.moveTo(h - ((i - 1) * 100), 325);
            ctx1.lineTo(h - ((i - 1) * 100), 345);
            ctx1.lineTo(h - ((i - 1) * 100) - 20, 345);
            ctx1.stroke();
        }
        //two_bottom3
        for(var i = 1; i < 5; i++) {
            var h = 445;
            ctx1.beginPath();
            ctx1.moveTo(h - ((i - 1) * 100), 375);
            ctx1.lineTo(h - ((i - 1) * 100), 355);
            ctx1.lineTo(h - ((i - 1) * 100) - 20, 355);
            ctx1.stroke();
        }
        //一個完整的圖案
        function four(x1, x2, y1, y2) {
            ctx1.beginPath();
            ctx1.moveTo(x1, y1);
            ctx1.lineTo(x1, y2);
            ctx1.lineTo(x2, y2);
            ctx1.stroke();
            /*//right_up1
              ctx1.beginPath();
            ctx1.moveTo(105,125);
            ctx1.lineTo(105,145);
            ctx1.lineTo(105+20,145);            
            ctx1.stroke();
            //right_bottom1
            ctx1.beginPath();
            ctx1.moveTo(105,175);
            ctx1.lineTo(105,155);
            ctx1.lineTo(105+20,155);            
            ctx1.stroke();    
            //left_up
            ctx1.beginPath();
            ctx1.moveTo(95,125);
            ctx1.lineTo(95,145);
            ctx1.lineTo(95-20,145);            
            ctx1.stroke();    
            //left_bottom
            ctx1.beginPath();
            ctx1.moveTo(95,175);
            ctx1.lineTo(95,155);
            ctx1.lineTo(95-20,155);            
            ctx1.stroke();    */
        }
        four(105, 125, 125, 145); //右上
        four(105, 125, 175, 155); //右下
        four(95, 75, 125, 145); //左上
        four(95, 75, 175, 155); //左下

        four(405, 425, 125, 145); //右上
        four(405, 425, 175, 155); //右下
        four(395, 375, 125, 145); //左上
        four(395, 375, 175, 155); //左下

        four(105, 125, 375, 395); //右上
        four(105, 125, 425, 405); //右下
        four(95, 75, 375, 395); //左上
        four(95, 75, 425, 405); //左下

        four(405, 425, 375, 395); //右上
        four(405, 425, 425, 405); //右下
        four(395, 375, 375, 395); //左上
        four(395, 375, 425, 405); //左下

        ctx1.beginPath();
        ctx1.moveTo(200, 400);
        ctx1.lineTo(300, 500);
        ctx1.stroke();

        ctx1.beginPath();
        ctx1.moveTo(300, 400);
        ctx1.lineTo(200, 500);

        ctx1.stroke();
        ctx1.save();

        ctx1.font = "30px Microsoft yahei";
        ctx1.fillStyle = "red";
        ctx1.translate(140, 260);
        ctx1.rotate(Math.PI / 2);
        ctx1.fillText("楚", 0, 0);
        ctx1.restore();
        ctx1.save();

        ctx1.font = "30px Microsoft yahei";
        ctx1.fillStyle = "red";
        ctx1.translate(100, 260);
        ctx1.rotate(Math.PI / 2);
        ctx1.fillText("河", 0, 0);
        ctx1.restore();
        ctx1.save();

        ctx1.font = "30px Microsoft yahei";
        ctx1.fillStyle = "red";
        ctx1.translate(355, 292);
        ctx1.rotate(Math.PI);
        ctx1.rotate(Math.PI / 2);
        ctx1.fillText("漢", 0, 0);
        ctx1.restore();
        ctx1.save();

        ctx1.font = "30px Microsoft yahei";
        ctx1.fillStyle = "red";
        ctx1.translate(395, 292);
        ctx1.rotate(Math.PI);
        ctx1.rotate(Math.PI / 2);
        ctx1.fillText("界", 0, 0);
        ctx1.restore();
        ctx1.save();
        //ctx1.fillText("漢界",315,285);
    </script>
    </script>

</html>
View Code

 

結果顯示：

1.9 任意畫線

 代碼以下：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>Canvas_任意畫線</title>
    </head>
    <body>
        <canvas id="canvas1" width="800px" height="600px" style="background:black;">            
        </canvas>
    </body>
    <script type="text/javascript">
        //--畫正文形
        //獲取畫布
        var canvas1 = document.getElementById("canvas1");
        //獲取上下文
        var context1 = canvas1.getContext("2d");
        //線條的寬度爲5
        context1.lineWidth = 5;
        context1.strokeStyle = "lawngreen";

        canvas1.onmousemove = function(e) {
            context1.lineTo(e.clientX, e.clientY);
            context1.stroke();
        }
        //執行畫線
        context1.stroke();
    </script>
</html>
View Code

 

結果顯示：

 

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>
View Code

 

運行結果：

 

3.三、畫直線

參數：

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

示例代碼： 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>svg_line</title>
    </head>
    <body>
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
            <line x1="0" y1="1" x2="150" y2="150" style="stroke: rgb(0,145,123);stroke-width: 2;"></line>
        </svg>
    </body>
</html>

 

結果顯示： 

 

 

3.四、畫橢圓

參數：

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

 示例代碼：  

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>svg_橢圓</title>
    </head>
    <body>
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="500" height="500">
            <ellipse cx="300" cy="100" rx="150" ry="50" style="stroke: rgb(0,145,123);stroke-width: 5;fill:rgb(123,123,123);opacity: 0.8;"></ellipse>
        </svg>
    </body>
</html>

 結果顯示：

 

3.5 圖形與文字

 示例代碼：  

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

 

 結果顯示：

 

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>

 

結果顯示：

參數：

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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程