Html5 Canvas 概述,学习WebGL,WebGL教程,WebGL参考手册_H5之家

Html5 Canvas 概述

要在web上创建图形应用程序,HTML5提供了一组丰富的功能,如Canvas、WebGL、SVG、3D CSS transforms和SMIL.。要编写WebGL应用程序,我们使用html的现有Canvas元素。本章提供了HTML5 2D画布的概述。

HTML5

Html5 Canvas提供了一个使用JavaScript绘制图形的简单强大的功能。它可以用于绘制图形、制作照片组合或做动画。

一个简单的Canvas元素,只有两个特定的属性width和height 加上所有核心html 5属性,如id、名称和类。

语法

下面给出了Html5 Canvas标记的语法,你必须在双引号("")内指定Canvas的名字。

Canvas属性

Canvas标记有三个属性,即id、width和height 。

id-文档对象模型(DOM)中的画布元素的标识符。

width-宽度表示画布的宽度。

height-高度代表画布的高度。

这些属性确定画布的大小,如果开发人员不在Canvas标签中指定它们,那么默认情况下,浏览器如Firefox、chrome和web工具包提供一个大小为300×150的画布元素。

实例-创建一个画布

以下代码显示如何创建画布。我们使用CSS给画布提供彩色边框。

<html> <head> <style> #mycanvas{border:1px solid red;} </style> </head> <body> <canvas id = "mycanvas" width = "100" height = "100"></canvas> </body> </html>

HTML Context 渲染

<Canvas>默认是空白图像,要在画布上显示一些东西,我们必须使用脚本语言,此脚本语言应该访问呈现上下文并绘制。

画布元素有一个称为getContext()的DOM方法,用于获取呈现上下文及其绘图函数。此方法采用一个参数,即context 2d的类型。

以下代码获取所需的上下文,设置并输出文字。您可以在body标记中编写此脚本,如下所示。

<!DOCTYPE HTML> <html> <body> <canvas id = "mycanvas" width = "600" height = "200"></canvas> <script> var canvas = document.getElementById('mycanvas'); var context = canvas.getContext('2d'); context.font = '20pt Calibri'; context.fillStyle = 'green'; context.fillText('Welcome to Kaifaxueyuan', 70, 70); </script> </body> </html>

WebGL 上下文

HTML5画布也用于编写WebGL应用程序。要在画布元素上创建WebGL内容,应该在getContext方法中提供一个字符串类型参数"experimental-webgl",注意:一些浏览器只支持WebGL。

<!DOCTYPE html> <html> <canvas id = 'my_canvas'></canvas> <script> var canvas = document.getElementById('my_canvas'); var gl = canvas.getContext('experimental-webgl'); gl.clearColor(0.9,0.9,0.8,1); gl.clear(gl.COLOR_BUFFER_BIT); </script> </html>