初学习

定义canvas

<canvas id="canvas" width="500" height="500"></canvas>

获取实例

//1.获取canvas
var myCanvas = document.getElementById("canvas"); //获取2d对象
var ctx = myCanvas.getContext("2d");

属性

lineWidth  设置线宽状态
strokeStyle 设置线的颜色状态
lineCap   属性设置或返回线条末端线帽的样式  butt默认。向线条的每个末端添加平直的边缘||round 向线条的每个末端添加圆形线帽||square 向线条的每个末端添加正方形线帽
lineJoin  属性设置或返回所创建边角的类型，当两条线交汇时 bevel 创建斜角|round 创建圆角|miter默认。创建尖角
miterLimit  设置或返回最大斜接长度
moveTo() 把路径移动到画布中的指定点，不创建线条
lineTo() 添加一个新点，然后在画布中创建从该点到最后指定点的线条
beginPath() 起始一条路径，或重置当前路径
closePath() 创建从当前点回到起始点的路径
stroke() 绘制已定义的路径
clearRect() 在给定的矩形内清除指定的像素

文本

font 设置或返回文本内容的当前字体属性 ('normal bold 18px PingFangSC-Regular')
fillStyle 设置或返回用于填充绘画的颜色、渐变或模式
textAlign 设置或返回文本内容的当前对齐方式
fillText() 在画布上绘制“被填充的”文本

textAlign属性

start	默认。文本在指定的位置开始。
end	文本在指定的位置结束。
center	文本的中心被放置在指定的位置。
left	文本左对齐。
right	文本右对齐。

fillText属性

text	规定在画布上输出的文本。
x	开始绘制文本的 x 坐标位置（相对于画布）。
y	开始绘制文本的 y 坐标位置（相对于画布）。
maxWidth	可选。允许的最大文本宽度，以像素计。

text规定在画布上输出的文本。x开始绘制文本的 x 坐标位置（相对于画布）。y开始绘制文本的 y 坐标位置（相对于画布）。maxWidth可选。允许的最大文本宽度，以像素计。

保存图片

 var images = myCanvas.toDataURL('image/png');

url

https://www.w3school.com.cn/tags/html_ref_canvas.asp