vue中canvas的简单使用

canvas标签

canvas是 HTML5 的新特性，它允许我们使用canvas元素在网页上通过 JavaScript 绘制图像。 标签只是图形容器，相当于一个画布，canvas` 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成，相当于使用画笔在画布上画画。

注意：必须指定宽高

<canvas id="charts" width="800" height="400"></canvas>

getContext()

context 是一个封装了很多绘图功能的对象，我们在页面中创建一个 canvas 标签之后，首先要使用 getContext() 获取 canvas 的上下文环境，目前 getContext() 的参数只有 2d，暂时还不支持 3d

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

const canvas = document.getElementById('charts');
const context = canvas.getContext('2d');  

绘制线段

• moveTo(x, y)：把路径移动到画布中的指定点，不创建线条
• lineTo(x, y)：添加一个新点，然后在画布中创建从该点到最后指定点的线条

context.strokeStyle = 'yellowgreen';
context.moveTo(0, 0);
context.lineTo(100, 100);
context.stroke();

绘制矩形

• fillRect(x, y, width, height) 绘制填充颜色的矩形
• strokeRect(x, y, width, height) 绘制线条的矩形

context.fillStyle = "pink";
context.strokeStyle = "darkred";
context.fillRect(0, 0, 100, 100);
context.strokeRect(120, 0, 100, 100);

绘制圆形

• arc(x, y, radius, starAngle, endAngle, anticlockwise)
  • x : 圆心的 x 坐标
  • y：圆心的 y 坐标
  • radius ： 半径
  • starAngle ：开始角度
  • endAngle：结束角度
  • anticlockwise ：是否逆时针（true）为逆时针，(false)为顺时针

context.beginPath();
context.arc(300, 350, 100, 0, Math.PI * 2, true);
//不关闭路径路径会一直保留下去
context.closePath();
context.fillStyle = 'rgba(0,255,0,0.25)';
context.fill(); 
// context.stroke(); // 此时就会有问题

清除路径

清除绘画的路径，多个图形就不会连接在一起

context.beginPath()

context.closePath()

清除矩形区域

当在一个画布反复绘制图形，需要将上一次的图形清空

• clearRect(x, y, width, height)

绘制文字

• fillText(text, x, y, maxWidth)

canvas的使用步骤

    <!-- 1. 定义canvas标签，相当于是画布,必须指定宽高 -->
    <canvas id="canvas" width="1000px" height="1000px" ></canvas>
    <script>
      //2.获取dom 也就是canvas的画笔 (2d绘画)
      const canvas = document.getElementById('canvas');
      const context = canvas.getContext("2d");
      //3.使用context封装了很多绘图功能的对象中的方法或者调用函数
      //3.1画线
      context.strokeStyle = "yellowgreen";//改颜色样式
      context.moveTo(100, 100);//起点
      context.lineTo(300, 300);//终点
      context.stroke(); //闭合

      //3.2矩形
      context.beginPath();//开始 清除路径,避免多个图连接在一起
      context.fillStyle='pink';//填充颜色
      context.fillRect(0, 0, 50, 50);//左上角点的坐标(x,y) 宽 高
      context.strokeStyle='darkred';//绘制线条的矩形
      context.strokeRect(70,0,50,50)
      context.closePath();//结束 包起来就不会受到其他的影响

      //3.3圆形
      context.beginPath();
      context.arc(400, 100, 50, 0, 2 * Math.PI, true);//坐标 半径 开始角度 结束角度 逆(顺)时针方向
      context.fill();
      context.closePath();

      //3.4文字文本
      context.font="30px 宋体"; //文字大小 字体样式
      context.fillText("非常好", 300, 300) //文字 坐标

    </script>