canvas基础

<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
    Your browser does not support the HTML5 canvas tag.
</canvas>
var canvas=document.getElementById("myCanvas");  //先获取Canvas元素
var context=canvas.getContext("2d");  //通过canvas标签对象获取画笔对象
ctx.beginPath();  //起始一条路径，或重置当前路径
// fillStyle    设置或返回用于填充绘画的颜色、渐变或模式
var my_gradient=context.createLinearGradient(0,0,170,0);
my_gradient.addColorStop(0,"black");  // addColorStop()    规定渐变对象中的颜色和停止位置
my_gradient.addColorStop(0.5,"red");
my_gradient.addColorStop(1,"white");
context.fillStyle=my_gradient;
// strokeStyle    设置或返回用于笔触的颜色、渐变或模式
var gradient=context.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
context.strokeStyle=gradient;
context.strokeText("Big smile!",10,50);
// shadowColor    设置或返回用于阴影的颜色
// shadowBlur    设置或返回用于阴影的模糊级别
// shadowOffsetX    设置或返回阴影距形状的水平距离
// shadowOffsetY    设置或返回阴影距形状的垂直距离
context.shadowBlur=20;
context.shadowColor="black";
context.shadowOffsetX=20;
context.shadowOffsetY=20;
// createPattern()    在指定的方向上重复指定的元素
var pat=context.createPattern(img,"repeat");
// createRadialGradient()    创建放射状/环形的渐变（用在画布内容上）
var grd=context.createRadialGradient(75,50,5,90,60,100);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
context.fillStyle=grd;
// lineCap    设置或返回线条的结束端点样式
context.lineCap="round";  //butt|round|square
// lineJoin    设置或返回两条线相交时，所创建的拐角类型
context.lineJoin="round";   //bevel|round|miter
// lineWidth    设置或返回当前的线条宽度
ctx.lineWidth=10;
// miterLimit    设置或返回最大斜接长度
ctx.miterLimit=5;
// rect()    创建矩形
// fillRect()    绘制“被填充”的矩形
// strokeRect()    绘制矩形（无填充）
// clearRect()    在给定的矩形内清除指定的像素
context.rect(x,y,width,height);
context.fillRect(x,y,width,height);
context.strokeRect(x,y,width,height);
context.clearRect(x,y,width,height);

// fill()    填充当前绘图（路径）
context.fill();
// stroke()    绘制已定义的路径
context.stroke();
// moveTo()    把路径移动到画布中的指定点，不创建线条
context.moveTo(x,y);
// closePath()    创建从当前点回到起始点的路径
context.beginPath();
context.moveTo(20,20);
context.lineTo(20,100);
context.lineTo(70,100);
context.closePath();
context.stroke();
// lineTo()    添加一个新点，然后在画布中创建从该点到最后指定点的线条
// clip()    从原始画布剪切任意形状和尺寸的区域
context.clip();
// quadraticCurveTo()    创建二次贝塞尔曲线
context.quadraticCurveTo(cpx,cpy,x,y);  
//cpx 贝塞尔控制点的 x 坐标; cpy 贝塞尔控制点的 y 坐标;x 结束点的 x 坐标;y 结束点的 y 坐标
开始点：moveTo(20,20)
控制点：quadraticCurveTo(20,100,200,20)
结束点：quadraticCurveTo(20,100,200,20)

// bezierCurveTo()    创建三次方贝塞尔曲线
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
//cp1x    第一个贝塞尔控制点的 x 坐标; cp1y    第一个贝塞尔控制点的 y 坐标; cp2x    第二个贝塞尔控制点的 x 坐标; cp2y    第二个贝塞尔控制点的 y 坐标; x    结束点的 x 坐标; y    结束点的 y 坐标
开始点：moveTo(20,20)
控制点 1：bezierCurveTo(20,100,200,100,200,20)
控制点 2：bezierCurveTo(20,100,200,100,200,20)
结束点：bezierCurveTo(20,100,200,100,200,20)
// arc()    创建弧/曲线（用于创建圆形或部分圆）
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
//x    圆的中心的 x 坐标。; y    圆的中心的 y 坐标。r    圆的半径。sAngle    起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。eAngle    结束角，以弧度计。counterclockwise    可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
中心：arc(100,75,50,0*Math.PI,1.5*Math.PI)
起始角：arc(100,75,50,0,1.5*Math.PI)
结束角：arc(100,75,50,0*Math.PI,1.5*Math.PI)
// arcTo()    创建两切线之间的弧/曲线
context.fillRect(x1,y1,x2,y2,r);
//x1 弧的起点的 x 坐标; y1 弧的起点的 y 坐标; x2 弧的终点的 x 坐标; y2 弧的终点的 y 坐标; r    弧的半径
// isPointInPath()    如果指定的点位于当前路径中，则返回 true，否则返回 false
context.isPointInPath(x,y);
ctx.rect(20,20,150,100);
if (context.isPointInPath(20,50))
   {
   context.stroke();
   };

