html5 <canvas> 学习4步曲
2011-07-13 11:24 x_feng 阅读(273) 评论(0) 编辑 收藏 举报1,Basic usage:
https://developer.mozilla.org/cn/Canvas_tutorial%3aBasic_usage
2,绘制图形 Drawing shapes:
https://developer.mozilla.org/cn/Canvas_tutorial%3aDrawing_shapes
3,应用图像 Using images:
https://developer.mozilla.org/cn/Canvas_tutorial%3aUsing_images
4,运用样式与颜色:
https://developer.mozilla.org/cn/Canvas_tutorial/Applying_styles_and_colors
/*
<canvas>元素定义：
<canvas id = "muCanvas" width = "100" height ="200">
canvas只有2个属性，width和height，并且都是可选的。并且都可以用Dom或者css来设置。
id 属性不是<canvas>专享的，就像标准的HTLM标签一样，任何一个HTML元素都可以指定其 id 值。一般，为元素指定 id 是个不错的主意，这样使得在脚本中应用更加方便。
*/
/*
因为 <canvas> 相对较新，有些浏览器并没实现，如Firefox 1.0 和 Internet Explorer，所以我们需要为那些不支持canvas的浏览器提供替用显示内容。
我们只需要直接在canvas元素内插入替用内容即可。不支持canvas的浏览器会忽略canvas元素而直接渲染替用内容，而支持的浏览器则会正常地渲染canvas。例如，我们可以把一些文字或图片填入canvas内，作为替用内容：
*/
<canvas id = "stockGraph" width = "100" height = "200">
current stock pirice :100 RMB
</canvans>
<canvas id = "stockGraph" width = "100" height = "200">
<img src = "imgs/clock.png" width = "100" height = "200">
</canvas>
Rendering Context:
/*
<canvas> 创建的固定尺寸的绘图画面开放了一个或多个渲染上下文（rendering context），我们可以通过它们来控制要显示的内容。我们专注于2D 渲染上，这也是目前唯一的选择，可能在将来会添加基于OpenGL ES 的 3D 上下文。
<canvas> 初始化是空白的，要在上面用脚本画图首先需要其渲染上下文（rendering context），它可以通过 canvas 元素对象的 getContext 方法来获取，同时得到的还有一些画图用的函数。getContext() 接受一个用于描述其类型的值作为参数。
*/
<canvas id = "myCanvas"></canvas>
<script type = "text/javascript">
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
</script>
/*
上面第一行通过 getElementById 方法取得 canvas 对象的 DOM 节点。然后通过其 getContext 方法取得其画图操作上下文。
*/
检查浏览器的支持:
if (canvas.getContext){
//drawing 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>
/*
不像 SVG，canvas 只支持一种基本形状——矩形，所以其它形状都是有一个或多个路径组合而成。还好，有一组路径绘制函数让我们可以绘制相当复杂的形状。
*/
我们首先看看矩形吧，有三个函数用于绘制矩形的：
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
/*
cxt.fileRect();
cxt.clearRect();
cxt.strokeRect();
*/
绘制路径 Drawing paths:
beginPath(); closePath(); stroke(); fill();
弧线 Arcs
/*
第一步是用 beginPath 创建一个路径。在内存里，路径是以一组子路径（直线，弧线等）的形式储存的，它们共同构成一个图形。每次调用 beginPath，子路径组都会被重置，然后可以绘制新的图形。
第二步就是实际绘制路径的部分.
第三步是调用 closePath 方法，它会尝试用直线连接当前端点与起始端点来关闭路径，但如果图形已经关闭或者只有一个点，它会什么都不做。这一步不是必须的。
最后一步是调用 stroke 或 fill 方法，这时，图形才是实际的绘制到 canvas 上去。stroke 是绘制图形的边框，fill 会用填充出一个实心图形。
*/
