深入了解Canvas标签(1)——基本用法
来源:互联网 发布:linux创建文件夹 权限 编辑:程序博客网 时间:2024/06/05 02:09
让我们从<Canvas>元素的定义开始吧。
- <canvas id="tutorial" width="150" height="150"></canvas>
看起来很像<img>,唯一不同就是它不含 src 和 alt 属性。它只有两个属性,width 和 height,两个都是可选的,并且都可以 DOM 或者 CSS 来设置。如果不指定width 和 height,默认的是宽300像素,高150像素。虽然可以通过 CSS 来调整canvas的大小,但渲染图像会缩放来适应布局的(如果你发现渲染结果看上去变形了,不必一味依赖CSS,可以尝试显式指定canvas的 width 和 height 属性值)。(文/鬼武者)
id 属性不是<canvas>专享的,就像标准的HTLM标签一样,任何一个HTML元素都可以指定其 id 值。一般,为元素指定 id 是个不错的主意,这样使得在脚本中应用更加方便。
<canvas>元素可以像普通图片一样指定其样式(边距,边框,背景等等)。然而这些样式并不会对canvas实际生成的图像产生什么影响。下面我们会看到如何应用样式。如果不指定样式,canvas默认是全透明的。
替用内容
因为 <canvas>相对较新,有些浏览器并没实现,如Firefox 1.0 和 Internet Explorer,所以我们需要为那些不支持canvas的浏览器提供替用显示内容。
我们只需要直接在canvas元素内插入替用内容即可。不支持canvas的浏览器会忽略canvas元素而直接渲染替用内容,而支持的浏览器则会正常地渲染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"/>
- </canvas>
结束标签 </canvas> 是必须的
在Apple Safari里,<canvas>的实现跟<img>很相似,它并不没有结束标签。然而,为了使 <canvas> 能在web的世界里广泛适用,需要给替用内容提供一个容身之所,因此,在Mozilla的实现里结束标签(</canvas>)是必须的。
如果没有替用内容,<canvas id="foo" ...></canvas> 对 Safari 和 Mozilla 是完全兼容的—— Safari 会简单地忽略结束标签。
如果有替用内容,那么可以用一些 CSS 技巧来为并且仅为 Safari 隐藏替用内容,因为那些替用内容是需要在 IE 里显示但不需要在 Safari 里显示。
渲染上下文(Rendering Context)
<canvas> 创建的固定尺寸的绘图画面开放了一个或多个渲染上下文(rendering context),我们可以通过它们来控制要显示的内容。我们专注于2D 渲染上,这也是目前唯一的选择,可能在将来会添加基于OpenGL ES 的 3D 上下文。
<canvas> 初始化是空白的,要在上面用脚本画图首先需要其渲染上下文(rendering context),它可以通过 canvas 元素对象的 getContext 方法来获取,同时得到的还有一些画图用的函数。getContext() 接受一个用于描述其类型的值作为参数。
- var canvas = document.getElementById('tutorial');
- var ctx = canvas.getContext('2d');
上面第一行通过 getElementById 方法取得 canvas 对象的 DOM 节点。然后通过其 getContext方法取得其画图操作上下文。
检查浏览器的支持
除了在那些不支持 的浏览器上显示替用内容,还可以通过脚本的方式来检查浏览器是否支持 canvas 。方法很简单,判断 getContext是否存在即可。
- var canvas = document.getElementById('tutorial');
- if (canvas.getContext){
- var ctx = canvas.getContext('2d');
- // drawing code here
- } else {
- // canvas-unsupported code here
- }
代码模板
我们会用下面这个最简化的代码模板来(后续的示例需要用到)作为开始。
- <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的函数,它会在页面装载完毕之后执行一次(通过设置 body 标签的 onload 属性),它当然也可以在 setTimeout,setInterval,或者其他事件处理函数中被调用。
一个简单的例子
作为开始,来一个简单的吧——绘制两个交错的矩形,其中一个是有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>
- 深入了解Canvas标签(1)——基本用法
- 入了解canvas标签(1)——基本用法
- 深入了解Canvas标签(7)——基本动画
- 深入了解Canvas标签(2)——绘制图形
- 深入了解Canvas标签(3)——使用图像
- 深入了解Canvas标签(5)——变形
- 深入了解Canvas标签(6)——组合
- 深入了解canvas标签(2)——绘制图形
- 深入了解canvas标签(3)——使用图像
- 深入了解canvas标签(6)——组合
- 深入了解Canvas标签(4)——运用样式与颜色
- 深入了解canvas标签(4)——运用样式与颜色
- 入了解canvas标签(5)——变形
- Adsutil.vbs基本用法及深入了解
- Adsutil.vbs基本用法及深入了解
- Adsutil.vbs基本用法及深入了解
- 深入了解canvas
- web.xml深入了解——各种标签
- 急求AD590测温仿真电路,用PROTEUS
- 在UNIX裸设备和文件系统之间移动ORACLE(2)--转
- String中的==和.equals()
- JSP+SERVLET实现“上传”
- Garbage Collection
- 深入了解Canvas标签(1)——基本用法
- 使用System.Net.Mail.SmtpClient 发送邮件
- NoSQL数据库探讨 -- 非关系型数据库
- windows 2008 server iis7 服务 上传文件大小限制(转于傻瓜路路的空间)
- 潘金莲同志永垂不朽!(搞笑)
- Step-By-Step Installation of 9i RAC on IBM AIX(1)
- Step-By-Step Installation of 9i RAC on IBM AIX(2) 转载
- 在Intranet中获得客户端IP地址
- mysql百万级以上查询优化