名站网址导航名站网址导航小编为爱好网页hTML5的朋友提供关于网页hTML5的相关知识。
- 本篇文章的具体介绍如下
基本特性
<canvas>是网页hTML5教程里面定义的一个新网页元素，您能够在此网页元素里绘画、嵌入图片并使用javaScript脚本产生一段动画。
<canvas>首次在Mac OS X中的Dashboard中被引入，之后又被苹果公司的Safari浏览器所支持，采用Gecko1.8 引擎的浏览器都支持此网页文章标签（译注：Safari及Chrome采用的Webkit引擎也支持此网页文章标签），在W3C标准中，<canvas>网页元素做为Web application 1.0标准的一部分被引入——同时，咱们也称其为网页hTML5教程 。
本文档旨在指导您如何在您的网页hTML文档中使用<canvas>网页元素，并提供一些简明的具体相关以助您更好的理解它。
准备工作
在使用<canvas>之前，您需要了解一些基本的网页hTML及Javascript知识。
并且，请确保您使用的浏览器能正确的支持<canvas>网页文章标签，咱们向您推荐Firefox 1.5 /Opera 9/Safari 3 /Chrome，无论如何，请不要在IE上调试包含<canvas>网页文章标签的具体代码。
--------------------------------------------------------------------------------
hello，canvas
示例具体代码：
<canvas id="tutorial" width="150" height="150"></canvas>它看起来很像<img>网页文章标签，不同的是它没有src和alt属性，它的height和width属性是可选的，您也可以在CSS属性里对其指定高宽度，但这样做的话，其内部绘入的图像可能因为缩放大小而扭曲，所依，如果您在<canvas>中绘入的图像看起来似乎有点不一样，请尝试在CSS属性里去掉高宽度，而在其网页hTML属性中指定。当您没有给<canvas>指定高宽度时，它将具有默认的宽度300px，高度150px的属性。（译注：经在Chrome和Safari中测试，不给高宽度时它们都把<canvas>渲染为300×150px大小，所依，这应该是W3C的一个指导标准，而非Firefox的私有特性。）
如同绝大多数网页hTML网页文章标签，您也可以为其指定一个id属性来对它与其它网页元素进行区分。
<canvas>的表现看起来如同一个普通<img>网页文章标签（它也具有margin，border，background等），但这些属性不会影响到最终的绘画输出，本文后部的示例将有助您理解这一点。而如果没有为其定义任何属性的话，<canvas>看起来就如同一个透明的gif。
平稳退化
因为<canvas>还是一个较新的网页文章标签，所依在一些老的浏览器中它并不能被正常解析（译注：例如Firefox 1.5和全系列的IE——是的，包括IE8），咱们需要做一些工作来平稳退化到这些老的浏览器——这非常简单，老的浏览器不支持<canvas>网页文章标签，它们将其忽略掉，而接着解析接下来的内容，这样，咱们只需要<canvas>内提供一些替代的内容，如一些文字或者图片，这样，支持<canvas>的浏览器将忽略<canvas>内部的内容，而老的浏览器将忽略<canvas>，各取所需，皆大欢喜。
具体代码示例：
<canvas id="stockGraph" width="150" height="150"> //支持canvas的浏览器解析它
current stock PRice: $3.15 0.15 //不支持canvas的浏览器解析它
</canvas>
<canvas id="clock" width="150" height="150"> //同上
<img src="images/clock.png" width="150" height="150" alt=""/>
</canvas>必要的</canvas>结尾
在Safari中，<canvas>就像<img>网页文章标签一样被对待，所依</canvas>结尾不是必需的，然而在一些老版本的Firefox上，</canvas>是必需的，正确的写法是让<canvas></canvas>成对的出现。
渲染方式
<canvas>在浏览器中创见一个固定大小的具有一层或多层结构的平面（译注：您可以理解为N片大小相同的玻璃并在一起，您可以在每一片玻璃上画画），目前<canvas>可用的一些绘图方式都是基于2D平面的，在未来，也许<canvas>可以增加一些3D的绘图方式，比如基于OpenGL ES的一些新特性。
浏览器刚载入<canvas>时，它里面是空白的，接下来您可以利用javaScript脚本为其增加背景图片，或是在其上绘画。<canvas>有一个标准的DOM实用具体的方法：getContext ，用于引用<canvas>内部的内容。getContext()有一个具体参数，用于指定其绘图的类型（2D或3D）。
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');检查浏览器是否支持
在上面的“平稳退化”部分咱们在网页hTML中为不支持<canvas>的浏览器准备了一部分不同的内容，同样，在javaScript中，咱们也可以通过检查getContext实用具体的方法，来确定浏览器是否支持<canvas>，具体代码如下：
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
// 为支持getContext的浏览器准备的内容
} else {
// 为不支持getContext的浏览器准备的内容
}一个基本的框架
下面是一个基本的使用<canvas>的框架具体代码，接下来几章的一些具体相关咱们将用到它，建议您下载此相关站点文件到您的计算机。
<html>
<head>
<title>Canvas tutorial</title>
<script type="text/javaScript">
function draw(){
var canvas = document.getElementById('tutorial');
if (canvas.getContext){
var ctx = canvas.getContext('2d');
}
}
</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body onl oad="draw();">
<canvas id="tutorial" width="150" height="150"></canvas>
</body>
</html>一个简单的具体相关
接下来咱们以一个简单的具体相关结束此章：咱们在<canvas>中绘入两个矩形，其中一个具有50%的透明度。
查看此例
<html>
<head>
<script type="application/x-javaScript">
function draw() {
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
var ctx = canvas.getContext("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";//rgba分别对应red,green,blue,alpha
ctx.fillRect (30, 30, 55, 50);
}
}
</script>
</head>
<body onl oad="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>
关于网页hTML5的相关知识就说到这里希望可以帮助朋友们。,网页hTML5教程能否成为Flash终结者
毋庸置疑，Adobe的 Flash技术帮助填补了跨平台多媒体在网络上体验的空白。除了卖的火热的iPhone和即将面世的ipad外，几乎在所有的其它操作系统,无论是台式机操作系统，还是手机操作系统或者是Web浏览器，可以找到Flash的身影。
