html5菜鸟教程canvas笔记

简单介绍：

canvas（图形容器） 标签是一个默认没有边框和内容的矩形画布，并且通过js实现绘制,js脚本先获取标签的id然后进行控制canvas，比如：1.

<canvas id="mycanvas" style=" border:1px solid red" height="200px" width="200px">

</canvas>

 

2.<canvas id="mycanvas" style=" border:1px solid red" height="200px" width="200px">

</canvas>

<script>

var x=document.getElementById("mycanvas"); //通过id来找到对应的<canvas>

var ct=x.getContext("2d");//创建content内容对象

ct.fillStyle="red"; //绘制的颜色为红色

ct.fillRect(0,0,460,460);//x,y,width,height

</script>

 

canvas系统内置的方法属性用法：

属性：

fillStyle:设置或返回用于填充绘画的颜色、渐变或模式。conent.fillStyle="颜色，渐变";

strokeStyle:设置或返回用于笔触的颜色、渐变或模式。context.strokeStyle="颜色，渐变";

shadowColor:设置或返回用于阴影的颜色。context.shadowColor="颜色";

shadowBlur:设置或返回用于阴影的模糊级别。context.shadowBlur=数字;

shadowOffsetX:设置或返回阴影与形状的水平距离。context.shadowOffsetX=数字;

shadowOffsetY:设置或返回阴影与形状的垂直距离。context.shadowOffsetY=数字;

lineCap:设置或返回线条的结束端点样式。context.lineCap="butt|round|square";默认,向线条的每个末端添加平直的边缘 \ 向线条的每个末端添加圆形线帽。\向线条的每个末端添加正方形线帽。

lineJoin:设置或返回两条线相交时，所创建的拐角类型。context.lineJoin="bevel|round|miter";创建斜角。创建圆角。

默认。创建尖角。

lineWidth:设置或返回当前的线条宽度。context.lineWidth=number;

miterLimit :设置或返回最大斜接长度。context.miterLimit=number;

font:设置或返回文本内容的当前字体属性。context.font="italic small-caps bold 12px arial";

textAlign :设置或返回文本内容的当前对齐方式。context.textAlign="center|end|left|right|start";

start默认。文本在指定的位置开始。end文本在指定的位置结束。center文本的中心被放置在指定的位置。left文本在指定的位置开始。right文本在指定的位置结束。

 textBaseline:设置或返回在绘制文本时使用的当前文本基线。context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";alphabetic默认。文本基线是普通的字母基线。top文本基线是 em 方框的顶端。hanging文本基线是悬挂基线。middle文本基线是 em 方框的正中。ideographic文本基线是表意基线。bottom文本基线是 em 方框的底端。

width:返回 ImageData 对象的宽度。imgData.width;

height :返回 ImageData 对象的高度。imgData.height;

data:返回一个对象，其包含指定的 ImageData 对象的图像数据。imageData.data;

globalAlpha:设置或返回绘图的当前 alpha 或透明值。context.globalAlpha=number;

 globalCompositeOperation:设置或返回新图像如何绘制到已有的图像上。context.globalCompositeOperation="source-in";source-over默认。在目标图像上显示源图像。

source-atop在目标图像顶部显示源图像。源图像位于目标图像之外的部分是不可见的。

source-in在目标图像中显示源图像。只有目标图像之内的源图像部分会显示，目标图像是透明的。

source-out在目标图像之外显示源图像。只有目标图像之外的源图像部分会显示，目标图像是透明的。

destination-over在源图像上显示目标图像。destination-atop在源图像顶部显示目标图像。目标图像位于源图像之外的部分是不可见的。

destination-in在源图像中显示目标图像。只有源图像之内的目标图像部分会被显示，源图像是透明的。

destination-out在源图像之外显示目标图像。只有源图像之外的目标图像部分会被显示，源图像是透明的。

lighter显示源图像 + 目标图像。copy显示源图像。忽略目标图像。xor使用异或操作对源图像与目标图像进行组合。

 

 

方法：

createLinearGradient()：创建线性渐变（用在画布内容上）context.createLinearGradient(x0,y0,x1,y1);x0渐变开始点的 x 坐标      y0渐变开始点的 y 坐标          x1渐变结束点的 x 坐标        y1渐变结束点的 y 坐标

