Canvas使用教程——基本语法(Basic usage)
原文:http://developer.mozilla.org/en/Canvas_tutorial/Basic_usage
好,现在开始我们的canvas探究之旅……
<canvas id="tutorial" width="150" height="150"></canvas>
乍看上去,该标签类似于<img>,不过它不支持src和alt属性,<canvas>标签仅仅支持2个属性:width和height。当宽度和高度没有指定时,他们的默认值为300px和150px。该元素可以象任何普通的图像一样应用样式(margin、border、background等)。但是这些样式设置并不影响canvas实际的绘制效果。在后续的介绍中我们将知道这是如何发生的,当没有在<canvas>上应用任何样式的时候,其初始化默认是完全透明的。
其实我们还可以为canvas标签指定id或者class等HTML元素都支持的属性,尤其是为canvas指定一个id,将为今后在脚本操作时指定DOM起到一个关键的作用。
Fallback content
值得注意的是,由于canvas在目前来讲,还不是一个被所有浏览器都支持的标签,当一个浏览器不支持该标签时,我们需要提供一个“fallback content”来进行告知。
很简单,我们可以写些提示信息在<canvas>标签内,不支持该标签的浏览器将自动忽略标签并显示标签中的文字,而当支持该标签的浏览器解析它时,标签内的告知文本亦会被忽略。
举个例子,我们可以采用如下方法对不支持canvas标签的浏览器进行告知:
<canvas id="stockGraph" width="150" height="150"> current stock price: $3.15 +0.15 </canvas> <canvas id="clock" width="150" height="150"> <img src="images/clock.png" width="150" height="150" alt=""/> </canvas>
Required </canvas> tag
在Apple的Safari浏览器的解析中,canvas标签的表现有些类似于<img>,浏览器不检测关门标记。所以,当canvas标签被正常渲染后,标签里面的“fallback content”也会一起显示出来。当然,这个状况在FireFox中不会存在。
如果不需要“fallback content”,一个简单的“<canvas id="foo" ...></canvas>”会最大限度的兼容safari和FireFox浏览器,此时,safari浏览器只是简单的忽略</canvas>标记,不过,一点影响都没有。
当然,如果我们一定要写点“fallback content”的话,我们可以运用一些CSS小技巧,将溢出的内容隐藏掉。
The Rendering Context
<canvas>标签实际上创建了一个指定尺寸的画板,供一个或多个指令进行渲染作画。目前,我们只是注重于其2D渲染功能,不过将来,该标签应该能够支持一些更复杂的指令渲染,比如基于OpenGL指令的3D内容。
<canvas>初始只不过是一个空的画板,如果想要让它显示些什么,首先需要脚本去访问它。canvas带有一个DOM方法:getContext。申明了这个方法,我们便可以获得进行画图创作的一些内部函数,getContext方法带有一个参数——context的维数。
var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');
首先我们制定了一个canvas的DOM节点,并执行getContext方法来访问“drawing contex”,目前支持的参数只有“2d”。
Checking for support
利用以下方法可以很好的规避不支持canvas标签的浏览器:
var canvas = document.getElementById('tutorial'); if (canvas.getContext){ var ctx = canvas.getContext('2d'); // drawing code here } else { // canvas-unsupported code here }
A skeleton template
这里提供一个简单的模板,我们将在后面的例子中运用到这样一个标准模板。
<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 onload="draw();"> <canvas id="tutorial" width="150" height="150"></canvas> </body> </html>
在以上模板中,我们定义了一个叫draw的方法,并在页面加载完成后执行它。当然,如果你愿意,你完全可以由其他事件来触发该函数。
A simple example
在下面的示例中,我们画了2个相互交叠的举行,并且其中一个还加上了点alpha透明,接下来,我们将在后面的几个实例中探索一下一些功能是如何实现的:
<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)";
ctx.fillRect (30, 30, 55, 50);
}
}
</script>
</head>
<body onload="draw();">
<canvas id="canvas" width="150" height="150"></canvas>
</body>
</html>
加支付宝好友偷能量挖...