Canvas 基础

web前端：Canvas 基础（一）

1. canvas 简介
   是HTML5中重要的元素,和audio、video元素类似完全不需要任何外部插件就能够运行.
   Canvas中文翻译就是”画布”.它提供了强大的图形的处理功能(绘制,变换,像素处理…)。
   但是需要注意，canvas 元素本身并不绘制图形，它只是相当于一张空画布。
   如果开发者需要向 canvas 上绘制图形，则必须使用 JavaScript 脚本进行绘制。

canvas 能够做什么？
基础图形的绘制
文字的绘制
图形的变形和图片的合成
图片和视频的处理
动画的实现
小游戏的制作

支持的浏览器
大多数现代浏览器都是支持Canvas的,比如 Firefox, safari, chrome, opera的最近版本以及IE9都支持.
IE8及以下不支持HTML5,但是我们可以进行提示用户更新到最新的版本

关于canvas 标签的基本概念

在 HTML 页面上定义 canvas 元素与定义其他普通元素并无任何不同，
它除了可以指定 id, style ,class ,hidden 等通用属性之外，还可以设置 width 和 height 两个属性。
除此之外，我们在网页中定义 canvas 元素之后，它只是一张空白的画布，想要在画布上绘画，一定要经过下面几步。

获取 canvas 元素对应的 DOM 对象，这必须是一个 canvas 对象
调用 canvas 对象的 getContext( ) 方法,该方法返回一个 canvasRenderingContext2D 对象，该对象可以绘制图形。
调用 canvasRenderingContext2D 对象的方法进行绘图。

beginPath() 开始定义路径
closePath() 关闭前面定义的路径
moveTo(float x,float y) 把 canvas 的当前路径的结束点移动到 x, y 对应的点
lineTo(float x,float y) 把 canvas 的当前路径从当前结束点连接到 x , y 对应的点
需要注意，moveTo 可以简单理解为，把当前绘制图像的起点设置为某一特定坐标，而 lineTo 则是将当前的起点和你想要设置的那个点之间连接起来。
而 beginPath 是表示开始定义路径，不会产生特殊的效果。而 closePath 除了表示关闭当前定义的路径之外，还会有一个特殊的作用，就是可以将当前绘制图形的最后一个点和我们绘制图形开始的点进行连接
当然，如果你只需要画一条线，不去加beginPath 和 closep 你的内容实际也是可以出来的，但是推荐加上。

fill() 填充 canvas 当前路径
stroke() 填充 canvas 当前路径绘制边框
fillStyle() 设置填充 canvas 路径所使用的填充风格
strokeStyle() 设置绘制 canvas 路径的填充风格

符合颜色格式的字符串值，表示使用纯色填充
CanvasGradient，表明使用渐变填充
CanvasPattern，表明使用位图填充

lineWidth() 设置笔触线条的宽度
lineJoin 设置返回所创建边角的类型，当两条线交汇时。
bevel 创建斜角
round 创建圆角
miter 默认，创建尖角
strokeRect(float x,float y,float width,float height) 绘制一个矩形边框
fillRect(float x,float y,float width,float height) 填充一个矩形边框