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

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