//获取canvas DOM对象
var canvas = document.getElementById("canvas");
//获取canvas对象的2d上下文并复制给ctx这个变量，绘图部分基本上都是使用ctx这个上下文中的各种属性和方法。
var ctx = canvas.getContext("2d");
↓↓ 设置上下文的填充样式，值可以是CSS颜色，渐变对象，pattern对象 ↓↓
ctx.fillStyle = "#00ff00";
↓↓ 设置或返回用于笔触的颜色、渐变或模式 ↓↓
ctx.strokeStyle = "#00f";
↓↓ 设置或返回用于阴影的颜色 ↓↓
ctx.shadowColor = "#00f";
↓↓ 设置或返回用于阴影的模糊级别 ↓↓
ctx.shadowBlur = 20;
↓↓ 设置或返回阴影距形状的水平距离 ↓↓
ctx.shadowOfsetX = 20;
↓↓ 设置或返回阴影距形状的垂直距离 ↓↓
ctx.shadowOfsetY = 20;
↓↓ 设置或返回字体属性，值内的顺序不能混乱 ↓↓
ctx.font = "italic small-caps bold 10px 微软雅黑";
↓↓ 设置或返回绘图的当前 alpha 或透明值 ↓↓
ctx.globalAlpha = 1;
↓↓ 设置或返回新图像的覆盖方式 ↓↓
//新绘制的覆盖在已有的之上
ctx.globalCompositeOperation = "source-over";
//已有的覆盖在新绘制的之上
ctx.globalCompositeOperation = "destination-ove";
↓↓ 设置上下文中的图像是否自动平滑处理，消除马赛克，默认为true ↓↓
ctx.imageSmoothingEnabled = true;
↓↓ 线段端点的形状，默认为“butt”为平直的边缘/圆形线帽"round"/正方形线帽"square"， ↓↓
ctx.lineCap = "butt";
↓↓ 设置或返回两条线相交时，所创建的拐角类型，包括bevel（斜角）round（圆角）miter（尖角） ↓↓
ctx.lineJoin = "butt";
↓↓ 设置或返回当前的线条宽度 ↓↓
ctx.lineWidth = 3;
↓↓ 设置或返回最大斜接长度 ↓↓
ctx.miterLimit = 3;
↓↓ 设置或返回文本内容的当前对齐方式 ↓↓
ctx.textAlign = "center|end|left|right|start";
↓↓ 设置或返回在绘制文本时使用的当前文本基线 ↓↓
ctx.textBaseline = "alphabetic|top|hanging|middle|ideographic|bottom";
↓↓ 返回 ImageData 对象的宽度 ↓↓
console.log(ctx.width);
↓↓ 设置或返回 ImageData 对象的高度 ↓↓
console.log(ctx.height);
↓↓ 返回一个对象，其包含指定的 ImageData 对象的图像数据 ↓↓
console.log(ctx.data);
↓↓ 返回一个对象，其包含指定的 ImageData 对象的图像数据 ↓↓
console.log(ctx.data);
//----------------------------
↓↓ 保存当前环境的状态 ↓↓
ctx.save();
↓↓ 返回之前保存过的路径状态和属性 ↓↓
ctx.restore();
↓↓ 创建新的、空白的 ImageData 对象，参数为宽和高 ↓↓
ctx.createImageData(100,100);
↓↓ 返回 ImageData 对象，该对象为画布上指定的矩形复制像素数据 ↓↓
ctx.getImageData(10,10,100,100);
↓↓ 把图像数据（从指定的 ImageData 对象）放回画布上 ↓↓
ctx.putImageData(imgData,10,70);
↓↓ 向画布上绘制图像、画布或视频 ↓↓
ctx.drawImage(img,0,0,100,100);
↓↓ 在画布上绘制“被填充的”文本 ↓↓
ctx.fillText("Hello World!",100,100);
↓↓ 在画布上绘制文本（无填充） ↓↓
ctx.strokeText("Hello World!",100,100);
↓↓ 返回包含指定文本宽度的对象 ↓↓
ctx.measureText(txt).width;
↓↓ 缩放当前绘图至更大或更小 ↓↓
ctx.scale(2,2);
↓↓ 旋转当前绘图 ↓↓
ctx.rotate(20*Math.PI/180);
↓↓ 重新映射画布上的 (0,0) 位置 ↓↓
ctx.translate(100,100);
↓↓ 替换绘图的当前转换矩阵 ↓↓
ctx.transform(1,0.5,-0.5,1,30,10);
↓↓ 将当前转换重置为单位矩阵。然后运行 transform() ↓↓
ctx.setTransform(1,0.5,-0.5,1,30,10);
↓↓ 填充当前绘图（路径） ↓↓
ctx.fill();
↓↓ 绘制已定义的路径 ↓↓
ctx.stroke();
↓↓ 起始一条路径，或重置当前路径 ↓↓
ctx.beginPath();
↓↓ 把路径移动到画布中的指定点，不创建线条 ↓↓
ctx.moveTo(30,30);
↓↓ 创建从当前点回到起始点的路径 ↓↓
ctx.closePath();
↓↓ 添加一个新点，然后在画布中创建从该点到最后指定点的线条 ↓↓
ctx.lineTo(100,100);
↓↓ 从原始画布剪切任意形状和尺寸的区域 ↓↓
ctx.clip();
↓↓ 创建二次贝塞尔曲线 ↓↓
ctx.quadraticCurveTo();
↓↓ 创建弧/曲线（用于创建圆形或部分圆） ↓↓
ctx.arc();
↓↓ 创建两切线之间的弧/曲线 ↓↓
ctx.arcTo();
↓↓ 如果指定的点位于当前路径中，则返回 true，否则返回 false ↓↓
ctx.isPointInPath();
↓↓ 创建矩形 ↓↓
ctx.rect();
↓↓ 绘制“被填充”的矩形 ↓↓
ctx.fillRect();
↓↓ 绘制矩形（无填充） ↓↓
ctx.strokeRect();
↓↓ 在给定的矩形内清除指定的像素 ↓↓
ctx.clearRect();
↓↓ 创建线性渐变（用在画布内容上） ↓↓
ctx.createLinearGradient();
↓↓ 在指定的方向上重复指定的元素 ↓↓
ctx.createPattern();
↓↓ 创建放射状/环形的渐变（用在画布内容上） ↓↓
ctx.createRadialGradient();
↓↓ 规定渐变对象中的颜色和停止位置 ↓↓
ctx.addColorStop();
————————————————
版权声明：本文为CSDN博主「帅华君」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u010089686/article/details/50676895
