1.创建画布:
<canvas id="myCanvas" width="500" height="550" style={{ border: '1px solid #ddd' }}> 您的浏览器不支持 HTML5 canvas 标签。 </canvas>
2.画线条
const canvas = document.getElementById("myCanvas");////获得画布元素
if (canvas.getContext) {
const ctx = canvas.getContext("2d");//获得2维绘图的上下文2d： 表示2维experimental-webgl： 表示试验版3维 webgl：表示3维
ctx.lineWidth = 10;//设置线宽
ctx.strokeStyle = "red"; //设置线的颜色
ctx.moveTo(100, 100);//起点
ctx.lineTo(300, 300);//终点
ctx.moveTo(0, 100);
ctx.lineTo(100, 0);
ctx.stroke(); //执行画线
}
图示：
3.写文字
const ctx = canvas.getContext("2d");//获得2维绘图的上下文2d： 表示2维experimental-webgl： 表示试验版3维 webgl：表示3维
//设置线宽
ctx.lineWidth = 1;
//设置线的颜色
ctx.strokeStyle = "red";
ctx.moveTo(0, 0);
ctx.strokeRect(0, 0, 600, 600);
ctx.font = "50px microsoft yahei";
ctx.strokeText("你好，我是懒懒", 20, 100);//描边文字
//填充
ctx.fillStyle =ctx.fillText("你好，我是懒懒", 20, 200);//填充文字
context.fillText(text,x,y,[maxWidth])
text表示需要绘制的文字，x,y分别表示绘制在canvas上的横，纵坐标，最后一个参数可选，表示显示文字的最大宽度，防止文字显示溢出。
4，画三角形
const ctx = canvas.getContext("2d");//获得2维绘图的上下文2d： 表示2维experimental-webgl： 表示试验版3维 webgl：表示3维
ctx.beginPath(); //清空子路径，一般用于开始路径的创建
ctx.strokeStyle = "red";
ctx.moveTo(300,300);
ctx.lineTo(100,100); //画线到0,300的位置
ctx.lineTo(200,400); //画线到右下角
ctx.closePath(); //闭合
//ctx.stroke(); //执行描边
ctx.fillStyle="red"; //设置填充颜色
ctx.fill(); //执行填充
4，画矩形
ctx.fillRect(x, y, width, height);//ctx.fillRect(10, 10, 250, 70);
