读书统计,渲染引擎介绍

GCanvas 渲染引擎介绍

2017/07/31 · HTML5 ·
Canvas

读书统计,渲染引擎介绍。初稿出处: 天猫商城前端团队(FED)-
韦青   

亚洲必赢官网 1

GCanvas 提供了一套类似于 H5 Canvas 标准的 JavaScript API。基于那套 API
能够便宜的去做图形绘制、动画渲染等,开发的体验与 H5 Canvas
是全然一样的。

HTML5 学习计算(四)——canvas绘图、WebGL、SVG,html5webgl

HTML5 学习笔记(四)——canvas绘图、WebGL、SVG,html5webgl

转自原文 有关于OpenGL、OpenGL
ES、WebGL的小结

GCanvas 介绍

GCanvas发展经验了多个级次。

  • 第一等级,2014 年中到 2015 年初,解决 Android 平台 WebView Canvas
    渲染质量差的难题。
  • 其次阶段,2016 年 11 月到现行,为前端提供 Native 图形绘制能力。

用一句话来概括 GCanvas,即根据 W3C
标准,移动端的跨平台的高品质图形渲染引擎。能够从三个方面来表明。

  • 遵循 W3C 标准
    GCanvas 提供了一套类似于 H5 Canvas 标准的 JavaScript
    API,开发人士基于这套 API
    可以便宜的去做图形绘制、动画渲染等。开发的经验与 H5 Canvas
    是完全一样的。
  • 跨平台
    GCanvas 的木本基于 OpenGL ES, 用 C++ 已毕了一套用于描述 Canvas 标准
    API
    的接口落成。我们将其名叫渲染引擎内核。并通过交叉编译,使得能够适配
    Android、iOS 那两大主流移动平台,由此具有跨平台的特色。
  • 高性能
    最初移动平台上 H5 Canvas 去做一些错综复杂的卡通或嬉戏,在 WebView
    上的心得非常差。 主要原因是 WebView 对 GPU
    硬件加快的支撑差。高质量则是丰富利用了 GPU
    硬件的渲染能力,首要突显多个方面:

    • 对此 Android 3.0 此前的体系,Android
      的渲染管线是不扶助硬件加快的,WebView 中的 Canvas 不可能博得 GPU
      的图纸渲染能力的支撑。对于那类系统,通过 GCanvas
      可以赢得更底层的 OpenGL ES 的硬件加速能力增强渲染效用。
    • 链路上来看,减少了调用路径,进步了渲染质量。使用了 GCanvas
      则不要求通过 WebView 内部的扑朔迷离逻辑处理和图层树渲染,而是让
      JavaScript 通过桥接方式直接调用渲染引擎内核(OpenGL ES)。

一、Canvas

canvas是HTML5中新增一个HTML5标签与操作canvas的javascript
API,它可以兑现在网页中成就动态的2D与3D图像技术。<canvas> 标记和
SVG以及 VML 之间的一个首要的两样是,<canvas> 有一个基于 JavaScript
的绘图 API,而 SVG 和 VML 使用一个 XML 文档来叙述绘图。SVG
绘图很不难编辑与转变,但效益明确要弱一些。

canvas可以做到动画、游戏、图表、图像处理等原来要求Flash完结的片段功用。、

浏览器协理意况如下:

亚洲必赢官网 2

一、Canvas

canvas是HTML5中新增一个HTML5标签与操作canvas的javascript
API,它可以兑现在网页中形成动态的2D与3D图像技术。<canvas> 标记和
SVG以及 VML 之间的一个着重的分化是,<canvas> 有一个基于 JavaScript
的绘图 API,而 SVG 和 VML 使用一个 XML 文档来叙述绘图。SVG
绘图很不难编辑与变化,但效益明确要弱一些。

canvas可以形成动画、游戏、图表、图像处理等原来必要Flash已毕的片段效益。、

浏览器襄助意况如下:

亚洲必赢官网 3

