上一篇 下一篇
要在网络上创建的图形应用程序，HTML-5提供了一套丰富的功能，如2D画布，WebGL，SVG，CSS3D变换和SMIL。要编写WebGL的应用程序，我们可以使用HTML-5现有的canvas元素。本章提供了HTML-52D canvas元素的概述。
HTML5 Canvas
HTML-5<canvas>提供了一个简单而强大的选项来使用 JavaScript 绘制图形。它可以用来绘制图形，使照片组合，或做简单的(和不那么简单的)动画。
这是一个简单的<canvas>元素只有两个特定的属性：width和height，以及所有HTML5元素有核心的属特，例如像：id，name和class。
语法HTML画布<canvas>标记的语法如下所示。要提到这些在双引号(“”)画布的名称。
<canvas id = "mycanvas" width = "100" height = "100"></canvas> Canvas 属性canvas 标签有三个属性，即：id, width 和 height。
Id − ID代表在文档对象模型(DOM)canvas元素的标识符。
Width − 表示canvas的宽度。
Height − 表示canvas的高度。
这些属性决定 canvas 的大小。如果程序员不指定<canvas>标签的大小，那么浏览器如Firefox，Chrome浏览器和Web工具包，默认情况下为canvas元素提供尺寸为300×150。
示例 - 创建一个Canvas下面的代码演示了如何创建一个画布(canvas)。我们用CSS来将一个彩色边框添加到画布上。
<html> <head> <style> #mycanvas{border:1px solid red;} </style> </head> <body> <canvas id = "mycanvas" width = "300" height = "200"></canvas> </body> </html>
这将产生以下结果 -
<canvas>最初为空。要canvas元素上显示东西，必须使用的脚本语言。这个脚本语言应该访问渲染上下文，并且绘制就可以了。
canvas元素有一个DOM方法是 getContext()，它被用来获取呈现上下文和它的绘图功能。这个方法有一个参数，上下文 2D 类型。
下面的代码将被写入，以获得必要的上下文。可以将此脚本写在body标签内，如下图所示。
<!DOCTYPE HTML> <html> <body> <canvas id = "mycanvas" width = "600" height = "300"></canvas> <script> var canvas = document.getElementById('mycanvas'); var context = canvas.getContext('2d'); context.font = '20pt Calibri'; context.fillStyle = 'green'; context.fillText('Welcome to Yiibai Tutorial', 100, 100); </script> </body> </html>
这将产生以下结果 -
HTML5画布(Canvas)也用于写WebGL的应用程序。要创建canvas元素使用WebGL来渲染，应该可传递 experimental-webgl，WebGL，而不是2D到 canvas.getContext()方法。有些浏览器只支持“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>这将产生以下结果 -
标签：Html5 Canvas 介绍
本站文章除注明转载外，均为本站原创或编译
欢迎任何形式的转载，但请务必注明出处，尊重他人劳动共创优秀实例教程
转载请注明：文章转载自：易百教程 [http:/www.yiibai.com]
本文标题：Html5 Canvas介绍
本文地址：
上一篇 下一篇
相关文章
精彩导读
热门资讯
关注我们
