页面布局

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

JS代码

let canvas = document.getElementById("canvas"); //获取画板
let ctx = canvas.getContext("2d"); //获取2d绘画对象
ctx.moveTo(100, 100); //设置起始点为100,100
ctx.lineTo(200, 100); //规划路径
ctx.stroke(); //画到画板上

//其他函数
ctx.closePath(); //自动闭合图案(必须是一笔)
ctx.BeginPath(); //另起一笔
ctx.lineWidth = 10; //设置当前笔画的粗细
ctx.fill(); //填充
		  //起始x 起始y 终点x 终点y 矩形左上角与右下角
ctx.clearRect(x0,  y0,  x1,    y1); //矩形橡皮擦

ctx.lineGap = ""; //线端样式  这俩属性值 自行百度
ctx.lineJoin = ""; //两条件交接处的样式

矩形

		//x    y    长   宽
ctx.rect(100, 100, 200, 100); //画矩形
ctx.fill(); //填充
ctx.stroke(); //渲染

ctx.strokeRect(100, 100, 200, 100); //矩形框,渲染
ctx.fillRect(100, 100, 200, 100); //矩形填充并渲染 

弧形与圆

/*
 * x: 圆心x y:圆心y r:半径 start:起始角度 end:结束角度 dirct: 0顺时针 1逆时针
 */
ctx.arc(x, y, r, start, end, dirct);
ctx.arc(100, 100, 50, 0, Math.PI, 0); //半圆弧

旋转平移(针对全局坐标系)

ctx.moveTo(100, 100); //移动到0 0
ctx.rorate(Math.PI / 6); //以0, 0点旋转 30度

ctx.translate(100, 100); //坐标系原点平移到100, 100
ctx.rorate(Math.PI / 6); //以100, 100点旋转 30度

save 与 restore

ctx.save(); //保存坐标系的平移旋转缩放数据

ctx.restore(); //恢复到上次保存的状态

填充

ctx.fillStyle = "rgb/rgba/#000000/red";

let img = new Image();
img.src = "";
img.onload = function () {
	//填充不重复的图片,以坐标原点0, 0开始平铺
	//ctx.translate(100, 100); //坐标系原点平移
	let bg = ctx.createPattern(img, "no-repeat");
	ctx.fillStyle = bg;
	ctx.fillRect(0, 0, 100, 50);
}
								//x0 y0 x1  y1
let bg = ctx.createLinearGradient(0, 0, 200, 0); //线性渐变
bg.addColorStop(0, "rgb/rgba/#000000/red"); //设置某点(0-1)的颜色
bg.addColorStop(0.5, "rgb/rgba/#000000/red");
bg.addColorStop(1, "rgb/rgba/#000000/red");

							    //x0 y0 r0 x1 y1 r1
let bg = ctx.createRadialGradient(0, 0, 0, 0, 0, 100); //径向渐变
bg.addColorStop(0, "rgb/rgba/#000000/red"); //设置某点(0-1)的颜色
bg.addColorStop(0.5, "rgb/rgba/#000000/red");  
bg.addColorStop(1, "rgb/rgba/#000000/red");

阴影

ctx.shadowColor = "rgb/rgba/#000000/red"; //阴影颜色
ctx.shadowBlur = 30; //阴影模糊值
ctx.shadowOffsetX = 10; //阴影x偏移
ctx.shadowOffsetY = 20; //阴影y偏移

文字

ctx.font = "30px 字体"; //设置文字字体大小与字体类型
			//内容      x    y
ctx.strokeText("文字", 100, 100); //文字描边
ctx.fillText("文字", 100, 200); //文字填充