一.   OpenGL简介

  OpenGL(全写Open Graphics
Library)是个概念了一个跨编程语言、跨平台的编程接口的尺度,它用于三维图西象(二维的可以)。OpenGL是个正式的图样程序接口,是一个作用强大,调用方便的最底层图形库。

  关于其余的介绍自己就隐瞒了。那边我说一下有OpenGL的资源网站:

  OpenGL官网:

  NeHe网站:

  优良的OpenGL教程:

 

GCanvas 组成

亚洲必赢官网 4

如上图所示 GCanvas 由三层组成 JavaScript 层、插件层、主题渲染库。

  • JavaScript 层
    JavaScript 提供对外统一的 API,协助 Canvas 2D 和 WebGL
    的作用接口。接口辅助景况请参考 API
    覆盖。
  • 插件层
    插件层大旨包蕴三部分。

    • Bridge 桥接
      JavaScript 到 Native 的桥接,相比较主流的章程 JSBridge 和
      JSBinding。JSBridge 已毕格局,如 Cordva、WebviewJavascriptBridge
      等。 仍可以用 JSBinding 情势来贯彻,如 V8、JavascriptCore
      等。实际的运用场景中那两种桥接格局都有支撑。
    • 通用插件
      通用插件包蕴了通用插件接口与落实、GCanvas
      的治本、渲染命令队列管理、纹理缓存等。帮衬差别档次桥接格局下的扩张。
    • 系统适配
      系统适配涉及 Android 和 iOS 对 OpenGL ES
      已毕的差距,网络图片下载,字体渲染等方面。
  • 焦点渲染库
    主干渲染库包蕴对外统一的接口,以及 Contex2D 和 WebGL
    模块,底层则是对 OpenGL ES API 等分装。

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>

运转效果:

亚洲必赢官网 5

在页面上就呈现了一条直线,另存为后就是一张背景透明的png图片。

勤学苦练:画一个100X100的正方形在画布正大旨

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>

运作效果:

亚洲必赢官网 6

在页面上就体现了一条直线,另存为后就是一张背景透明的png图片。

勤学苦练:画一个100X100的正方形在画布正中心

二.   OpenGL ES

GCanvas 流程

亚洲必赢官网 7

上图是 JavaScript 层渲染主题库的大意流程,关键的八个流程是伊始化和渲染。

  • 初始化
    发轫化,JavaSript
    层获取配置判断运行环境,通过桥接层,插件层落成视图和 GCanvas
    的创制。进一步成功对 OpenGL 环境的起始化。
  • 渲染
    渲染,JavaScript
    层将有着的API调用托管,并且转换成自定义的命令格式(命令类型 +
    参数的组成)。渲染触发则由 JavaScript
    定时器触发或者手动触发的方法,将那几个命令颁发到渲染宗旨库执行。

以 Weex 为例, 绘制图形和图表的测试代码如下。

JavaScript

<template> <div ref=”test”> <gcanvas ref=”canvas_holder”
style=”width:750; height:750; background-color:rgba(0, 0, 0,
0.1)”></gcanvas> </div> </template> <script>
var GCanvas=require(‘weex-gcanvas’); var
Image=require(‘weex-gcanvas/gcanvasimage’); module.exports = { mounted:
function () { //1、初始化 GCanvas var ref = this.$refs.canvas_holder;
var gcanvas = GCanvas.start(ref); var ctx = gcanvas.getContext(‘2d’);
//2、执行渲染操作 //rect ctx.fillStyle = ‘red’; ctx.fillRect(0, 0, 100,
100); //rect ctx.fillStyle = ‘black’; ctx.fillRect(100, 100, 100, 100);
ctx.fillRect(25, 210, 700, 5); //circle ctx.arc(450, 200, 100, 0,
Math.PI * 2, true); ctx.fill(); //drawImage var image = new Image();
image.onload = function(){ ctx.drawImage(image, 100, 330);
ctx.drawImage(image, 100+300, 330, 225, 75); } image.src =
”;
} }; </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<template>
<div ref="test">
<gcanvas ref="canvas_holder" style="width:750; height:750; background-color:rgba(0, 0, 0, 0.1)"></gcanvas>
</div>
</template>
<script>
var GCanvas=require(‘weex-gcanvas’);
var Image=require(‘weex-gcanvas/gcanvasimage’);
module.exports = {
mounted: function () {
  
  //1、初始化 GCanvas
var ref = this.$refs.canvas_holder;
var gcanvas = GCanvas.start(ref);
var ctx = gcanvas.getContext(‘2d’);
//2、执行渲染操作
//rect
ctx.fillStyle = ‘red’;
ctx.fillRect(0, 0, 100, 100);
 
//rect
ctx.fillStyle = ‘black’;
ctx.fillRect(100, 100, 100, 100);
ctx.fillRect(25, 210, 700, 5);
 
//circle
ctx.arc(450, 200, 100, 0, Math.PI * 2, true);
ctx.fill();
 
//drawImage
var image = new Image();
image.onload = function(){
ctx.drawImage(image, 100, 330);
ctx.drawImage(image, 100+300, 330, 225, 75);
}
image.src = ‘https://www.khronos.org/assets/uploads/ceimg/made/assets/uploads/apis/OpenGL-ES_100px_May16_225_75.png’;
}
};
</script>

