//填充矩形（x, y是横纵坐标，原点在canvas的左上角）
ctx.fillRect(x, y, width, height);
//边框矩形，默认1px 黑色。
ctx.strokeRect(x, y, width, height);
//清除指定的矩形区域，变为透明
ctx.clearRect(x, y, width, height); //绘制动态效果时，常用来清除整个画布
//新建路径，beginPath是绘制新图形的开始
ctx.beginPath()
//路径（线）的起点，一般在上面这条命令后执行
ctx.moveTo(x, y)
//线的终点
ctx.lineTo(x, y)
//绘制圆形
ctx.arc(x, y, r, start, end, true/false) //x, y圆心，r半径，start和end是开始和结束角度，false表示顺时针（默认），true表示逆时针。
//绘制弧线
ctx.arcTo(x1, y1, x2, y2, r); //当前端点、(x1,y1)和(x2,y2)这三个点连成的弧线，r是半径。
//闭合路径，不是必须的，如果线的终点跟起点一样，会自动闭合。
ctx.closePath()
//通过线条绘制轮廓（边框）
ctx.stroke()
//通过路径填充区域（实心）
ctx.fill()
//颜色
ctx.fillStyle = 'red' //针对fill()有效的颜色，还可以取值：'#fff'、'rgba(0, 0, 0, 0.5)'等。
ctx.strokeStyle = 'red' //针对stroke()有效的颜色，取值同上。
ctx.globalAlpha = 0.5; //透明度
//端点
ctx.lineWidth = 2; //线条宽度
ctx.lineCap = 'butt(默认)'、'round(圆弧)'、'square(方形)' //线段端点显示的样式
var ctx = document.getElementById('canvas').getContext('2d');
var lineCap = ['butt','round','square'];
ctx.strokeStyle = 'black';
for (var i=0;i<lineCap.length;i++){
ctx.lineWidth = 15;
ctx.lineCap = lineCap[i];
ctx.beginPath();
ctx.moveTo(25+i*50,10);
ctx.lineTo(25+i*50,140);
ctx.stroke();
}
//渐变色
var bg = ctx.createLinearGradient(x1, y1, x2, y2); //定义线性渐变，渐变的起点 (x1,y1) 与终点 (x2,y2)。
var bg1 = ctx.createRadialGradient(50, 50, 0, 50, 50, 100); //定义径向渐变
bg.addColorStop(0, 'red'); //定义好，之后开始上色
bg.addColorStop(0.5, 'blue');
bg.addColorStop(1, 'rgba(0, 0, 0, 0.6)');
ctx.translate(x, y); //更改canvas的原点
for(var i = 1; i< 4; i++) {
ctx.save(); //使用save方法保存状态，让每次位移时都针对（0，0）移动。
ctx.translate(100*i, 0);
ctx.fillRect(0, 50, 50, 50);
ctx.restore();
}
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
// 操作像素,每个像素由四部分组成, rgb + alpha
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);
shotcontext.putImageData(shotdata, 0, 0)
img.src = shotcanvas.toDataURL() //canvas 直接变成图片
//
context.strokeRect(x,y,width,height);
strokeRect() 方法绘制矩形（不填色）。笔触的默认颜色是黑色。
//提示：请使用 strokeStyle 属性来设置笔触的颜色、渐变或模式。
绘制一个带有黑色阴影的蓝色矩形，模糊级数是 20：
图片移动缩放
context.clearRect(0, 0, canvas.width, canvas.height); context.drawImage( img, //规定要使用的图像、画布或视频。 0, 0, //开始剪切的 x 坐标位置。 img.width, img.height, //被剪切图像的高度。 imgX, imgY,//在画布上放置图像的 x 、y坐标位置。 img.width * imgScale, img.height * imgScale //要使用的图像的宽度、高度 );}
这里要介绍下canvas的drawImage方法，参考w3school，drawImage是可以实现图片的裁剪功能，参数的含义以及是否必填如下： ** img 规定要使用的图像、画布或视频。 ** sx 可选。开始剪切的 x 坐标位置。 ** sy 可选。开始剪切的 y 坐标位置。 ** swidth 可选。被剪切图像的宽度。 ** sheight 可选。被剪切图像的高度。 ** x 在画布上放置图像的 x 坐标位置。 ** y 在画布上放置图像的 y 坐标位置。 ** width 可选。要使用的图像的宽度。（伸展或缩小图像） ** height 可选。要使用的图像的高度。（伸展或缩小图像）
aotu.io/notes/2017/… createjs 游戏教程 www.cnblogs.com/strick/p/53… createjs 基础