createPattern()：在指定的方向上重复指定的元素。context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");image规定要使用的模式的图片、画布或视频元素。 

repeat默认。该模式在水平和垂直方向重复。

repeat-x该模式只在水平方向重复。

repeat-y该模式只在垂直方向重复。

no-repeat该模式只显示一次（不重复）

createRadialGradient() ：创建放射状/环形的渐变（用在画布内容上）。context.createRadialGradient(x0,y0,r0,x1,y1,r1)；

x0渐变的开始圆的 x 坐标

y0渐变的开始圆的 y 坐标

r0开始圆的半径

x1渐变的结束圆的 x 坐标

y1渐变的结束圆的 y 坐标

r1结束圆的半径

 

addColorStop()：规定渐变对象中的颜色和停止位置。gradient.addColorStop(stop,color);

stop介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。

color在 stop 位置显示的 CSS 颜色值。

rect()：创建矩形。context.rect(x,y,width,height);

fillRect()：绘制"被填充"的矩形。context.fillRect(x,y,width,height);

strokeRect()：绘制矩形（无填充）。context.strokeRect(x,y,width,height);

clearRect() ：在给定的矩形内清除指定的像素。context.clearRect(x,y,width,height);

 fill()：填充当前绘图（路径）。context.fill();

stroke()：绘制已定义的路径。context.stroke();绘制出通过 moveTo() 和 lineTo() 方法定义的路径

 beginPath() ：起始一条路径，或重置当前路径。context.beginPath();请使用这些方法来创建路径 moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo() 和 arc()。

moveTo() ：把路径移动到画布中的指定点，不创建线条（起点）。context.moveTo(x,y);请使用 stroke() 方法在画布上绘制确切的路径。

closePath()：创建从当前点回到起始点的路径。context.closePath();请使用 stroke() 方法在画布上绘制确切的路径。

lineTo() ：添加一个新点，然后在画布中创建从该点到最后指定点的线条。context.lineTo(x,y);请使用 stroke() 方法在画布上绘制确切的路径。

clip() ：从原始画布剪切任意形状和尺寸的区域。context.clip();一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内（不能访问画布上的其他区域）。您也可以在使用 clip() 方法前通过使用 save() 方法对当前画布区域进行保存，并在以后的任意时间对其进行恢复（通过 restore() 方法）。

 quadraticCurveTo()：创建二次贝塞尔曲线。context.quadraticCurveTo(cpx,cpy,x,y);cpx贝塞尔控制点的 x 坐标。

cpy贝塞尔控制点的 y 坐标。

x结束点的 x 坐标。

y结束点的 y 坐标。

那么请使用 beginPath() 和 moveTo() 方法来定义开始点。

bezierCurveTo()：创建三次贝塞尔曲线。context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);

cp1x第一个贝塞尔控制点的 x 坐标。

cp1y第一个贝塞尔控制点的 y 坐标。

cp2x第二个贝塞尔控制点的 x 坐标。

cp2y第二个贝塞尔控制点的 y 坐标。

x结束点的 x 坐标。

y结束点的 y 坐标。

那么请使用 beginPath() 和 moveTo() 方法来定义开始点。

arc() ：创建弧/曲线（用于创建圆形或部分圆）。context.arc(x,y,r,sAngle,eAngle,counterclockwise);

x圆的中心的 x 坐标。

y圆的中心的 y 坐标。

r圆的半径。

sAngle起始角，以弧度计（弧的圆形的三点钟位置是 0 度）。

eAngle结束角，以弧度计。

counterclockwise可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。

提示：如需通过 arc() 来创建圆，请把起始角设置为 0，结束角设置为 2*Math.PI。

提示：请使用 stroke() 或 fill() 方法在画布上绘制实际的弧。

arcTo() ：创建两切线之间的弧/曲线。context.arcTo(x1,y1,x2,y2,r);x1两切线交点的横坐标。

y1两切线交点的纵坐标。

x2第二条切线上一点的横坐标。

y2第二条切线上一点的纵坐标。

r弧的半径。

arcTo() 方法在画布上创建介于两个切线之间的弧/曲线。

提示：请使用 stroke() 方法在画布上绘制确切的弧。

isPointInPath()：如果指定的点位于当前路径中，则返回 true，否则返回 false。context.isPointInPath(x,y);