因此 Weex Playground 运行结果如下

亚洲必赢官网 8

具体分析下所有流程。结合插件层和主导渲染库来分析。

  • 插件层流程
    以 iOS 为例分析,Android 的进度是类似的。

    • GLKView 视图创造,并且与 GCanvas 对象建立绑定关系;
    • GCVCommon,资源加载与纹理绑定;
    • GCanvasPlugin,设置岗位音讯、设备比率、下发渲染命令;
  • 渲染库流程

亚洲必赢官网 9

渲染命令的解析,最终经过调用 OpenGL ES 的主意或组合措施来达成 Context2D
和 WebGL 的意义,生成帧缓存,提交给 GPU 渲染,最后在绑定的 GLKView
视图上浮现。

  • Context2D,需求贯彻诸如 GPath、GTexture、GTransform、GTriangulate
    等来兑现 Canvas 的渲染效果;
  • WebGL 绝对简便易行,WebGL1.0 的 API 基本都能与从 OpenGL ES2.0
    找到与之相对应的 API;

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();

 亚洲必赢官网 10

结缘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>

运行效果:

亚洲必赢官网 11

活下手机端:

亚洲必赢官网 12<!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>

运作效果:

亚洲必赢官网 13

演习:试着成功一个象棋或围棋棋盘。

亚洲必赢官网 14

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();

 亚洲必赢官网 15

结缘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>

运作效果:

亚洲必赢官网 16

挪下手机端:

亚洲必赢官网 17<!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>

运转效果:

亚洲必赢官网 18

勤学苦练:试着落成一个象棋或围棋棋盘。

亚洲必赢官网 19

1. OpenGL ES简介

        可以如此说,OpenGL
ES是OpenGL的嵌入式本子,OpenGL
ES (OpenGL for Embedded Systems) 是 OpenGL 三维图形 API
的子集,针对手机、PDA和游乐主机等嵌入式设备而布署。该API由Khronos公司概念推广,Khronos是一个图片软硬件行业协会,该协会第一关注图形和多媒体方面的怒放标准。

        OpenGL
ES的本子差距,紧要有七个版本,一个是OpenGL ES 1.X,一个是OpenGL ES
2.0版本,2.0的本子是不般配1.x版本,因为一个是原则性成效的管线(1.x),其它2.0是可编程成效管线,所以众多都分歧,来探望百科是怎么介绍的。OpenGL
ES 是从 OpenGL 裁剪的定制而来的,去除了
glBegin/glEnd,四边形(GL_QUADS)、多边形(GL_POLYGONS)等繁杂图元等许多非相对须要的特征。经过长年累月上扬,现在主要有多个版本,OpenGL
ES 1.x 针对固定管线硬件的,OpenGL ES 2.x 针对可编程管线硬件。OpenGL ES
1.0 是以 OpenGL 1.3 规范为根基的,OpenGL ES 1.1 是以 OpenGL 1.5
规范为底蕴的,它们分别又襄助
common 和 common
lite三种profile。lite profile只协助定点实数,而common
profile既辅助定点数又帮忙浮点数。 OpenGL ES 2.0 则是参考 OpenGL 2.0
规范定义的,common profile发表于2005-8,引入了对可编程管线的支撑。

 

