关于canvas画图，填充颜色，添加文字

最新推荐文章于 2024-12-16 21:56:34 发布

我是快乐的搬运工

最新推荐文章于 2024-12-16 21:56:34 发布

阅读量6k

点赞数 2

分类专栏： javascript vue 文章标签： canvas js vue.js

本文链接：https://blog.youkuaiyun.com/qq_42023279/article/details/107681874

版权

javascript 同时被 2 个专栏收录

8 篇文章

订阅专栏

vue

8 篇文章

订阅专栏

这篇博客主要展示了如何使用canvas进行图形绘制，包括填充颜色，并添加文字到画布上。作者通过具体的代码示例说明了在项目中如何根据需求画出四个点，虽然这个例子中点的数量是固定的，但提到了如果点的数据存储在数组中，可以通过遍历数组来实现动态画图。文章以实际效果图为亮点，帮助读者更好地理解实现效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接上代码:

drawCanvas(point1, point2, point3, point4, name, fillStyle) {
      // console.log(point1.x);
      let _this = this;
      _this.ctx.beginPath();
      _this.ctx.moveTo(point1.x, point1.y);
      _this.ctx.lineTo(point2.x, point2.y);
      _this.ctx.lineTo(point4.x, point4.y);
      _this.ctx.lineTo(point3.x, point3.y);
      _this.ctx.closePath();

      _this.ctx.fillStyle = fillStyle; //填充颜色
      _this.ctx.fill(); //填充
      if (name) {
        _this.ctx.font = "14px bold 黑体";
        // 设置颜色
        _this.ctx.fillStyle = "#000";
        _this.ctx.fillText(name, point1.x, point1.y + 18);
      }
    },