GCanvas 渲染引擎介绍

2017/07/31 · HTML5 ·
Canvas

原文出处: 淘宝前端团队(FED)-
韦青   

菲律宾太阳娱乐集团 1

菲律宾太阳娱乐集团,GCanvas 提供了一套类似于 H5 Canvas 标准的 JavaScript API。基于这套 API
可以方便的去做图形绘制、动画渲染等,开发的体验与 H5 Canvas
是完全一样的。

HTML5 学习总结(四)——canvas绘图、WebGL、SVG,html5webgl

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

GCanvas 组成

菲律宾太阳娱乐集团 3

如上图所示 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>

运行效果:

菲律宾太阳娱乐集团 4

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

练习:画一个100X100的正方形在画布正中央

GCanvas 流程

菲律宾太阳娱乐集团 5

上图是 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 运行结果如下

菲律宾太阳娱乐集团 6

具体分析下整个流程。结合插件层和核心渲染库来分析。

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

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

菲律宾太阳娱乐集团 7

渲染命令的解析,最终通过调用 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();

 菲律宾太阳娱乐集团 8

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

运行效果:

菲律宾太阳娱乐集团 9

移动手机端:

菲律宾太阳娱乐集团 10<!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>

运行效果:

菲律宾太阳娱乐集团 11

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

菲律宾太阳娱乐集团 12

GCanvas 测试例子

下面给出一些 GCanvas 的案例。

  • GCanvas 与 H5 Canvas 性能对比

菲律宾太阳娱乐集团 13

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

运行效果: 

菲律宾太阳娱乐集团 14

附: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 收藏
评论

菲律宾太阳娱乐集团 15

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>

运行效果:

 菲律宾太阳娱乐集团 16

练习:

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>

运行效果:

菲律宾太阳娱乐集团 17

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>

运行结果:

菲律宾太阳娱乐集团 18

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>

运行效果:

菲律宾太阳娱乐集团 19

二、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游戏开发。

菲律宾太阳娱乐集团 20

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

菲律宾太阳娱乐集团 21

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注