GCanvas 测试例子

上面给出一些 GCanvas 的案例。

  • GCanvas 与 H5 Canvas 品质比较

亚洲必赢官网 20

  • Android 平台,左侧是 GCanvas,左边是 H5
    Canvas。同屏渲染图片更加多,质量差别越通晓。
  • Hilo 2D
    100
    条鱼据悉
    Hilo 2D 动画库,满屏鱼的卡通片测试。
  • Chart 图标渲染
    Chart
    图标库的渲染效果根据图表库,不一致类型的图形渲染测试。

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>

运作效果: 

亚洲必赢官网 21

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>

运转效果: 

亚洲必赢官网 22

2. OpenGL ES 2.0概况:

亚洲必赢官网 23

支撑的阳台:

  - 支持iPad,
iPhone3GS
和继承版本,以及iPodTouch3代和后续版本。

  -
支持Android平台从Android
2.2本子发轫。

  - 支持android NDK从Android
2.0本子伊始。

  - 支持BlackBerry
PlayBook黑莓。

  -
支持Pandora潘多拉控制台的3D库。

  -
被WebGL匡助:浏览器支持OpenGL

  -
援助少数中国热索尼爱立信诺基亚手机,比如N900上的Maemo和N8上的Symbian3塞班3系统。

  - 匡助多款三星手机,包括Galaxy
S和Wave。

  - 使用支付插件可以帮衬Palm webOS。

  - 协助Archos 爱可视台式机:70 IT, 101 IT

     opengl
es与android有着密切的涉及,首要显示在那三种接口的腾飞轨迹和研发集团。

    近年来关于于OpenGL ES
2.0的材料如故蛮少的,就唯有一本书介绍(OpenGL ES 2.0 Programming
Guide)是英文版,我有买了一本书,其实不会很难看懂。你要读书OpenGL ES
最好先把OpenGL 和 OpenGL Shading
Language精通一下,毕竟那是基础的知识内容。

    OpenGL ES
书的网站:

附:GCanvas API 帮忙景况

终极附上 GCanvas Contex2D 和 WebGLAPI
的接济列表,帮忙常用的接口。其它,WebGL 的 API
近期正值做补全开发,后续会支持 WebGL1.0 API 的全覆盖。

  • Context2D API
API名称 API类型 状态
fillStyle Attribute getter/setter Implemented
strokeStyle Attribute getter/setter Empty
shadowColor Attribute getter/setter Empty
shadowBlur Attribute getter/setter Empty
shadowOffsetX Attribute getter/setter Empty
shadowOffsetY Attribute getter/setter Empty
createLinearGradient() Method Empty
createPattern() Method Empty
createRadialGradient() Method Empty
addColorStop() Method Empty
isPointInPath() Method Empty
createEvent() Method Empty
toDataURL() Method Empty
lineCap Attribute getter/setter Implemented
lineJoin Attribute getter/setter Implemented
lineWidth Attribute getter/setter Implemented
miterLimit Attribute getter/setter Implemented
font Attribute getter/setter Implemented
textAlign Attribute getter/setter Implemented
textBaseline Attribute getter/setter Implemented
globalAlpha Attribute getter/setter Implemented
globalCompositeOperation Attribute getter/setter Implemented
rect() Method Implemented
fillRect() Method Implemented
strokeRect() Method Implemented
clearRect() Method Implemented
fill() Method Implemented
stroke() Method Implemented
beginPath() Method Implemented
moveTo() Method Implemented
closePath() Method Implemented
lineTo() Method Implemented
clip() Method Implemented
quadraticCurveTo() Method Implemented
bezierCurveTo() Method Implemented
arc() Method Implemented
arcTo() Method Implemented
scale() Method Implemented
rotate() Method Implemented
translate() Method Implemented
transform() Method Implemented
setTransform() Method Implemented
fillText() Method Implemented
strokeText() Method Implemented
measureText() Method Implemented
drawImage() Method Implemented
createImageData() Method Implemented
getImageData() Method Implemented
putImageData() Method Implemented
save() Method Implemented
restore() Method Implemented
getContext() Method Implemented
loadTexture() Method Implemented
unloadTexture() Method Implemented
resetTransform() Method Implemented
render() Method Implemented
capture() Method Implemented
resetClip() Method Implemented
  • WebGL API
