HTML5 学习总结（四）——canvas绘图、WebGL、SVG

HTML5 学习总结（四）——canvas绘图、WebGL、SVG

目录

一、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>

运行效果：

移动手机端：

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>

运行效果：

练习：试着完成一个象棋或围棋棋盘。

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下又能被解析。

四、示例下载

示例代码：https://github.com/zhangguo5/HTML5_4_1.git

转载：https://i.cnblogs.com/EditPosts.aspx?opt=1

时间： 2024-10-05 12:57:43

HTML5 学习总结（四）——canvas绘图、WebGL、SVG的相关文章

HTML5 十大新特性(四)——Canvas绘图

H5引入了canvas标签,默认是一个300*150的inline-block.canvas的宽高只能用它自身的width和height属性来指定,而不能使用css样式中的width.height. 一.获得'画笔'对象,canvas所有的任务都需要它来执行 var ctx=canvas.getContext('2d'); 二.一些canvas常用的属性 fillStyle:填充样式 strokeStyle:描边样式 lineWidth:描边宽度 font:绘制文本所用的字体大小和类型 text

HTML5css3学习总结(4)canvas绘图

canvas HTML5 重中之重 canvas是HTML5中的重点:今天简单的学习了一下,总结一下canvas的概念:canvas是要有面向对象的思维:各个标签就像我们画水彩画一样,需要注意标签使用的顺序canvas就是一个画布:可以画线,图形,填充等.操作图片和文本.操作方式是使用js:可以提供2d图形,3d图形绘制: canvas使用:①<canvas id='myCanvas' width='500' height='500'></canvas>需要有一个ID ,画布的尺寸

html5学习笔记：canvas

1.什么是canvas? 可以绘制图形的标签.一般用javascript来绘制. 2.创建一个画布 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 </head> 6 <body> 7 <canvas id="mycanvas" width="100" height="100"></

HTML5 学习02——新元素:canvas

HTML5 Canvas <canvas>标签:使用脚本 (通常是JavaScript)来绘制图形--默认情况下 <canvas> 元素没有边框和内容. 在画布上(Canvas)画一个红色矩形,渐变矩形,彩色矩形,和一些彩色的文字. <canvas id="myCanvas" width="200" height="100"></canvas> 注:指定一个id属性 (脚本中经常引用), width

HTML5自学笔记[ 24 ]canvas绘图之星空草地

1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 7 <style> 8 body{ background:#fff;} 9 div{ width:800px; height:600px; margin:0 auto;} 10 canvas{ backg

HTML5自学笔记[ 17 ]canvas绘图基础4

绘制图像: drawImage(oImg,x,y),oImg是一个Image对象,(x,y)为绘制起点,绘制的图像大小和源图大小一样. drawImage(oImg,x,y,w,h),后两个参数设置绘制后的图形大小. drawImage(oImg,x1,y1,w1,h1,x2,y2,w2,h2),该方法获取源图像的一部分进行绘制并且指定绘制起点和绘制后图像的大小,x1/y1/w1/h1表示选取源图上(x1,y1)点起宽w1高h1的部分,x2/y2/w2/h2表示将选取的部分绘制到画布(x2,y2

HTML5学习（9）内联SVG

什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用于定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失 SVG 是万维网联盟的标准 SVG优势 与其他图像格式相比(比如 JPEG 和 GIF),使用 SVG 的优势在于: SVG 图像可通过文本编辑器来创建和修改 SVG 图像可被搜索.索引.脚本化或压缩 SVG 是可伸缩的 SVG 图像可在任何的分辨率下被高质量地打印

HTML5自学笔记[ 21 ]canvas绘图实例之马赛克

1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>马赛克</title> 6 <style> 7 body{background:#000;} 8 canvas{background: #fff; margin-left:500px;} 9 </style> 10

HTML5自学笔记[20 ]canvas绘图实例之绘制倒影

1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title>倒影</title> 6 <style> 7 body{background:#000;} 8 canvas{background: #fff; margin-left:500px;} 9 </style> 10

HTML5自学笔记[ 14 ]canvas绘图基础2

canvas绘制路径不仅可以绘制直线和多边形,还提供了绘制曲线的方法,利用这些方法可以画出多种曲线效果. 方法1:arc(x,y,r,起始弧度,结束弧度,绘制方向);其中(x,y)为圆心坐标,r为半径,弧度计算公式:deg*Math.PI/180,绘制方向默认为false表示顺时针绘制 ,设置为true时,逆时针绘制. 例1,顺时针绘制0-90°圆弧: 1 oContext.beginPath(); 2 3 oContext.arc(300,300,200,0,90*Math.PI/180,fa