scale()：缩放当前绘图至更大或更小。context.scale(scalewidth,scaleheight);

scalewidth缩放当前绘图的宽度（1=100%，0.5=50%，2=200%，依次类推）。

scaleheight缩放当前绘图的高度（1=100%，0.5=50%，2=200%，依次类推）。

rotate() ：旋转当前绘图。context.rotate(angle);angle旋转角度，以弧度计。

如需将角度转换为弧度，请使用 degrees*Math.PI/180 公式进行计算。

实例：如需旋转 5 度，可规定下面的公式：5*Math.PI/180。

translate()：重新映射画布上的 (0,0) 位置。context.translate(x,y);

transform()：替换绘图的当前转换矩阵。context.transform(a,b,c,d,e,f);a水平缩放绘图。

b水平倾斜绘图。

c垂直倾斜绘图。

d垂直缩放绘图。

e水平移动绘图。

f垂直移动绘图。

setTransform()：将当前转换重置为单位矩阵。然后运行 transform()。context.setTransform(a,b,c,d,e,f)a水平缩放绘图。

b水平倾斜绘图。

c垂直倾斜绘图。

d垂直缩放绘图。

e水平移动绘图。

f垂直移动绘图

fillText()：在画布上绘制"被填充的"文本。context.fillText(text,x,y,maxWidth);text规定在画布上输出的文本。

x开始绘制文本的 x 坐标位置（相对于画布）。

y开始绘制文本的 y 坐标位置（相对于画布）。

maxWidth可选。允许的最大文本宽度，以像素计。

strokeText() ：在画布上绘制文本（无填充）。context.strokeText(text,x,y,maxWidth);

text规定在画布上输出的文本。

x开始绘制文本的 x 坐标位置（相对于画布）。

y开始绘制文本的 y 坐标位置（相对于画布）。

maxWidth可选。允许的最大文本宽度，以像素计。

measureText() ：返回包含指定文本宽度的对象。context.measureText(text).width;

drawImage() ：向画布上绘制图像、画布或视频。

在画布上定位图像：

JavaScript 语法：context.drawImage(img,x,y);

在画布上定位图像，并规定图像的宽度和高度：

JavaScript 语法：context.drawImage(img,x,y,width,height);

剪切图像，并在画布上定位被剪切的部分：

JavaScript 语法：context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);

img规定要使用的图像、画布或视频。 

sx可选。开始剪切的 x 坐标位置。

sy可选。开始剪切的 y 坐标位置。

swidth可选。被剪切图像的宽度。

sheight可选。被剪切图像的高度。

x在画布上放置图像的 x 坐标位置。

y在画布上放置图像的 y 坐标位置。

width可选。要使用的图像的宽度（伸展或缩小图像）。

height可选。要使用的图像的高度（伸展或缩小图像）。

 createImageData()：创建新的、空白的 ImageData 对象。

有两个版本的 createImageData() 方法：

1. 以指定的尺寸（以像素计）创建新的 ImageData 对象：

JavaScript 语法：var imgData=context.createImageData(width,height);

2. 创建与指定的另一个 ImageData 对象尺寸相同的新 ImageData 对象（不会复制图像数据）：

JavaScript 语法：var imgData=context.createImageData(imageData);

widthImageData 对象的宽度，以像素计。

heightImageData 对象的高度，以像素计。

imageData另一个 ImageData 对象。

getImageData()：返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据。

context.getImageData(x,y,width,height);x开始复制的左上角位置的 x 坐标（以像素计）。

y开始复制的左上角位置的 y 坐标（以像素计）。

width要复制的矩形区域的宽度。

height要复制的矩形区域的高度。

putImageData() ：把图像数据（从指定的 ImageData 对象）放回画布上。context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);imgData规定要放回画布的 ImageData 对象。

xImageData 对象左上角的 x 坐标，以像素计。

yImageData 对象左上角的 y 坐标，以像素计。

dirtyX可选。水平值（x），以像素计，在画布上放置图像的位置。

dirtyY可选。垂直值（y），以像素计，在画布上放置图像的位置。

dirtyWidth可选。在画布上绘制图像所使用的宽度。

dirtyHeight可选。在画布上绘制图像所使用的高度。

save()：保存当前环境的状态。

restore()：返回之前保存过的路径状态和属性。