API名称 API类型 状态
viewport() Method Implemented
vertexAttribPointer() Method Implemented
vertexAttrib2fv() Method Implemented
useProgram() Method Implemented
uniformMatrix4fv() Method Implemented
uniformMatrix3fv() Method Implemented
uniformMatrix2fv() Method Implemented
uniform4iv() Method Implemented
uniform4i() Method Implemented
uniform4fv() Method Implemented
uniform4f() Method Implemented
uniform3iv() Method Implemented
uniform3i() Method Implemented
uniform3fv() Method Implemented
uniform3f() Method Implemented
uniform2iv() Method Implemented
uniform2i() Method Implemented
uniform2fv() Method Implemented
uniform2f() Method Implemented
uniform1iv() Method Implemented
uniform1i() Method Implemented
uniform1fv() Method Implemented
uniform1f() Method Implemented
texParameteri() Method Implemented
texImage2D() Method Implemented
shaderSource() Method Implemented
scissor() Method Implemented
renderbufferStorage() Method Implemented
pixelStorei() Method Implemented
linkProgram() Method Implemented
lineWidth() Method Implemented
getUniformLocation() Method Implemented
getShaderParameter() Method Implemented
getAttribLocation() Method Implemented
generateMipmap() Method Implemented
frontFace() Method Implemented
framebufferTexture2D() Method Implemented
flush() Method Implemented
enableVertexAttribArray() Method Implemented
enable() Method Implemented
drawElements() Method Implemented
disableVertexAttribArray() Method Implemented
disable() Method Implemented
depthMask() Method Implemented
depthFunc() Method Implemented
deleteTexture() Method Implemented
deleteShader() Method Implemented
deleteRenderbuffer() Method Implemented
deleteProgram() Method Implemented
deleteFramebuffer() Method Implemented
deleteBuffer() Method Implemented
cullFace() Method Implemented
createTexture() Method Implemented
createShader() Method Implemented
createRenderbuffer() Method Implemented
createProgram() Method Implemented
createFramebuffer() Method Implemented
createBuffer() Method Implemented
compileShader() Method Implemented
colorMask() Method Implemented
clearStencil() Method Implemented
clearDepth() Method Implemented
clearColor() Method Implemented
clear() Method Implemented
bufferData() Method Implemented
blendFuncSeparate() Method Implemented
blendFunc() Method Implemented
blendEquationSeparate() Method Implemented
blendEquation() Method Implemented
bindRenderbuffer() Method Implemented
bindFramebuffer() Method Implemented
bindBuffer() Method Implemented
bindAttribLocation() Method Implemented
attachShader() Method Implemented
activeTexture() Method Implemented
validateProgram() Method Empty
texSubImage2D() Method Empty
texParameterf() Method Empty
stencilOpSeparate() Method Empty
stencilOp() Method Empty
stencilMaskSeparate() Method Empty
stencilMask() Method Empty
stencilFuncSeparate() Method Empty
stencilFunc() Method Empty
sampleCoverage() Method Empty
readPixels() Method Empty
polygonOffset() Method Empty
isTexture() Method Empty
isShader() Method Empty
isRenderbuffer() Method Empty
isProgram() Method Empty
isFramebuffer() Method Empty
isEnabled() Method Empty
isContextLost() Method Empty
isBuffer() Method Empty
getVertexAttribOffset() Method Empty
getVertexAttrib() Method Empty
getUniform() Method Empty
getTexParameter() Method Empty
getSupportedExtensions() Method Empty
getShaderSource() Method Empty
getShaderPrecisionFormat() Method Empty
getShaderInfoLog() Method Empty
getRenderbufferParameter() Method Empty
getProgramParameter() Method Empty
getProgramInfoLog() Method Empty
getParameter() Method Empty
getFramebufferAttachmentParameter() Method Empty
getExtension() Method Empty
getError() Method Empty
getContextAttributes() Method Empty
getBufferParameter() Method Empty
getAttachedShaders() Method Empty
getActiveUniform() Method Empty
getActiveAttrib() Method Empty
drawArrays / drawArraysInstancedANGLE() Method Empty
detachShader() Method Empty
depthRange() Method Empty
copyTexSubImage2D() Method Empty
copyTexImage2D() Method Empty
compressedTexSubImage2D() Method Empty
compressedTexImage2D() Method Empty
checkFramebufferStatus() Method Empty
bufferSubData() Method Empty
blendColor() Method Empty
bindTexture() Method Undefined
commit() Method Undefined
finish() Method Undefined
framebufferRenderbuffer() Method Undefined
hint() Method Undefined

