获取dom
<canvas id="myCanvas" width="250" height="300" style="border:1px solid #d3d3d3;">
您的浏览器不支持 HTML5 canvas 标签。
</canvas>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
1.充填颜色以及充填
context.fillStyle=color|gradient|pattern;
context.fillRect(x,y,width,height);
x 矩形左上角的 x 坐标。
y 矩形左上角的 y 坐标。
width 矩形的宽度，以像素计。
height 矩形的高度，以像素计。
ctx.fillStyle="#FF0000";
ctx.fillRect(20,20,150,100);
2.绘画颜色以及绘画
context.strokeStyle=color|gradient|pattern;
ctx.strokeStyle="#FF0000";
ctx.strokeRect(20,20,150,100);
3.设置阴影颜色，阴影的模糊级别，shadowBlur与shadowColor两者要一起使用
context.shadowBlur=number;
context.shadowColor=color;
ctx.shadowBlur=20;
ctx.fillStyle="red";
ctx.shadowColor="black";
ctx.fillRect(20,20,100,80);
ctx.shadowColor="blue";
ctx.fillRect(140,20,100,80);
4.设置阴影与形状的水平、垂直距离。
context.shadowOffsetX=number;
context.shadowOffsetY=number;
number 正值或负值。
ctx.shadowBlur=10;
ctx.shadowOffsetX=20;
ctx.shadowOffsetY=20;
ctx.shadowColor="black";
ctx.fillStyle="red";
ctx.fillRect(20,20,100,80);
5.创建线性的渐变对象。
context.createLinearGradient(x0,y0,x1,y1);
x0 渐变开始点的 x 坐标
y0 渐变开始点的 y 坐标
x1 渐变结束点的 x 坐标
y1 渐变结束点的 y 坐标
定义从黑到白的渐变（从左向右），作为矩形的填充样式：
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
思考1：创建从上到下的渐变效果如何实现：
思考1答案：
var grd=ctx.createLinearGradient(0,0,0,170);
思考2：定义一个从黑到红再到白的渐变，作为矩形的横线填充样式：
思考2答案：
var grd=ctx.createLinearGradient(0,0,170,0);
6.在水平和垂直方向重复元素
context.createPattern(image,"repeat|repeat-x|repeat-y|no-repeat");
元素可以是图片、视频，或者其他 <canvas> 元素。
<img src="img_lamp.jpg" id="lamp">
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.clearRect(0,0,c.width,c.height);
var img=document.getElementById("lamp")
var pat=ctx.createPattern(img,'repeat');
ctx.rect(0,0,220,128);
ctx.fillStyle=pat;
ctx.fill();
7.创建放射状/圆形渐变对象
context.createRadialGradient(x0,y0,r0,x1,y1,r1);
x0 渐变的开始圆的 x 坐标
y0 渐变的开始圆的 y 坐标
r0 开始圆的半径
x1 渐变的结束圆的 x 坐标
y1 渐变的结束圆的 y 坐标
r1 结束圆的半径
var grd=ctx.createRadialGradient(75,75,5,75,75,75);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
ctx.fillStyle=grd;
ctx.fillRect(0,0,150,150);
8.规定渐变对象中的颜色和位置
addColorStop() 方法与 createLinearGradient()或 createRadialGradient() 一起使用
gradient.addColorStop(stop,color);
stop介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
color在 stop 位置显示的 CSS 颜色值。
var grd=ctx.createLinearGradient(0,0,170,0);
grd.addColorStop(0,"black");
grd.addColorStop("0.3","magenta");
grd.addColorStop("0.5","blue");
grd.addColorStop("0.6","green");
grd.addColorStop("0.8","yellow");
grd.addColorStop(1,"red");
ctx.fillStyle=grd;
ctx.fillRect(20,20,150,100);
9.线条末端线帽的样式。
context.lineCap="butt|round|square";
butt 默认。向线条的每个末端添加平直的边缘。
round 向线条的每个末端添加圆形线帽。
square 向线条的每个末端添加正方形线帽。
ctx.beginPath();
ctx.lineWidth=10;
ctx.lineCap="round";
ctx.moveTo(20,20);
ctx.lineTo(200,20);
ctx.stroke();
10.创建边角的类型
context.lineJoin="bevel|round|miter";
bevel 创建斜角。
round 创建圆角。
miter 默认。创建尖角。
ctx.beginPath();
ctx.lineWidth=10;
ctx.lineJoin="round";
ctx.moveTo(20,20);
ctx.lineTo(100,50);
ctx.lineTo(20,100);
ctx.stroke();
11.设置当前线条的宽度
context.lineWidth=number;
number 当前线条的宽度，以像素计。
ctx.lineWidth=10;
ctx.strokeRect(20,20,80,100);
12.设置最大斜接长度。
miterLimit 属性设置或返回最大斜接长度。
斜接长度指的是在两条线交汇处内角和外角之间的距离。
只有当 lineJoin 属性为 "miter" 时，miterLimit 才有效。miter尖角，bevel为钝角，round为圆角。
ctx.lineWidth=10;
ctx.lineJoin="miter";//miter尖角，lineJoin =“bevel”为钝角
ctx.miterLimit=4;//miterLimit 4(然后,斜接长度将超过斜接限制)
ctx.moveTo(20,20);
ctx.lineTo(50,27);
ctx.lineTo(20,34);
ctx.stroke();
13.创建矩形
提示：使用 stroke或者fill方法在画布上实际地绘制矩形。
x 矩形左上角的 x 坐标。
y 矩形左上角的 y 坐标。
width 矩形的宽度，以像素计。
height 矩形的高度，以像素计。
fillRect() = rect() + fill()
strokeRect() = rect() + stroke()
ctx.rect(20,20,150,100);
ctx.stroke();
14.充填创建的矩形
context.fillRect(x,y,width,height);
x 矩形左上角的 x 坐标。
y 矩形左上角的 y 坐标。
width 矩形的宽度，以像素计。
height 矩形的高度，以像素计。
ctx.fillRect(20,20,150,100);
15.绘制矩形
ctx.strokeRect(20,20,150,100);
ctx.strokeRect(20,20,150,100);
16.清空给定矩形内的指定像素
context.clearRect(x,y,width,height);
x 要清除的矩形左上角的 x 坐标。
y 要清除的矩形左上角的 y 坐标。
width 要清除的矩形的宽度，以像素计。
height 要清除的矩形的高度，以像素计。
ctx.fillStyle="red";
ctx.fillRect(0,0,300,150);
ctx.clearRect(20,20,100,50);
17.填充当前的图像
context.fill();
ctx.rect(20,20,150,100);
ctx.fillStyle="red";
ctx.fill();
18.绘制出通过 moveTo() 和 lineTo() 方法定义的路径
context.stroke();
提示：请使用 strokeStyle属性来绘制另一种颜色/渐变。
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.strokeStyle="red";
ctx.stroke();
19.开始一条路径，斩断与上一个路径之间的耦合
context.beginPath();
提示：请使用这些方法来创建路径 moveTo()、lineTo()、quadricCurveTo()、bezierCurveTo()、arcTo() 和 arc()。
提示：请使用 stroke() 方法在画布上绘制确切的路径。
ctx.beginPath();
ctx.lineWidth="5";
ctx.strokeStyle="green"; // 绿色路径
ctx.moveTo(0,75);
ctx.lineTo(250,75);
ctx.stroke(); // 画
ctx.beginPath();
ctx.strokeStyle="purple"; // 紫色的路径
ctx.moveTo(50,0);
ctx.lineTo(150,130);
ctx.stroke(); // 画
如果不使用beginPath这个方法，那么这两条线绘制出来将都是紫色的。
20.把路径移动到画布中的指定点。
context.moveTo(x,y);
x 路径的目标位置的 x 坐标。
y 路径的目标位置的 y 坐标。
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();
21.创建从当前点到开始点的路径
context.closePath();
ctx.beginPath();
ctx.moveTo(20,20);
ctx.lineTo(20,100);
ctx.lineTo(70,100);
ctx.closePath();
ctx.stroke();
22.创建从该点到画布中最后指定点的线条。
context.lineTo(x,y);
x 路径的目标位置的 x 坐标。
y 路径的目标位置的 y 坐标。
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(300,150);
ctx.stroke();
23.剪切限制在canvas绘画的区域。
//剪切一个矩形区域
ctx.rect(50,20,200,120);
ctx.stroke();
ctx.clip();
//剪切之后画一个矩形
ctx.fillStyle="red";
ctx.fillRect(0,0,150,100);
24.创建一条二次贝塞尔曲线
context.quadraticCurveTo(cpx,cpy,x,y);
cpx 贝塞尔控制点的 x 坐标。
cpy 贝塞尔控制点的 y 坐标。
x 结束点的 x 坐标。
y 结束点的 y 坐标。
ctx.beginPath();
ctx.moveTo(20,20);
ctx.quadraticCurveTo(20,100,200,20);
ctx.stroke();
25.创建一个三次贝塞尔曲线
context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y);
cp1x 第一个贝塞尔控制点的 x 坐标。
cp1y 第一个贝塞尔控制点的 y 坐标。
cp2x 第二个贝塞尔控制点的 x 坐标。
cp2y 第二个贝塞尔控制点的 y 坐标。
x 结束点的 x 坐标。
y 结束点的 y 坐标。
ctx.beginPath();
ctx.moveTo(20,20);
ctx.bezierCurveTo(20,100,200,100,200,20);
ctx.stroke();
26.创建圆或者弧
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
x 圆的中心的 x 坐标。
y 圆的中心的 y 坐标。
r 圆的半径。
sAngle 起始角，以弧度计（弧的圆形的三点钟位置是 0 度）。
eAngle 结束角，以弧度计。
counterclockwise 可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();
27.创建介于两个切线之间的弧
context.arcTo(x1,y1,x2,y2,r);
x1 两切线交点的横坐标。
y1 两切线交点的纵坐标。
x2 第二条切线上一点的横坐标。
y2 第二条切线上一点的纵坐标。
r 弧的半径。
ctx.beginPath();
ctx.moveTo(20,20); //创建一个起点
ctx.lineTo(100,20); // 创建一个水平线
ctx.arcTo(150,20,150,70,50); // 创建一个弧
ctx.lineTo(150,120); // 继续垂直线
ctx.stroke(); //绘画
28.查看指定的点位是否在路径中
context.isPointInPath(x,y);
是则返回 true，否则返回 false
x 要测试的 x 坐标。
y 要测试的 y 坐标。
ctx.rect(20,20,150,100);
if (ctx.isPointInPath(20,50))
{
ctx.stroke();
};
29.缩放当前绘图
context.scale(scalewidth,scaleheight);
scalewidth 缩放当前绘图的宽度（1=100%，0.5=50%，2=200%，依次类推）。
scaleheight 缩放当前绘图的高度（1=100%，0.5=50%，2=200%，依次类推）。
ctx.strokeRect(5,5,25,15);
ctx.scale(2,2);
ctx.strokeRect(5,5,25,15);
30.旋转当前的绘图
context.rotate(angle);
angle 旋转角度，以弧度计。
如需将角度转换为弧度，请使用 degreesMath.PI/180 公式进行计算。
实例：如需旋转 5 度，可规定下面的公式：5Math.PI/180。
ctx.rotate(20*Math.PI/180);
ctx.fillRect(50,20,100,50);
31.重新映射画布上的 (0,0) 位置
context.translate(x,y);
x 添加到水平坐标（x）上的值。
y 添加到垂直坐标（y）上的值。
ctx.fillRect(10,10,100,50);
ctx.translate(70,70);
ctx.fillRect(10,10,100,50);
32.替换当前的变换矩阵
context.transform(a,b,c,d,e,f);
a 水平缩放绘图。
b 水平倾斜绘图。
c 垂直倾斜绘图。
d 垂直缩放绘图。
e 水平移动绘图。
f 垂直移动绘图。
transform参数的详细解释可以参考文献：https://blog.csdn.net/S3328047358/article/details/107867712
此方法太难不常用可以直接跳过，数学好的可以去仔细研究
平移：translate 其实就是对 e和f的变换， e 代表x的平移量，f代表y的平移量
transform(1, 0, 0, 1, 10, 20) = translate(10, 20),x平移10，y平移20
33.设置文本内容字体属性
context.font="italic small-caps bold 12px arial";
font-style:现有选项支持是否需要倾斜的样式。
font-variant：现有选项支持字体是否全部转化为大写。
font-weight：字体的粗细。
font-size：字体大小
ctx.font="30px Arial";
ctx.fillText("Hello World",10,50);
34.文本内容的当前对齐方式
context.textAlign="center|end|left|right|start";
start 默认。文本在指定的位置开始。
end 文本在指定的位置结束。
center 文本的中心被放置在指定的位置。
left 文本在指定的位置开始。
right 文本在指定的位置结束。
//在位置150创建一个红色线
ctx.strokeStyle="red";
ctx.moveTo(150,20);
ctx.lineTo(150,170);
ctx.stroke();
ctx.font="15px Arial";
// 表明不同TextAlign值
ctx.textAlign="start";
ctx.fillText("textAlign=start",150,60);
ctx.textAlign="end";
ctx.fillText("textAlign=end",150,80);
ctx.textAlign="left";
ctx.fillText("textAlign=left",150,100);
ctx.textAlign="center";
ctx.fillText("textAlign=center",150,120);
ctx.textAlign="right";
ctx.fillText("textAlign=right",150,140);
35.绘制文本时的当前文本基线
context.textBaseline="alphabetic|top|hanging|middle|ideographic|bottom";
alphabetic 默认。文本基线是普通的字母基线。
top 文本基线是 em 方框的顶端。
hanging 文本基线是悬挂基线。
middle 文本基线是 em 方框的正中。
ideographic 文本基线是表意基线。
bottom 文本基线是 em 方框的底端。
//在Y = 100画一条红线
ctx.strokeStyle="red";
ctx.moveTo(5,100);
ctx.lineTo(395,100);
ctx.stroke();
ctx.font="20px Arial"
//每个在y = 100的单词有不同的textbaseline值
ctx.textBaseline="top";
ctx.fillText("Top",5,100);
ctx.textBaseline="bottom";
ctx.fillText("Bottom",50,100);
ctx.textBaseline="middle";
ctx.fillText("Middle",120,100);
ctx.textBaseline="alphabetic";
ctx.fillText("Alphabetic",190,100);
ctx.textBaseline="hanging";
ctx.fillText("Hanging",290,100);
36.在画布上绘制的“被填色”的文本
context.fillText(text,x,y,maxWidth);
text 规定在画布上输出的文本。
x 开始绘制文本的 x 坐标位置（相对于画布）。
y 开始绘制文本的 y 坐标位置（相对于画布）。
maxWidth 可选。允许的最大文本宽度，以像素计。
ctx.font="20px Georgia";
ctx.fillText("Hello World!",10,50);
ctx.font="30px Verdana";
// 创建一个渐变
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// 填充一个渐变
ctx.fillStyle=gradient;
ctx.fillText("Big smile!",10,90);
37.在画布上绘制无充填文本。
context.strokeText(text,x,y,maxWidth);
text 规定在画布上输出的文本。
x 开始绘制文本的 x 坐标位置（相对于画布）。
y 开始绘制文本的 y 坐标位置（相对于画布）。
maxWidth 可选。允许的最大文本宽度，以像素计。
ctx.font="20px Georgia";
ctx.strokeText("Hello World!",10,50);
ctx.font="30px Verdana";
// 创建一个渐变
var gradient=ctx.createLinearGradient(0,0,c.width,0);
gradient.addColorStop("0","magenta");
gradient.addColorStop("0.5","blue");
gradient.addColorStop("1.0","red");
// 填充一个渐变
ctx.strokeStyle=gradient;
ctx.strokeText("Big smile!",10,90);
38.计算指定字体宽度
context.measureText(text).width;
返回一个对象，该对象包含以像素计的指定字体宽度。
text 要测量的文本。
ctx.font="30px Arial";
var txt="Hello World"
ctx.fillText("width:" + ctx.measureText(txt).width,10,50);
ctx.fillText(txt,10,100);
39.在画布上绘制图像。
context.drawImage(img,x,y);
img 规定要使用的图像、画布或视频。
sx 可选。开始剪切的 x 坐标位置。
sy 可选。开始剪切的 y 坐标位置。
swidth 可选。被剪切图像的宽度。
sheight 可选。被剪切图像的高度。
x 在画布上放置图像的 x 坐标位置。
y 在画布上放置图像的 y 坐标位置。
width 可选。要使用的图像的宽度（伸展或缩小图像）。
height 可选。要使用的图像的高度（伸展或缩小图像）。
var img=document.getElementById("scream");
img.onload = function()
{
ctx.drawImage(img,10,10);
}
39.2在画布上绘制图像并指明大小
context.drawImage(img,x,y,width,height);
var img=document.getElementById("scream");
img.onload = function()
{
ctx.drawImage(img,10,10,150,180);
}
39.3剪切图片，并在画布上对被剪切的部分进行定位：
document.getElementById("scream").onload=function()
{
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,90,130,50,60,10,10,50,60);
};
39.4 在canvas中模拟视频播放
var c=document.getElementById("myCanvas");
ctx=c.getContext('2d');
v.addEventListener('play', function()
{
var i=window.setInterval(function() {ctx.drawImage(v,5,5,260,125)},20);
},false);
v.addEventListener('pause',function()
{
window.clearInterval(i);
},false);
v.addEventListener('ended',function()
{
clearInterval(i);
},false);
40.ImageData 对象的属性
var imgData=ctx.createImageData(100,100);
width、height、data
width 属性返回 ImageData 对象的宽度，以像素计。
height 属性返回 ImageData 对象的高度，以像素计。
data 属性返回一个对象，该对象包含指定的 ImageData 对象的图像数据。
即 RGBA 值：
R - 红色（0-255）
G - 绿色（0-255）
B - 蓝色（0-255）
A - alpha 通道（0-255; 0 是透明的，255 是完全可见的）
41.创建新的空白 ImageData 对象
var imgData=ctx.createImageData(100,100);
width ImageData 对象的宽度，以像素计。
height ImageData 对象的高度，以像素计。
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);
42.获取ImageData对象，将ImageData对象放到画布上。
context.getImageData(x,y,width,height);
x 开始复制的左上角位置的 x 坐标（以像素计）。
y 开始复制的左上角位置的 y 坐标（以像素计）。
width 要复制的矩形区域的宽度。
height 要复制的矩形区域的高度。
context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight);
imgData 规定要放回画布的 ImageData 对象。
x ImageData 对象左上角的 x 坐标，以像素计。
y ImageData 对象左上角的 y 坐标，以像素计。
dirtyX 可选。水平值（x），以像素计，在画布上放置图像的位置。
dirtyY 可选。垂直值（y），以像素计，在画布上放置图像的位置。
dirtyWidth 可选。在画布上绘制图像所使用的宽度。
dirtyHeight 可选。在画布上绘制图像所使用的高度。
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);
function copy()
{
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
}
43.设置全局透明度
context.globalAlpha=number;
number 透明值。必须介于 0.0（完全透明） 与 1.0（不透明） 之间。
ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
//转换透明度
ctx.globalAlpha=0.2;
ctx.fillStyle="blue";
ctx.fillRect(50,50,75,50);
ctx.fillStyle="green";
ctx.fillRect(80,80,75,50);
44.目标图像上显示源图像
context.globalCompositeOperation="source-in";
常用属性：
source-over 默认。在目标图像上显示源图像。
destination-over 在源图像上显示目标图像。
ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
ctx.fillStyle="blue";
ctx.globalCompositeOperation="source-over";
ctx.fillRect(50,50,75,50);
ctx.fillStyle="red";
ctx.fillRect(150,20,75,50);
ctx.fillStyle="blue";
ctx.globalCompositeOperation="destination-over";
ctx.fillRect(180,50,75,50);
45.toDataURL()
将canvas转换为base64
function imgToBase64(imgSrc, imgType, callback) {
let type = imgType || 'image/png',
dataURL,
img = new Image();
// 允许资源跨域使用
img.setAttribute('crossOrigin', 'anonymous');
img.src = imgSrc;
img.onload = function () {
let imgWidth = img.width,
imgHeight = img.height;
let canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d');
canvas.width = imgWidth;
canvas.height = imgHeight;
ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
dataURL = canvas.toDataURL(type);
console.log(dataURL);
callback && callback(dataURL)
return dataURL
}
}
function LogConsole(str=''){
console.log('str:',str)
}
imgToBase64('https://www.runoob.com/wp-content/uploads/2013/11/img_the_scream.jpg','image/jpeg',LogConsole)
查阅此方法参考：https://blog.csdn.net/XuM222222/article/details/82667084
46.sava()跟restore()方法的使用
context.save();
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.lineWidth=3;
ctx.translate(100,100); //将原点左边设置到画布的中间
ctx.save(); //保存当前画布的状态，该状态包含了lineWidth=3,translate(100,100),然后其他那些属性为默认值.
ctx.strokeStyle='red';
ctx.rotate(Math.PI/2);//坐标系统旋转90°
ctx.beginPath();
ctx.moveTo(-100,0);
ctx.lineTo(100,0);
ctx.closePath();
ctx.stroke();
ctx.restore();//恢复之前保存的绘图状态
ctx.beginPath();
ctx.moveTo(-100,0);
ctx.lineTo(100,0);
ctx.closePath();
ctx.stroke();
