canvas---方法与属性总结

一、canvas介绍

<canvas> 标签用于绘制图像(通过脚本，通常是 JavaScript)，<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器) - 必须使用脚本来完成实际的绘图任务。

不支持canvas的浏览器:ie8及以下

绘制环境：getcontext(‘2d’)---方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。可用于在画布上绘制文本、线条、矩形、圆形等等。

二、方法与属性

分类	方法	描述
矩形	ctx.rect(x,y,width,height);	创建矩形，左上角的 x 坐标，左上角的 y 坐标,默认颜色黑色
	ctx.fillRect(x,y,width,height);	绘制“被填充”的矩形，默认黑色
	ctx.strokeRect(x,y,width,heigh)	绘制带边框矩形(无填充)，默 认黑色
	ctx.clearRect(x,y,width,height);	在给定矩形内清空一个矩形，默认白色
保存与返回	ctx.save()	保存当前环境的状态
	ctx.restore()	返回之前保存的路径状态和属性
路径	ctx.fill()	填充
	ctx.stroke()	画线
	ctx.beginPath()	开始绘制路径
	ctx.closePath()	结束绘制路径
	ctx.lineTo(60,20)	新的目标点
	ctx.moveTo(10,10)	移动到绘制的新的目标点
	ctx.clip()	从原始画布剪切任意形状和尺寸的区域
	context.isPointInPath(x,y);	如果指定的点位于当前路径中,isPointInPath() 方法返回 true；否则返回 false。
	ctx.arc(x,y,半径,起始弧度,结束弧度,旋转方向)	创建弧/曲线(用于创建圆或部分圆)，(x,y)圆心坐标， 旋转方向默认为false，顺时针方向，true为逆时针方向；弧度与角度的关系：弧度=角度*Math*PI/180
	ctx.arcTo(x1,y1,x2,y2,r)	创建介于两个切线之间的弧/曲线。(x1,y1)第一坐标，(x2,y2)第二坐标,r半径
	ctx.quadraticCurveTo(dx,dy,x1,y1);	绘制一条二次贝塞尔曲线，(dx,dy)第一组控制点，(x1,y1)第二组结束坐标
	ctx.bezierCurveTo(dx1,dy1,dx2,dy2,x1,y1);	绘制一条三次贝塞尔曲线，(dx1,dy1)第一组控制点,(dx2,dy2)第二组控制点，(x1,y1)第三组结束坐标
转换	ctx.translate(x,y)	偏移：从起点为基准点，移动当前坐标位置 x:添加到水平坐标（x）上的值，y:添加到垂直坐标（y）上的值
	ctx.rotate(20*Math.PI/180);	以左上角为中心点旋转 20 度，
	ctx.scale(2,2)	缩放
	ctx.transform(a,b,c,d,e,f);	画布上的每个对象都拥有一个当前的变换矩阵。 transform() 方法替换当前的变换矩阵。
	ctx.setTransform(a,b,c,d,e,f);	将当前转换重置为单位矩阵。然后运行 transform()
图像绘制	ctx.drawImage(img,x,y);	在画布上绘制图像、画布或视频,左上角的 x 坐标，左上角的 y 坐标,
	ctx.drawImage(img,x,y,width,height);	在画布上定位图像，并规定图像的宽度和高度。
样式、 渐变	ctx.createPattern(img,平铺方式);	平铺方式："repeat|repeat-x|repeat-y|no-repeat" 在指定的方向内重复指定的元素。
	ctx.createLinearGradient(x0,y0,x1,y1);	创建线性的渐变对象,渐变可用于填充矩形、圆形、线条、文本等等。(x0,y0)渐变开始点坐标，（x1,y1）渐变结束点坐标
	gradient.addColorStop(stop,color);	stop:介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。 color：在结束位置显示的 CSS 颜色值
	ctx.createRadialGradient(x0,y0,r0,x1,y1,r1);	创建放射状/环形的渐变（用在画布内容上） (x0,y0)渐变开始圆的圆心坐标，r0开始圆半径，（x1,y1）渐变结束圆的圆心坐标，r1结束圆半径
文本	ctx.strokeText(text,x,y,maxWidth);	在画布上绘制文本。文本的默认颜色是黑色。text:文本，（x,y）文本开始位置，maxWidth:允许的最大文本宽度。 使用 font 属性来定义字体和字号，并使用 strokeStyle 属性以另一种颜色/渐变来渲染文本。
	ctx.fillText(text,x,y,maxWidth);	在画布上绘制“被填充的”文本 使用 font 属性来定义字体和字号，使用 fillStyle 属性以另一种颜色/渐变来渲染文本。
	context.measureText(text).width;	在画布上输出文本之前，检查字体的宽度： 只有宽度，没有高度
像素操作	ctx.createImageData(width,height)	以指定的尺寸（以像素计）创建新的 ImageData 对象 对于 ImageData 对象中的每个像素，都存在着四方面的信息，即 RGBA 值： R - 红色 (0-255) G - 绿色 (0-255) B - 蓝色 (0-255) A - alpha 通道 (0-255; 0 是透明的，255 是完全可见的)
	context.getImageData(x,y,width,height);	返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据 使用 putImageData() 方法将图像数据拷贝回画布上。
	context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);	把图像数据（从指定的 ImageData 对象）放回画布上

 

分类	属性	描述
颜色 线条样式	ctx.fillStyle=”red”	设置填充颜色为红色
	ctx.strokeStyle=”blue”	边线颜色为蓝色
	ctx.lineWidth=10	线宽为 10 像素
	ctx.lineJoin=”round”	边界连接点样式 milter(默认)、round(圆角)、bevel(斜角)
	ctx.lineCap=”round	端点样式butt(默认)、round(圆角)、square(高度多出为宽的一半的值)
文本	ctx.font="30px Verdana";	定义字体和字号
	ctx.textAlign="center|end|left|right|start";	文字的左右位置。根据锚点，设置或返回文本内容的当前对齐方式。
	ctx.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";	文字的上下位置。设置或返回在绘制文本时的当前文本基线。
阴影	ctx.shadowOffsetX=20;	带有向右偏移 20 像素的阴影 shadowOffsetX=20 指示阴影位于形状 left 位置右侧的 20 像素处。 shadowOffsetX=-20 指示阴影位于形状 left 位置左侧的 20 像素处。
	ctx.shadowOffsetY=20;	带有向下偏移 20 像素的阴影 设置或返回形状与阴影的垂直距离。 shadowOffsetY=20 指示阴影位于形状 top 位置下方的 20 像素处。 shadowOffsetY=-20 指示阴影位于形状 top 位置上方的 20 像素处。
	ctx.shadowBlur=20;	设置或返回阴影的模糊级数。
	ctx.shadowColor="black";	设置或返回用于阴影的颜色。请将 shadowColor 属性与 shadowBlur 属性一起使用，来创建阴影。通过使用 shadowOffsetX 和 shadowOffsetY 属性来调节阴影效果
像素操作	imgData.width	返回 ImageData 对象的宽度
	imgData.height	返回 ImageData 对象的高度
	imgData.data	返回一个对象，其包含指定的 ImageData 对象的图像数据