canvas简单操作总结

<canvas id="myCanvas" width="300" height="300" style="border:1px solid #d3d3d3;">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="#0000ff";//设置填充的颜色
ctx.fillRect(20,20,150,100);//设置填充起始下，x,y坐标，宽，高
ctx.strokeStyle="#0000ff";//设置空矩形的颜色
ctx.lineWidth=5;//设置边框宽度
ctx.strokeRect(20,20,150,100);//同上fillRect
ctx.clearRect(20,20,100,50);//清除画布，参数为坐标和宽高
ctx.beginPath();//开始一条路径
ctx.moveTo(20,20);//重置画线起点
ctx.lineTo(20,100);//画线目标点
ctx.strokeStyle="green";//设置线条颜色
ctx.stroke();//画线
ctx.closePath();//关闭路径，从目标点返回起始点，实际就是完成回路
ctx.clip();//裁剪区域，创建区域并裁剪后，之后的操作值在裁剪区域起作用，区域外不作用。
ctx.arc(100,75,50,0,2*Math.PI,true);//画弧线，参数圆心x、y、半径、起始角度，结束角度，顺时针或者逆时针true为逆时针
ctx.isPointInPath(20,50)//判断坐标是否在当区域内，常用在点击事件判断
例如
ctx.rect(20,20,150,100);
if (ctx.isPointInPath(20,50))
   {console.log(true)};
ctx.scale(2,2);//放大或缩小，宽和高的倍数
ctx.translate(70,70);//重置起始点向右和向下移动70像素
ctx.transform(a,b,c,d,e,f);//a	水平缩放绘图、b	水平倾斜绘图、c	垂直倾斜绘图、d	垂直缩放绘图、e	水平移动绘图、f	垂直移动绘图
ctx.font="40px Arial";//设置字体大小和字体样式
ctx.fillText("hello",10,90);//绘制文字和起始坐标，x,y
ctx.strokeText("hello",10,90);//绘制空心文字和起始坐标，x,y
var txt="Hello World"
ctx.measureText(txt).width//测量文本的宽度
ctx.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);//绘制图片，
	规定要使用的图像、画布或视频。
sx	可选。开始剪切的 x 坐标位置。
sy	可选。开始剪切的 y 坐标位置。
swidth	可选。被剪切图像的宽度。
sheight	可选。被剪切图像的高度。
x	在画布上放置图像的 x 坐标位置。
y	在画布上放置图像的 y 坐标位置。
width	可选。要使用的图像的宽度。（伸展或缩小图像）
height	可选。要使用的图像的高度。（伸展或缩小图像）
ctx.fillRect(10,10,50,50);
var imgData=ctx.getImageData(10,10,50,50);//复制画布上指定矩形的像素数据，
ctx.putImageData(imgData,10,70);// 将图像数据放回画布：