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

最新推荐文章于 2024-10-06 09:30:16 发布
最新推荐文章于 2024-10-06 09:30:16 发布
阅读量2.9k 收藏 2
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangguo5/article/details/62423449
版权
一、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>

运行效果：

移动手机端：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <script>
            var canvas1;
            var ctx;
            var width;
            var height;
            var msg;
            window.onload = function() {
                canvas1 = document.getElementById("canvas1");
                msg = document.getElementById("msg");
                ctx = canvas1.getContext("2d");
                width = canvas1.width;
                height = canvas1.height;
                ctx.fillRect(0, 0, width, height);
                ctx.moveTo(0, 0);
                ctx.lineTo(100, 100);
                ctx.strokeStyle = "red";
                ctx.lineWidth = 2;
                ctx.stroke();
                canvas1.onmousemove = function(e) {
                    ctx.lineTo(e.clientX, e.clientY);
                    ctx.stroke();
                }
                canvas1.ontouchmove = function(e) {
                    e.preventDefault();
                    var touchE=e.targetTouches[0]
                    msg.innerHTML += touchE.clientX+"，"+touchE.clientY+ "<br/>";
                    ctx.lineTo(touchE.clientX, touchE.clientY);
                    ctx.stroke();
                }
                canvas1.ontouchstart = function() {
                    msg.innerHTML += "ontouchstart" + "<br/>";
                }
                canvas1.ontouchend = function() {
                    msg.innerHTML += "ontouchend" + "<br/>";
                }
            }
        </script>
    </head>

    <body>
        <canvas id="canvas1" width="500" height="500">不支持</canvas>
        <div id="msg"></div>
    </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>

运行效果：

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

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游戏引擎：

NameUpdated TimeWatchStarForkCommitsContributors
Three.js2016/3/28159024041776814825588
Phaser2016/2/188371178240954423206
Pixi.js2016/3/176561006319422860161
egret2016/3/302151275303426825
enchantjs2016/1/41851445301168327
crafty2016/3/2113420504731807106
turbulenz2015/11/232712544406173713
cocos2d-js2016/3/301621207469455945
playcanvas2016/3/301641784368514216
melonjs2016/3/30131579371390740
quintus2016/2/3136102341225633
Hilo2016/2/31732449340202

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

