canvas API

准备

一.width和height

 <canvas id="myCanvas" width="666" height="666" > </canvas>

这里的width和height指实际像素宽高，我们也可以理解为是canvas的分辨率，按标准不带单位， 与在css里面定义是两种东西：

1.从js来看


	canvas.width=666;
	canvas.height=666;
	canvas.style.width="666px"
	canvas.style.height="666px

2.从html来看


	<canvas id = "myCanvas" width="300" height="300"></canvas>
	<canvas id = "myCanvas" style="width:300px;height:300px"></canvas>

上面的代码画出来的效果如下：

3.总结


	<canvas width="300" height="300" style="width:100px;height="100px">

实际上是把一个300x300的canvas画布强制缩放成100px*100px了。canvas本身有一个默认的width和height，一般是300x150

二.beginPath和closePath

beginPath和closePath是绘图过程中必不可少的两个东西，他们完全没有关系

beginPath方法类似于开启新的路径绘画或清空已有路径,会以最接近的上一个beginPath为起点渲染下面的所有绘图


    context.beginPath()
	context.moveTo(100,100)
	context.lineTo(700,700)
	context.strokeStyle = "#005588"
	context.stroke()
    //context.beginPath()
	context.moveTo(200,200)
	context.lineTo(800,800)
	context.strokeStyle = "#ff6567"
	context.stroke()

closePath：并不是表示结束，它的意思是关闭路径，就是从当前路径的终点连一条路径到起点，让整个路径闭合起来。但是如果没有它，用了fill()内部色填充，也是会如期把可能的闭合路径填上内部色。

就是说下面的两段代码是一个效果。


	//eg1
	context.moveTo(100,100)
	context.lineTo(700,700)
	context.lineTo(100,700)
	context.closePath()
	//eg2
	context.moveTo(100,100)
	context.lineTo(700,700)
	context.lineTo(100,700)
	context.lineTo(100,100)

综上beginPath和closePath其实是没有关系的~

一.基本图形

线

绘制一条从当前未知到指定x以及y位置的直线

lineTo(x,y)

这里的x和y是代表结束的点坐标，开始点与之前绘制的路径有光，也可以通过moveTo()来改变。

矩形

绘制一个填充的矩形，，注意在使用fillRect绘制矩形时，必须先设置各种样式，否则样式无效（代码顺序）

fillRect(x,y,width,height)

绘制一个矩形边框

strokeRect(x,y,width,height)

清除矩形区域

clearRect(x,y,width,height)

以上xy均指在canvas画布上离左上角原点的坐标

圆弧

arc(圆心坐标，圆心坐标，半径的值，弧线开始于哪个弧度值，结束于哪个弧度值，顺时针或逆时针false为顺时针可选参数)

0pi在正东方向

注意：arc()函数中的角度单位是弧度，不是度数。

贝塞尔曲线

绘制二次贝塞尔曲线，x,y为结束点；cp1x,cp1y为控制点，用于决定该曲线的形状。这个方法所绘制的贝塞尔曲线会将锚点与当前路径最后一个点连接起来。

quadraticCurveTo(cp1x,cp1y,x,y)

绘制三次贝塞尔曲线，x,y为结束点，cp1x,cp1y为控制点一，cp2x,cp2y为控制点2

bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y))

二.样式

colors

设置图形的填充颜色

fillStyle = color

设置图形轮廓的颜色

strokeStyle = color

这两个属性除了可以应用颜色外，也可以被设置为渐变色或者图案

应用例子：七巧板

应用例子：调色板

透明度ransparency

fillStyle = "rgba(255,0,0,0.5)"

strokeStyle= "rgba(255,0,0,0.5)

globalAlpha属性（0~1.0）

context.globalAlpha = 0.2

渐变

创建线性渐变，表示渐变线的两个端点。可以通过addColorStop()方法来向该渐变线增加颜色停止点。

crearLinearGradient(x1,y1,x2,y2)

创建放射渐变，参数表示位于圆锥形渐变区域两端的圆形。

createRadialGradient(x1,y1,r1,x2,y2,r2)

阴影

canvas中的阴影主要为以下4个属性所控制：

1.shadowColor:css3格式的颜色；

2.shadowOffsetX:从图形或者文本到阴影的水平像素偏移，可为负整数

3.shadowOffsetY

4.shadowBlur：与像素无关，用于设定阴影的模糊程度，也不受变换矩阵的影响，默认为 0

三.文本

文本的填充

fillText(text,x,y,[可选]最大宽度)

绘制文本边框

strokeText(text,x,y，[可选]最大宽度)

样式：

context.font="10px sans-serif" //默认值，字体大小和字体类型，必填

textAlign = value 
	//基线水平对齐选项. 可选的值包括：start,left,center,right,end。默认值是 start

textBaseline = value  
	//基线竖直对齐选项. 可选的值包括：
	top, hanging, middle, alphabetic, ideographic, bottom。默认值是 alphabetic

direction = value 
	//文本方向。可能的值包括：ltr, rtl, inherit。默认值是 inherit。

measureText(text)

四.图案

fillStyle和strokeStyle除了可用渐变色和颜色，还可以用图案来描边或者填充

creatPattern(image,type)

type可取以下值：repeat ,repeat-x,repeat-y,no-repeat,道理同css里的background，用法跟渐变很类似的，创建出一个 pattern 之后，赋给 fillStyle 或 strokeStyle 属性即可

var img = new Image(); img.src = 'someimage.png';var ptrn = context.createPattern(img,'repeat');

Image()函数


	var img = new Image();
    img.onload=function(){
      	ctx.drawImage(img,50,50,51,51)
    }
    img.src = 'redball.png'
    //img.src="Base64"

五.其他

save()&restore()

save 和 restore 方法是用来保存和恢复 canvas 状态的，都没有参数。Canvas 的状态就是当前画面应用的所有样式和变形的一个快照。

Canvas状态存储在栈中，每当save()方法被调用后，当前的状态就被推送到栈中保存，可以任意次使用save(),每一次调用 restore 方法，上一个保存的状态就从栈中弹出，所有设定都恢复。

context.save();context.restore();

globalCompositeOperation

globalCompositeOperation = type

type有12种取值，比如以下：

source-over ：默认，新图形覆盖在原有图形之上

destination-over：与上面相反

source-in：仅出现新图形中与老图形重叠的部分，其余透明

source-atop：新图形中与原有内容重叠的部分会被绘制，并覆盖于原有内容之上。

copy：新图形会被保留，其余清除

...

Clipping paths

clip():用法与stroke()和fill() 类似


   	ctx.beginPath();
  	ctx.arc(0,0,60,0,Math.PI*2,true);
  	ctx.clip();

getImageData()& putImageData

getImageData() 方法返回 ImageData 对象，该对象拷贝了画布指定矩形的像素数据。

context.getImageData(x,y,width,height);

putImageData(imgData,x,y):把getImageData()得到的像素数据展现出来

demo:

canvas.toDataURL(MIME)

上面介绍了把图片导入／转化为canvas，那么canvas画布也可以转为图片，需要一个toDataURL()方法,因为在canvas中绘出的图片只是canvas标签而已，并非是真正的图片，是不能右键另存为的


	var image = new Image(); 
	image.src = canvas.toDataURL("image/png");

canvas.toDataURL 返回的是一串Base64编码的URL

demo:简易画板

Line width : Color :