canvas学习

1.创建画布:

<canvas id="myCanvas" width="500" height="550" style={{ border: '1px solid #ddd' }}> 您的浏览器不支持 HTML5 canvas 标签。 </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);