<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;"></canvas>
let c=document.getElementById('myCanvas')
let ctx=c.getContext('2d')
fillStyle:设置或返回用于填充绘画的颜色、渐变或模式
ctx.fillStyle="#0000ff";
fillRect:绘制“被填充”的矩形
//context.fillRect(x,y,width,height);
//x:矩形左上角的x坐标,y:矩形左上角的y坐标,width:矩形宽度,height:矩形高度
ctx.fillRect(20,20,150,100);
strokeStyle:设置或返回笔触的颜色、渐变或模式
ctx.strokeStyle="#0000ff";
strokeRect:绘制矩形(无填充)
//context.fillRect(x,y,width,height);
//x:矩形左上角的x坐标,y:矩形左上角的y坐标,width:矩形宽度,height:矩形高度
ctx.strokeRect(20,20,150,100);
shadowColor:设置或返回用于阴影的颜色
ctx.shadowColor="black";
shadowBlur:设置或返回用于阴影的模糊级别
ctx.shadowBlur=20;
shadowOffsetX:设置或返回阴影距形状的水平距离
//shadowOffsetX 属性设置或返回形状与阴影的水平距离。
//shadowOffsetX=0 指示阴影位于形状的正下方。
//shadowOffsetX=20 指示阴影位于形状 left 位置右侧的 20 像素处。
//shadowOffsetX=-20 指示阴影位于形状 left 位置左侧的 20 像素处。
ctx.shadowOffsetX=20;
shadowOffsetY:设置或返回阴影距形状的垂直距离
ctx.shadowOffsetY=20;
createLinearGradient:创建线性渐变(用在画布内容上)
//context.createLinearGradient(x0,y0,x1,y1);
//x0,渐变开始的x坐标,y0,渐变开始的y坐标,x1,渐变结束点的x坐标,y1,渐变结束点的y坐标
var grd=ctx.createLinearGradient(0,0,170,0);
createPattern: 在指定的方向内重复指定的元素。
createLinearGradient:创建放射状/圆形渐变对象
addColorStop:规定 gradient 对象中的颜色和停止位置
lineCap:设置或返回线条的结束端点样式
lineJoin:设置或返回两条线相交时,所创建的拐角类型
lineWidth:设置或返回当前的线条宽度
miterLimit:设置或返回最大的斜接长度
rect:创建矩形
clearRect:在给定的矩形内清除指定的像素
fill:填充当前绘图(路径)
stroke:绘制已定义的路径
beginPath:起始一条路径,或重置当前路径
moveTo:把路径移动到画布中的指定点,不创建线条
closePath:创建从当前点回到起始点的路径
lineTo:添加一个新点,然后在画布中创建
clip:从原始画布剪切任意形状和尺寸的区域
quadraticCurveTo:创建二次贝塞尔曲线