canvas

canvas定义

是 HTML5 新增的元素，可用于通过使用JavaScript中的脚本来绘制图形
例如，它可以用于绘制图形，创建动画。 最早由Apple引入WebKit
渲染上下文
元素只是创造了一个固定大小的画布，要想在它上面去绘制内容，
我们需要找到它的渲染上下文
元素有一个叫做 getContext() 的方法，这个方法是用来获得渲染上下文和它的绘画功能。
getContext()只有一个参数，上下文的格式
----->获取方式
var canvas = document.getElementById(‘box’);
var ctx = canvas.getContext(‘2d’);

		----->检查支持性
			  var canvas = document.getElementById('tutorial');
			  if (canvas.getContext){
					var ctx = canvas.getContext('2d');
				} 

画布高宽的问题
画布默认高宽300*150
切记一定要使用html的attribute的形式来定义画布的宽高
通过css形式定义会缩放画布内的图像

绘制图形

HTML中的元素canvas只支持一种原生的图形绘制：矩形。所有其他的图形的绘制都至少需要生成一条路径
1.绘制矩形
canvas提供了三种方法绘制矩形：
---->绘制一个填充的矩形（填充色默认为黑色）
fillRect(x, y, width, height)
---->绘制一个矩形的边框（默认边框为:一像素实心黑色）
strokeRect(x, y, width, height)
---->清除指定矩形区域，让清除部分完全透明。
clearRect(x, y, width, height)

2.添加样式和颜色
fillStyle :设置图形的填充颜色。
strokeStyle :设置图形轮廓的颜色。
默认情况下，线条和填充颜色都是黑色（CSS 颜色值 #000000）
lineWidth : 这个属性设置当前绘线的粗细。属性值必须为正数。
描述线段宽度的数字。 0、 负数、 Infinity 和 NaN 会被忽略。
默认值是1.0。

4.lineWidth & 覆盖渲染

5.lineJoin 设定线条与线条间接合处的样式（默认是 miter） round : 圆角 bevel : 斜角 miter : 直角

###绘制三角形
beginPath()
新建一条路径，生成之后，图形绘制命令被指向到路径上准备生成路径。
moveTo(x, y)
将笔触移动到指定的座标x以及y上
lineTo(x, y)
将笔触移动到指定的座标x以及y上
绘制一条从当前位置到指定x以及y位置的直线
closePath()
闭合路径之后图形绘制命令又重新指向到上下文中。
stroke()
通过线条来绘制图形轮廓。
不会自动调用closePath()
fill()
通过填充路径的内容区域生成实心的图形。
自动调用closePath()

canvas绘制圆形
arc(x, y, radius, startAngle, endAngle, anticlockwise)
画一个以（x,y）为圆心的以radius为半径的圆弧（圆），从startAngle开始到endAngle结束，
按照anticlockwise给定的方向（默认为顺时针）来生成。

arcTo(x1, y1, x2, y2, radius)
根据给定的控制点和半径画一段圆弧
肯定会从(x1 y1) 但不一定经过(x2 y2);(x2 y2)只是控制一个方向

canvas中的变换

translate(x, y)
我们先介绍 translate 方法，它用来移动 canvas的原点到一个不同的位置。
translate 方法接受两个参数。x 是左右偏移量，y 是上下偏移量，

	在canvas中translate是累加的

rotate(angle)
这个方法只接受一个参数：旋转的角度(angle)，它是顺时针方向的，以弧度为单位的值。
旋转的中心点始终是 canvas 的原点，如果要改变它，我们需要用到 translate 方法

	在canvas中rotate是累加的

scale(x, y)
scale 方法接受两个参数。x,y 分别是横轴和纵轴的缩放因子，它们都必须是正值。
值比 1.0 小表示缩小，比 1.0 大则表示放大，值为 1.0 时什么效果都没有。
缩放一般我们用它来增减图形在 canvas 中的像素数目，对形状，位图进行缩小或者放大。

	在canvas中scale是累称的

使用图片

1.canvas操作图片时，必须要等图片加载完才能操作
2.drawImage(image, x, y, width, height)
其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始座标。
这个方法多了2个参数：width 和 height，这两个参数用来控制 当像canvas画入时应该缩放的大小

绘制文本

fillText(text, x, y)
在指定的(x,y)位置填充指定的文本
strokeText(text, x, y)
在指定的(x,y)位置绘制文本边框
canvas中文本水平垂直居中

				ctx.font= "30px sans-serif"
                ctx.textBaseline = "middle"
                var w = ctx.measureText("kobe").width
                ctx.fillText("kobe",(canvas.width-w)/2,(canvas.height-60)/2)

像素操作

getImageData():获得一个包含画布场景像素数据的ImageData对像,它代表了画布区域的对象数据

ImageData对象中存储着canvas对象真实的像素数据，它包含以下几个只读属性：
width:图片宽度，单位是像素
height:图片高度，单位是像素
data:Uint8ClampedArray类型的一维数组，
包含着RGBA格式的整型数据，范围在0至255之间（包括255）
R:0 --> 255(黑色到白色)
G:0 --> 255(黑色到白色)
B:0 --> 255(黑色到白色)
A:0 --> 255(透明到不透明)

createImageData(width, height);

覆盖合成

source:新的图像(源)
destination:已经绘制过的图形(目标)

globalCompositeOperation
source-over(默认值):源在上面,新的图像层级比较高
source-in :只留下源与目标的重叠部分(源的那一部分)
source-out :只留下源超过目标的部分
source-atop:砍掉源溢出的部分

destination-over:目标在上面,旧的图像层级比较高
destination-in:只留下源与目标的重叠部分(目标的那一部分)
destination-out:只留下目标超过源的部分
destination-atop:砍掉目标溢出的部分

画布的4个API

oc.getContext(“2d”):获取画布的2d上下文
oc.width:画布在横向上css像素的个数
oc.height:画布在纵向上css像素的个数
oc.toDataUrl():拿到画布的图片地址