// scale()    缩放当前绘图至更大或更小
context.scale(scalewidth,scaleheight);
context.strokeRect(5,5,25,15);
context.scale(2,2);
context.strokeRect(5,5,25,15);

// rotate()    旋转当前绘图
context.rotate(angle);
// translate()    重新映射画布上的 (0,0) 位置
context.translate(x,y)
// transform()    替换绘图的当前转换矩阵
context.transform(a,b,c,d,e,f);
//a    水平缩放绘图; b 水平倾斜绘图; c 垂直倾斜绘图; d 垂直缩放绘图; e 水平移动绘图; f 垂直移动绘图
context.transform(1,0.5,-0.5,1,30,10);
context.fillStyle="red";
context.fillRect(0,0,250,100);
// setTransform()    将当前转换重置为单位矩阵。然后运行 transform()
context.setTransform(a,b,c,d,e,f);
//a    水平旋转绘图; b 水平倾斜绘图; c 垂直倾斜绘图; d 垂直缩放绘图; e    水平移动绘图; f 垂直移动绘图
context.fillStyle="yellow";
context.fillRect(0,0,250,100)
context.setTransform(1,0.5,-0.5,1,30,10);
context.fillStyle="red";
context.fillRect(0,0,250,100);
context.setTransform(1,0.5,-0.5,1,30,10);
context.fillStyle="blue";
context.fillRect(0,0,250,100);

// fillText()    在画布上绘制“被填充的”文本
context.fillText(text,x,y,maxWidth);
//text    规定在画布上输出的文本。x    开始绘制文本的 x 坐标位置（相对于画布）。y    开始绘制文本的 y 坐标位置（相对于画布）。maxWidth    可选。允许的最大文本宽度，以像素计。
// strokeText()    在画布上绘制文本（无填充）
context.strokeText(text,x,y,maxWidth);
// measureText()    返回包含指定文本宽度的对象
context.measureText(text).width;
// drawImage()    向画布上绘制图像、画布或视频
context.drawImage(img,x,y);
语法 2: 在画布上定位图像，并规定图像的宽度和高度：context.drawImage(img,x,y,width,height);
语法 3:剪切图像，并在画布上定位被剪切的部分: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 对象
var imgData=context.createImageData(width,height);
 创建与指定的另一个 ImageData 对象尺寸相同的新 ImageData 对象（不会复制图像数据）：
var imgData=context.createImageData(imageData);
// getImageData()    返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据
var imgData=context.getImageData(x,y,width,height);
function copy()
{
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
}
// putImageData()    把图像数据（从指定的 ImageData 对象）放回画布上
context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);
imgData    规定要放回画布的 ImageData 对象。
x    ImageData 对象左上角的 x 坐标，以像素计。
y    ImageData 对象左上角的 y 坐标，以像素计。
dirtyX    可选。水平值（x），以像素计，在画布上放置图像的位置。
dirtyY    可选。水平值（y），以像素计，在画布上放置图像的位置。
dirtyWidth    可选。在画布上绘制图像所使用的宽度。
dirtyHeight    可选。在画布上绘制图像所使用的高度。
var imgData=ctx.createImageData(100,100);
for (var i=0;i<imgData.data.length;i+=4)
  {
  imgData.data[i+0]=255;
  imgData.data[i+1]=0;
  imgData.data[i+2]=0;
  imgData.data[i+3]=255;
  }
ctx.putImageData(imgData,10,10);

// 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    使用异或操作对源图像与目标图像进行组合。