canvas标签的历史
Canvas简介
Canvas 元素是HTML5的新元素之一，用于在网页上绘制图形，相当于在HTML中嵌入了一张画布，这样就可以直接在HTML上进行图形操作了，所以它具有极大的应用价值。Canvas 元素本身是没有绘图能力的，它需要借助JavaScript来实现绘图功能。
Canvas标签的历史
Canvas这个HTML 元素是为客户端矢量图形而设计的。它自己没有行为，只是把一个绘图API 展现给了客户端JavaScript，以使脚本能够把想绘制的东西都绘制到一块画布上。
<canvas>标记由Apple 在Safari 1.3 Web 浏览器中引入。对HTML进行这一扩展的原因在于，希望HTML 在Safari 中的绘图能力也能为Mac OS X 桌面的Dashboard 组件所使用，并且Apple 希望有一种方式在Dashboard 中支持脚本化的图形。
Firefox 1.5 和Opera 9 都跟随了Safari 的引领，这两个浏览器都支持<canvas>标记。
可以在IE 中使用<canvas>标记，并在IE 的VML 支持基础上用开源的JavaScript 代码（由Google 发起）来构建具有兼容性的画布。
<canvas>的标准化工作正在由一个Web 浏览器厂商的非正式协会进行推动。目前
<canvas>已经成为HTML5 草案中一个正式的标签。
Canvas的定义和用法
Canvas的定义和用法
使用Canvas标签，只需要向HTML5里添加Canvas元素即可，代码如下：
<canvas id="myCanvas" width="200" height="100"></canvas>
如何使用Canvas来绘图
前面已经提到，Canvas 元素本身是没有绘图能力的，所有的绘制工作必须在JavaScript 内部完成。下面来看看如何使用Canvas来绘图。
代码清单1-7所示代码可以实现绘制一个矩形。
代码清单1-7
onload = function() {
draw();
};
function draw() {
/* 使用id 来寻Canvas 元素*/
var canvas = ElementById('canvassample');
/* 验证Canvas元素是否存在，以及浏览器是否支持Canvas元素*/
if ( ! canvas || ! Context ) return false;  /* 创建context 对象*/
var ctx = Context('2d');
/*画一个红矩形*/
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
}
下面来分析一下以上代码。要使用Canvas元素，首先要根据id或name，将Canvas对象取出来，上面的代码使用的是getElementById方法，如果给Canvas标签加入了name属性，那么也可以使用getElementByTagName来获取Canvas对象。
另外，要使用Canvas元素，必须先判断这个元素是否存在及用户所使用的浏览器是否支持此元素。如果无法使用Canvas元素，那么下面做的所有事情都是无意义的。
上面的代码在使用getContext方法时，传递了一个“2d”参数，这就可以得到二维的context 对象以实现二维图形的描画。试想一下，如果将来Canvas可以描画三维图形，或许也可以使用“3d”参数。但是目前还只能使用“2d”作为参数。
在上面的例子中，采用fillStyle方法将画笔颜设置为红。另外，用fillRect方法规定了图形的形状、位置和尺寸。更多Canvas的使用方法，将会在第2章之后进行详细介绍。
HTML5 canvas 元素详细教程一：
基本用法。
<canvas>是Html5中一个全新的元素，它可以被JavaScript语言用来绘制图形。最先
<canvas>是在苹果公司的Mac OS X Dashboard上被引入，他被应用于Safari，而后基于Gecko1.8的浏览器，也支持这个新的元素，例如Firefox浏览器。如今，<canvas>元素已是HTML5标准规范的一部分。
<canvas>能做什么，我们都将通过本教程向大家讲解，并且可以作为你应用<canvas>的起点。学习<canvas>元素并不困难，只需要具有HTML和JavaScript的基础知识，还要Firefox 浏览器，Safari最新版或者Opera9+，这样才能看到所有的示例效果。
现在我们就从如何定义<canvas>元素开始吧。
<canvas>元素只有两个属性Width和Height，这些属性都是可选的，并且可以使用DOM 或css来控制。如果不设置width和height，则使用默认的宽300像素，高150像素。虽然可以通过css来控制和调整<canvas>的大小，但是渲染图像会进行缩放来适应布局，一旦发现渲染结果看上去变形，不必非要依赖css，你可以通过在<canvas>中显示的指定width 和height的值。就像标准的HTML标签一样，也可以定义id属性，这样可以使得脚本应用更加方便。<canvas>元素可以像普通图片一样指定其样式（边距，边框，背景等等）。然而这些样式并不会对canvas实际生成的图像产生什么影响。
因为该元素相对较新，并不是所有的浏览器都支持该元素，所我们要为那些不能正常浏览的提供替用的显示信息，它可以使用文本也可以使用图片：
<canvas id="stockGraph" width="150" height="150">
您的浏览器不支持<canvas>元素。
</canvas>
<canvas id="clock" width="150" height="150">
<img src="images.png" width="150" height="150" alt="替换图片"/>
</canvas>
在Apple Safari里，<canvas>的实现跟<img>很相似，它没有结束标签。然而，为了使
html矩形框代码怎么写
<canvas> 能在web的世界里广泛适用，需要给替用内容提供一个容身之所，因此，在Mozilla的实现里结束标签(</canvas>)是必须的。如果没有替用内容，<canvas
id="foo" ...></canvas> 对Safari 和Mozilla 是完全兼容的——Safari 会简单地忽略结束标签。如果有替用
内容，那么可以用一些CSS 技巧来为并且仅为Safari 隐藏替用内容，因为那些替用内容是需要在IE 里显示但不需要在Safari 里显示。
我们来讲解下上面的代码，<canvas> 初始化是空白的，要使用脚本画图首先需要渲染上下文（rendering context），它可以通过canvas元素对象的getContext方法来获取，同时得到的还有一些画图需要调用的函数。getContext() 接受一个用于描述其类型的值作为参数。上面第一行通过getElementById 方法取得canvas 对象的DOM 节点。然后通过其getContext 方法取得其画图操作上下文。并且我们还可以使用脚本的方式判断浏览器对
<canvas>的支持，即判断getContext是否存在。
var canvas = ElementById('tutorial');
if (Context){
var ctx = Context('2d');
// drawing code here
} else {
我们用下面最简单的模板作为开始，你可以复制他们到本地备用。
<html>
<head>
<title>Canvas tutorial</title>
<script type="text/javascript">
function draw(){
var canvas = ElementById('tutorial');
if (Context){
var ctx = Context('2d');
}
}
</script>
<style type="text/css">
canvas { border: 1px solid black; }
</style>
</head>
<body>
<canvas id="tutorial" width="150" height="150"></canvas>
</body>
</html>
细心的你会发现一个名为draw 的函数，它会在页面装载完毕之后执行一次（通过设置body 标签的onload 属性），它当然也可以在setTimeout，setInterval，或者其他事件处理函数中被调用。
作为开始，来一个简单的吧——绘制两个交错的矩形，其中一个是有alpha透明效果。我们会在后面的示例中详细的让你了解它是如何运作的。
<html>
<head>
<script type="application/x-javascript">
function draw() {
var canvas = ElementById("canvas");
if (Context) {
var ctx = Context("2d");
ctx.fillStyle = "rgb(200,0,0)";
ctx.fillRect (10, 10, 55, 50);
ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect (30, 30, 55, 50);
}
}
</script>
</head>
<body>
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>
HTML5 canvas 元素详细教程二：
绘制图形。
在开始之前，我们需要对canvas 的网格（grid）或者坐标空间（coordinate space）进行探讨。在HTML5 canvas 元素详细教程一中有一个150像素宽，150像素高的canvas 对象的HTML模板。在画面上叠加上默认网格，如右图。通常网格的1个单元对应canvas 上
的1个像素。网格的原点是定位在左上角（坐标(0,0)）。画面里的所有物体的位置都是相对这个原点。
这样，左上角的蓝方块的位置就是距左边x像素和距上边Y像素（坐标(x, y)）。现在我们使用默认的状态来进行图形的绘制吧。
矩形Rectangles
首先来详细介绍矩形的绘制吧，矩形有三个函数可以绘制的：
fillRect(x,y,width,height) : Draws a filled rectangle
strokeRect(x,y,width,height) : Draws a rectangular outline
clearRect(x,y,width,height) : Clears the specified area and makes it fully transparent 上面的函数都接受四个参数，X和Y用于指定矩形左上角也就是相对于原点的位置，width和height用于指定矩形的宽和高。这对于有基础的同学，还是非常简单的。下面，我们使用HTML5 canvas 元素详细教程一里提供的draw() 函数，我们添加了上面的三个函数。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。