HTML5 Canvas初窥

 在经过了Css3的学习后，相信我们能够更容易的理解HTML5的Canvas画布，如果您还没有学习Css3而又对此感兴趣，请移步我的博客Css3系列，在今后的日子里，我们一起来学习一下HTML5的Canvas画布，领略它的神奇！Canvas元素是HTML5中新增的一个重要元素，专门用来绘制图形。在页面上放置一个canvas元素就相当于在页面上放置了一块“画布”，可以在其中进行图形的描绘。
Canvas的绘制需要通过JS编写在其中进行绘画的脚本。
<canvas>看起来很像<img>，唯一不同就是它不含 src 和 alt 属性。
它只有两个属性，width 和 height，两个都是可选的，并且都可以 DOM 或者 CSS 来设置。
如果不指定width 和 height，默认的是宽300像素，高150像素。
虽然可以通过 CSS 来调整canvas的大小，但渲染图像会缩放来适应布局的 。
结束标签 </canvas> 是必须的。
我们来看一下代码：

<style type="text/css">
.canvas { width:150px; height:150px;}
canvas { border: 1px solid black;}
</style>
<body onload="draw();">
<div class="canvas">
<canvas id="canvas" width="150" height="150">
<p>写在这里面的内容将展示给不兼容canvas的浏览器</p>
</canvas>
</div>
</body>
<script type="text/javascript"> 
function draw() { 
canvas = document.getElementById("canvas");
if (canvas.getContext) { //检测浏览器是否兼容
ctx = canvas.getContext("2d"); //你的canvas代码在这里 
}
//不兼容的代码
}
</script>

定义和用法

getContext() 方法返回一个用于在画布上绘图的环境。

语法

Canvas.getContext(contextID)

参数

参数 contextID 指定了您想要在画布上绘制的类型。当前唯一的合法值是 “2d”，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API。

提示：在未来，如果 <canvas> 标签扩展到支持 3D 绘图，getContext() 方法可能允许传递一个 “3d” 字符串参数。（即现在不仅能支持“2D”）。
返回值

一个 CanvasRenderingContext2D 对象，使用它可以绘制到 Canvas 元素中。

描述

返回一个表示用来绘制的环境类型的环境。其本意是要为不同的绘制类型（2 维、3 维）提供不同的环境。当前，唯一支持的是 "2d"，它返回一个 CanvasRenderingContext2D 对象，该对象实现了一个画布所使用的大多数方法。
好吧，我们来看一个最简单的实例，绘制一个矩形：
代码如下
[javascript]
function draw() {
canvas = document.getElementById("canvas");
if (canvas.getContext) { //检测浏览器是否兼容
ctx = canvas.getContext("2d"); //你的canvas代码在这里
ctx.fillStyle = "blue";//设置绘制颜色
ctx.fillRect(100, 100, 200, 100);//四个参数(x,y,width,height)
}
//不兼容的代码
}
[/javascript]

本文出自http://qdgcs.co.cc，更多html5内容敬请关注前端攻城记博客

 

posted @ 2012-03-29 11:35  _北北  阅读(454)  评论(0)  编辑  收藏  举报