HTML5 之Canvas标签学习笔记一：在页面上放置canvas元素

好久没学东西了，都觉得惭愧，不能这样下去了，打算记录下，最近在学HTML5相关的知识，记录下来吧！不然年底找工作的时候都没有拿手的东西！！（感觉自己都快淘汰了）吼吼！警示自己！

当当当~~ HTML5 canvas的东西我一直都觉得很不可思议，强大，不过一看代码，真的有点晕哈哈，其实也不是想象得那么恐怖了！！多练习下，多理解，多消化！，想跑先学会走，从最基本的东西学起

Canvas标签的基础知识：

Canvas是HTML5的新增加的一个重要元素，专门用来绘制图形，动画等等，在页面中放置了一个canvas元素，就相当于放置了一个画布（类似flash的舞台一样），但是不是用鼠标画画，而是用javascript脚本来控制。

<canvas>元素可以像普通图片一样指定其样式（边距，边框，背景等等）。然而这些样式并不会对canvas实际生成的图像产生什么影响。如果不指定样式，canvas默认是全透明的。默认宽度为300px; 高度为150px

因为 <canvas> 相对较新，有些浏览器并没实现，如Firefox 1.0 和 Internet Explorer，所以我们需要为那些不支持canvas的浏览器提供替用显示内容。

我们只需要直接在canvas元素内插入替用内容即可。不支持canvas的浏览器会忽略canvas元素而直接渲染替用内容，而支持的浏览器则会正常地渲染canvas。例如，我们可以把一些文字或图片填入canvas内，作为替用内容：

View Code

<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>

渲染上下文（Rendering Context）

<canvas> 创建的固定尺寸的绘图画面开放了一个或多个渲染上下文（rendering context），我们可以通过它们来控制要显示的内容。我们专注于2D 渲染上，这也是目前唯一的选择，可能在将来会添加基于OpenGL ES 的 3D 上下文。

<canvas> 初始化是空白的，要在上面用脚本画图首先需要其渲染上下文（rendering context），它可以通过 canvas 元素对象的 getContext 方法来获取，同时得到的还有一些画图用的函数。getContext() 接受一个用于描述其类型的值作为参数。

View Code

var canvas = document.getElementById('tutorial');
var ctx = canvas.getContext('2d');

上面第一行通过 getElementById 方法取得 canvas 对象的 DOM 节点。然后通过其 getContext 方法取得其画图操作上下文。

检查浏览器的支持

除了在那些不支持的浏览器上显示替用内容，还可以通过脚本的方式来检查浏览器是否支持 canvas 。方法很简单，判断 getContext 是否存在即可。

View Code

var canvas = document.getElementById('tutorial');
if (canvas.getContext){
  var ctx = canvas.getContext('2d');
  // drawing code here
} else {
  // canvas-unsupported code here
}

今天就到这吧，参考网址 https://developer.mozilla.org/zh-CN/docs/Canvas_tutorial