张果
关注
一，webgl 快速入门 1WebGL绘制一个点
xueyise的专栏
06-21 242
1.在html5 页面 创建canvas 标签 2.获取上下文 说明： 这里有多个参数 可以是 2d,webgl ,webgl2,bitmaprenderer 参数 "2d", 建立一个 CanvasRenderingContext2D 二维渲染上下文。 "webgl" (或"experimental-webgl") 这将创建一个 WebGLRenderingContext 三维渲染上下文对象。只在实现WebGL 版本 1(O
Canvas画布、SVG图片
chenjia525的博客
07-21 1461
画布Canvas、SVG图片
canvas绘图、WebGL、SVG
weixin_30606461的博客
11-22 461
目录 一、Canvas 1.1、创建canvas元素 1.2、画线 1.3、绘制矩形 1.4、绘制圆弧 1.5、绘制图像 1.6、绘制文字 1.7、随机颜色与简单动画 二、WebGL 2.1、HTML5游戏开发 2.2.1、Cocos2D-HTML5 2.2.2、Egret（白鹭引擎） 三、SVG 3.1、SVG Hello Wrol...
Web互动涂鸦：基于HTML5 Canvas的简易实现
最新发布
weixin_36213081的博客
10-06 1262
本文还有配套的精品资源，点击获取 简介：简单涂鸦DOM利用HTML5 Canvas元素实现网页上的自由绘画功能。用户通过鼠标操作进行绘画，该项目通过JavaScript控制Canvas进行像素级绘图，提供了基本的绘画、擦除、保存和分享功能。开发者可以在此基础上扩展更多绘图工具和功能。 1. Canvas绘图基础 1.1 HTML5 Canvas元素简介 ...
html5 canvas webgl,Html5 Canvas介绍
weixin_39678426的博客
06-17 188
HTML5 CanvasHTML-5提供了一个简单而强大的选项来使用JavaScript绘制图形。它可以用来绘制图形，使照片组合，或做简单的(和不那么简单的)动画。这是一个简单的元素只有两个特定的属性：width和height，以及所有HTML5元素有核心的属特，例如像：id，name和class。语法HTML画布标记的语法如下所示。要提到这些在双引号(“”)画布的名称。Canvas 属性ca...
HTML5的canvas和webgl
whl0071的专栏
12-04 1854
HTML5的canvas和webgl
HTML5 Canvas+SVG实现的彩色水泡分裂动画特效源码.zip
11-20
HTML5 Canvas 和 SVG 是两种强大的Web图形技术，用于在网页上创建动态、交互式的图形内容。这个名为"HTML5 Canvas+SVG实现的彩色水泡分裂动画特效源码"的压缩包，显然包含了一个利用这两种技术制作的动画效果，具体...
基于html5开发的canvas图表案例.zip
02-13
总结起来，"基于html5开发的canvas图表案例.zip"包含的资源可以帮助我们了解和学习如何使用HTML5 Canvas来创建各种图表。通过这个实践，开发者不仅可以掌握Canvas的基本绘图操作，还能进一步理解如何将这些技术应用...
模拟光源 html5,光照渲染——用canvas模拟光照效果
weixin_42461108的博客
06-09 904
光照我们能看到物体，是因为光照射在物体上然后反射到我们的眼睛当中。其中的影响因素非常多：观察者的位置、光源的位置、光的颜色、物体表面的颜色、材质和粗糙程度等等。以后我们将会详细探究如何模拟物体的材质，在这篇文章中我们只讨论光源。平行光源太阳的尺度相对地球来说非常大，所以可以认为从太阳照射来的光线都是平行的，即太阳是一个平行光源。模拟平行光源的光照非常简单，当光垂直照射到平面上，即光线方向和平面呈9...
HTML5 Canvas核心技术.pdf
04-10
综上所述，本书“HTML5 Canvas核心技术”是一本非常适合那些有志于掌握Canvas绘图技术的前端开发者阅读的书籍。无论你是希望为自己的网页增添动态效果，还是想要深入探索图形编程的领域，本书都将提供给你所需要的...
webgl-to-canvas2d:将 webgl 上下文或 webgl 画布转换为 2d 画布
05-31
webgl-to-canvas2d 将 webgl 上下文或 webgl 画布转换为 2d 画布。 用法 webglToCanvas2d(gl, [canvas2d]) gl可以是使用 webglrenderingcontext 或 webglrenderingcontext 的画布。 canvas2d可以是画布或 CanvasRenderingContext2D。 返回的值将是一个使用 CanvasRenderingContext2D 的画布。 var webglToCanvas2d = require ( 'webgl-to-canvas2d' ) ; var glCanvas = document . body . appendChild ( document . createElement ( 'canvas' ) ) ; var gl = require ( 'gl-c
《WebGL编程指南》学习笔记——3.在Canvas中使用WebGL
hushhw的博客
12-19 1106
《WebGL编程指南》学习笔记——2.在Canvas中使用WebGL上一节学习了使用< canvas >元素绘制二维图形，这一节里面我们在< canvas >中使用WebGLWebGL编程指南学习笔记2在Canvas中使用WebGL HelloCanvashtml HelloCanvasjs下小节我们正式开始学习如何在< canvas >中使用WebGL这一小节中我们通过个实例来讲解在< canva
【愚公系列】2023年12月 WEBGL专题-canvas和webgl的区别
热门推荐
时光隧道
08-01 1万+
Canvas是一个HTML5元素，可以用于在网页上绘制图形。它可以让开发者使用JavaScript绘制图形和动画，以及实现图形交互。Canvas可以帮助开发者创建交互式的游戏、图表、图像编辑工具等应用程序。Canvas的作用如下：动态绘制图形：开发者可以使用JavaScript动态地绘制图形，包括线条、圆形、矩形、多边形等。动画效果：开发者可以使用JavaScript实现动画效果，例如展示图表数据变化、添加滑动特效等。图像处理：开发者可以使用Canvas进行图像处理，例如对图像进行裁剪、缩放、旋转等操作。游
【前沿技术了解】web图形Canvas、svg、WebGL、数据可视化引擎的技术选型
luemeon的博客
11-26 765
不同库使用不同的渲染技术。使用G2（canvas），f2（移动端），G6（用于图关系数据）、L7（三维）WebGL等更高级的技术。将一张跨域的图片绘制到 canvas 上，这个 canvas 就是被污染的，此时无法读取该 canvas 的数据。了解底层原理可以帮助你更好地优化代码和解决问题，因为你对系统如何工作有更深入的理解。在遇到复杂问题时，缺乏底层原理的理解可能会限制你找到最佳解决方案的能力。在不设置宽高的情况下，默认为300 * 150，超出部分会被隐藏。，它是浏览器提供的绘制动画的 api。
数据可视化记一基础学习(canvas、svg、WebGL、zrender、D3、Three.js)
堕落心的博客
09-07 2193
数据可视化 目录数据可视化一、数据可视化的应用场景二、canvas2.1 canvas 绘图的流程2.2 入门案例：绘制点、矩形、直线和圆形 一、数据可视化的应用场景 地址 二、canvas canvas 参考手册 2.1 canvas 绘图的流程 1. 编写 canvas 标签（注意指定宽高） 2. 获取 canvas DOM 对象 3. 获取 Canvas 对象 4. 设置绘图属性 5. 调用绘图 API 2.2 入门案例：绘制点、矩形、直线和圆形 <!DOCTYPE ht
基于HTML5 Canvas 实现地铁站监控
HT for Web 3D
11-19 2758
鉴于现代社会对人力和物力方面的合理利用，并且各商家也希望能减少运营开支，监控系统出现了，我们针对这个现象对监控系统做了一个简单美丽利用 HTML5 Canvas 制作的例子，你会发现原来做一个监控系统竟然这么简单！
Canvas绘制layout.xml布局
cengdong的博客
12-22 1138
try { mCanvas = mSurfaceHolder.lockCanvas(); if (mCanvas != null) { LayoutInflater inflater = LayoutInflater.from(getContext()); View v = inflater.inflate(R.layout.clock, null, false); ...
HTML5绘图方式Canvas和SVG的区别，IDEA太强悍了
2401_84167109的博客
04-07 480
canvas>是H5新增的组件，就像一块幕布，可以使用脚本（通常为Javascript）在其中绘制图形的HTML元素，他可以用来制作各种图、表，或者一些动画。Canvas 技术比较新，注重栅格图像处理。SVG是一套独立的矢量图形语言，成为W3C标准已经有十几年，基于可扩展标记语言XML 出来的区别：Canvas 基于像素，提供 2D 绘制函数，是一种HTML元素类型，依赖于HTML，只能通过脚本绘制图案；SVG为矢量图，提供一系列图形元素；
HTML5 Canvas API探索：动态图形与绘制基础
"HTML5之canvas绘图" HTML5的Canvas API是一个强大的工具，允许开发者在网页上进行动态图形绘制，包括图表、图像和动画的创建。这个API提供了一个基于JavaScript的二维渲染上下文，使得程序员可以进行像素级别的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值