1 赞 1 收藏
评论

亚洲必赢官网 24

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>

运作效果:

 亚洲必赢官网 25

练习:

a、模拟钟表的时,分,秒

b、模拟水波,一个黄色的屏幕,多少个从着力随机暴发彩色的圈不断的加大,接触到显示器停止。

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>

运作效果:

 亚洲必赢官网 26

练习:

a、模拟钟表的时,分,秒

b、模拟水波,一个藏蓝色的显示屏,四个从着力随机爆发彩色的圈不断的松开,接触到屏幕截至。

三. WebGL

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>

运作效果:

亚洲必赢官网 27

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>

运行效果:

亚洲必赢官网 28

1. WebGL 简介

       
WebGL是一种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接口落成的。

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>

运作结果:

亚洲必赢官网 29

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>

运转结果:

亚洲必赢官网 30

2. WebGL 的例子

    
其实自己有做了一个WebGL的事例,是用WebGL画了一个色立体,当但是今还很粗劣,不难的来说,它就是html5+OpenGL
ES的组合,但是Html5还不成熟,所以有关WebGL的好多例证还只是在不成熟的DEMO上,可是自己想这在事后还一种趋势,当然IT业哪个人也说不清楚,WebGL可以说是OpenGL的网页版,近期关于WebGL的书本仍旧不曾的,官网有一个是上学WebGL的学科,当然是英文了。。呵呵

时下IE还不接济WebGL,有FireFox还有Google浏览器等支撑。。。

10大WebGL应用示范网站案例http://www.fadianzhan.com/index.php/archives/208

读书网站:http://learningwebgl.com/blog/

 

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>

运作效果:

亚洲必赢官网 31

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>

运作效果:

亚洲必赢官网 32

二、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娱乐开发。

亚洲必赢官网 33

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示例运行结果:

亚洲必赢官网 34

二、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玩耍支付。

亚洲必赢官网 35

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示例运行结果:

亚洲必赢官网 36

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.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-BlackBerry、Cocos2D-X,以及被社区广泛主张的Cocos2D-HTML5和JavaScriptbindings
for
Cocos2D-X。CocoStudio工具集是开源游戏引擎。特点:与Cocos2d的API类似,简单上手、汉语文档齐全,资料丰裕、基于MIT协议的开源引擎。它由国内Cocos2d-x中坚团队为主开发和维护,行业首脑、HTML5竭力牵动者谷歌(Google)为那几个序列提供支撑。

github:

官网:

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>

运行结果:

亚洲必赢官网 37

2.2.1、Cocos2D-HTML5

开源,免费的HTML5
2D娱乐开发框架,Cocos2D拥有多少个紧要版本,包蕴Cocos2D-一加、Cocos2D-X,以及被社区广阔看好的Cocos2D-HTML5和JavaScriptbindings
for
Cocos2D-X。CocoStudio工具集是开源游戏引擎。特点:与Cocos2d的API类似,简单上手、中文文档齐全,资料充分、基于MIT协议的开源引擎。它由国内Cocos2d-x骨干团队主题开发和爱护,行业首脑、HTML5使劲拉动者谷歌为这几个类型提供支撑。

