如何在canvas画布上绘图
<div id="container">
<!-- 创建canvas画布，设置宽、高和边框 -->
<canvas id="canvas" width="300" height="200" style="border: 1px solid #333;"></canvas>
</div>
<script>
// 1. 获取canvas元素
var canvas = document.getElementById("canvas");
// 2. 获取绘图上下文
var ctx = canvas.getContext("2d");
// 3. 绘制图形
// 例如：绘制一个矩形
ctx.fillStyle = "red";// 设置填充颜色为红色
ctx.fillRect(50, 50, 100, 100);// 绘制一个宽100，高100的矩形，起点为(50,50)
</script>
绘制红色矩形块
ctx.fillStyle = "red";// 设置填充颜色为红色
ctx.fillRect(50, 50, 100, 100);// 绘制一个宽100，高100的矩形，起点为(50,50)
绘制矩形框
context.rect(x, y, width, height)
ctx.beginPath(); // 开始路径
ctx.rect(20, 20, 150, 100); // 绘制一个矩形，起点为(20,20)，宽150，高100
ctx.stroke(); // 绘制路径
绘制线段
ctx.beginPath(); // 开始路径
ctx.moveTo(50, 50); // 移动到(50,50)
ctx.lineTo(200, 100); // 绘制一条直线，到达(200,100)
ctx.stroke(); // 绘制路径
绘制圆形
arc(x,y,r,start,end)
ctx.beginPath(); // 开始路径
ctx.arc(150, 100, 50, 0, Math.PI*2, true); // 绘制一个圆，圆心为(150,100)，半径为50，从0度开始，到360度结束，逆时针
ctx.stroke(); // 绘制路径
绘制形状
ctx.beginPath(); // 开始路径
ctx.moveTo(50, 50); // 移动到(50,50)
ctx.lineTo(200, 100); // 绘制一条直线，到达(200,100)
ctx.lineTo(50, 100); // 绘制一条直线，到达(50,100)
ctx.lineTo(50, 50); // 绘制一条直线，到达(50,50)
ctx.strokeStyle = "red"; // 设置路径的颜色为红色
ctx.stroke(); // 绘制路径
绘制圆弧曲线
ctx.beginPath(); // 开始路径
ctx.arc(150, 100, 50, 0, Math.PI/2, false); // 绘制一个圆弧曲线，圆心为(150,100)，半径为50，从0度开始，到90度结束，顺时针
ctx.stroke(); // 绘制路径
绘制渐变色
const grd = ctx.createLinearGradient(0, 0, 200, 0); // 创建一个线性渐变，起点为(0,0)，终点为(0,200)
grd.addColorStop(0, "red"); // 添加颜色断点，位置为0，颜色为红色
grd.addColorStop(1, "white"); // 添加颜色断点，位置为1，颜色为白色
ctx.fillStyle = grd; // 设置填充颜色为渐变色
ctx.fillRect(0, 0, 200, 200); // 绘制一个矩形，宽高为200
绘制径向渐变色
const grd = ctx.createRadialGradient(50, 50, 10, 100, 100, 100); //（x1,y1,r1,x2,y2,r2） 创建一个径向渐变，圆心为(50,50)，半径为10 到 圆心为(100,100)半径100
grd.addColorStop(0, "red"); // 添加颜色断点，位置为0，颜色为红色
grd.addColorStop(1, "white"); // 添加颜色断点，位置为1，颜色为白色
ctx.fillStyle = grd; // 设置填充颜色为渐变色
ctx.fillRect(0, 0, 200, 200); // 绘制一个矩形，宽高为200
绘制文本
ctx.font = "30px Arial"; // 设置字体样式
ctx.fillStyle = "blue"; // 设置填充颜色为蓝色
ctx.fillText("Hello World", 50, 70); // 绘制文本，文本内容为"Hello World"，位置
ctx.strokeText("Hello World", 50, 130); // 绘制文本边框，文本内容为"Hello World"，位置
绘制图片
drawImage(image,x,y)
const img = document.getElementById("imgId");
ctx.drawImage(img, 10, 10); // 起点为(10,10),绘制图片img
绘制阴影
ctx.beginPath(); // 开始路径
ctx.rect(20, 20, 150, 100); // 绘制一个矩形，起点为(20,20)，宽150，高100
ctx.shadowOffsetX = 3; // 设置阴影水平偏移量
ctx.shadowOffsetY = 2; // 设置阴影垂直偏移量
ctx.shadowBlur = 5; // 设置阴影模糊程度
ctx.shadowColor = "rgba(0, 0, 0, 0.8)"; // 设置阴影颜色
ctx.stroke(); // 绘制路径
设置笔触颜色/笔触宽度/末端样式/连接处样式
strokeStyle 默认值 #000000
ctx.strokeStyle = "red"; // 设置笔触颜色为红色
const gradient = ctx.createLinearGradient(0, 0, 200, 0); // 创建一个线性渐变，
gradient.addColorStop(0, "red"); // 添加颜色断点，位置为0，颜色为红色
gradient.addColorStop(1, "white"); // 添加颜色断点，位置为1，颜色为白色
ctx.strokeStyle = gradient; // 设置笔触颜色为渐变色
ctx.lineWidth = 10; // 设置笔触宽度为10
ctx.lineCap = "round"; // 设置笔触末端样式为圆角
ctx.lineJoin = "round"; // 设置笔触连接处样式为圆角
ctx.strokeRect(20, 20, 150, 100); // 绘制一个矩形，起点为(20,20)，宽150，高100
路径
ctx.beginPath(); // 开始路径
ctx.rect(20, 20, 150, 100); // 绘制一个矩形，起点为(20,20)，宽150，高100
ctx.lineWidth = 10; // 设置笔触颜色为红色
ctx.strokeStyle = "blue"; // 设置笔触颜色为红色
ctx.stroke(); // 绘制路径
ctx.fillStyle="green";
ctx.fill(); // 填充路径
ctx.beginPath(); // 开始路径
ctx.moveTo(20, 20); // 移动到(20,20)
ctx.lineTo(100, 20); // 绘制一条直线，从(20,20)到(100,20)
ctx.lineTo(100, 100); // 绘制一条直线，从(100,20)到(100,100)
ctx.closePath(); // 闭合路径
ctx.fillStyle = "pink"; // 设置填充颜色为红色
ctx.fill() // 填充路径
ctx.stroke() // 绘制路径
ctx.beginPath(); // 开始路径
ctx.arc(100, 100, 50, 0, Math.PI * 2, true); // 绘制一个圆形，圆心为(100,100)，半径为50
ctx.fillStyle = "red"; // 设置填充颜色为红色
ctx.fill(); // 填充路径
ctx.stroke() // 绘制路径
ctx.clip(); // 剪切画布
ctx.fillStyle = "blue"; // 设置填充颜色为蓝色
ctx.fillRect(100,100,200,200) // 绘制一个矩形，起点为(100,100)，宽200，高200
变换
ctx.strokeRect(20,20,50,25);
ctx.scale(2,2);// 缩放画布，使画布的宽度和高度都变为原来的2倍
ctx.strokeRect(20,20,50,25);
ctx.strokeRect(20,20,50,25);
ctx.rotate(20*Math.PI/180);// 旋转画布，旋转的角度为20度
ctx.strokeRect(20,20,50,25);
ctx.strokeRect(20,20,50,25);
ctx.translate(10,10);// 移动画布，向右移动10个单位，向下移动10个单位
ctx.strokeRect(20,20,50,25);
ctx.strokeRect(20,20,50,25);
ctx.transform(2,Math.PI*30/180,Math.PI*30/180,2,10,10);// 变换画布，使画布的宽度和高度都变为原来的2倍，并向右移动10个单位，向下移动10个单位,水平垂直都旋转30度
ctx.strokeRect(20,20,50,25);
context.transform(a,b,c,d,e,f);