github:

官网:

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>

运作结果:

亚洲必赢官网 38

2.2.2、Egret(白鹭引擎)

是一个基于TypeScript语言开发的HTML5游玩引擎,围住神经猫就是用那个框架开发的。

亚洲必赢官网 39

亚洲必赢官网 ,官网:

特点:

a)、基于TypeScript及JavaScript技术,接济Flash到Egret高效转换,引擎、工具、运行时完全工作流
b)、跨平台:HTML5,iOS,Android,Windows Phone
c)、全普通话文档:文档与开发者社区全称
d)、开源免费,BSD开源协议、任意定制及增加

2.2.2、Egret(白鹭引擎)

是一个基于TypeScript语言开发的HTML5玩耍引擎,围住神经猫就是用这些框架开发的。

亚洲必赢官网 40

官网:

特点:

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年5月制定的一种新的二维矢量图形格式,也是标准中的互连网矢量图形标准。SVG严酷遵从XML语法,并用文本格式的描述性语言来讲述图像内容,因而是一种和图像分辨率毫不相关的矢量图形格式。SVG
于 2003 年 1 月 14 日成为 W3C 推荐标准。

亚洲必赢官网 41

特点:

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浏览器,那是免费提供的。

三、SVG

SVG可缩放矢量图形(Scalable Vector
Graphics)是基于可扩张标记语言(XML),用于描述二维矢量图形的一种图形格式。SVG是W3C(“World
Wide Web ConSortium” 即 ”
国际网络标准协会”)在2000年17月制定的一种新的二维矢量图形格式,也是明媒正娶中的互联网矢量图形标准。SVG严苛坚守XML语法,并用文本格式的描述性语言来叙述图像内容,由此是一种和图像分辨率毫无干系的矢量图形格式。SVG
于 2003 年 1 月 14 日成为 W3C 推荐标准。

亚洲必赢官网 42

特点:

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>

运作结果:

亚洲必赢官网 43

svg是一个新增添标签,xmlns是命名空间,version是svg的本子,circle标签就是对svg要展现的图像举行描述,cx与cy表示地点,r表示半径,stroke是描边样式,stroke-width就线宽,fill是填写样式。浏览器包容性很好:

亚洲必赢官网 44

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>

运作结果:

亚洲必赢官网 45

svg是一个新增加标签,xmlns是命名空间,version是svg的版本,circle标签就是对svg要显得的图像举行描述,cx与cy代表地点,r表示半径,stroke是描边样式,stroke-width就线宽,fill是填充样式。浏览器兼容性很好:

亚洲必赢官网 46

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>

运作结果:

亚洲必赢官网 47

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>

运行结果:

亚洲必赢官网 48

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 轴定义线条的截止

运行结果:

亚洲必赢官网 49

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 轴定义线条的终止

运转结果:

亚洲必赢官网 50

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属性定义的垂直半径

运行结果:

亚洲必赢官网 51

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属性定义的垂直半径

运作结果:

亚洲必赢官网 52

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>

 

运转结果:

 亚洲必赢官网 53

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>

 

运行结果:

 亚洲必赢官网 54

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>

 

运作结果:

亚洲必赢官网 55

亚洲必赢官网 56

参数:

image本身就是svg中引入外部图像的元素,刚好在ie8下又能被分析。

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>

 

运转结果:

亚洲必赢官网 57

亚洲必赢官网 58

参数:

image本身就是svg中引入外部图像的因素,刚好在ie8下又能被解析。

四、示例下载

以身作则代码:

学习总括(四)——canvas绘图、WebGL、SVG,html5webgl 一、Canvas
canvas是HTML5中新增一个HTML5标签与操作canvas的javascript
API,它可以兑现在网…

四、示例下载

以身作则代码:

参照:

学习笔记(四)——canvas绘图、WebGL、SVG,html5webgl 一、Canvas
canvas是HTML5中新增一个HTML5标签与操作canvas的javascript
API,它可以已毕在网…

网站地图xml地图