BlueOS Studio中使用canvas

​

 创建 canvas 画布

这里需要写在【template】标签中

<div class="content">
      <canvas class="new-canvas" id="new-canvas"></canvas>
</div>

写样式

<style>
  .content {
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .new-canvas {
    height: 380px;
    width: 380px;
  }
</style>

绘制

是否绘制

drawComplete: false

声明与绘制 

      const canvas = this.$element('new-canvas') //获取 canvas 组件
      const ctx = canvas.getContext('2d') //获取 canvas 绘图上下文

      //绘制一个矩形
      ctx.fillStyle = 'rgb(200,0,0)'
      ctx.fillRect(20, 20, 200, 200)

      //绘制另一个矩形
      ctx.fillStyle = 'rgba(0, 0, 200, 0.5)'
      ctx.fillRect(80, 80, 200, 200)

      this.drawComplete = true

实际效果：

​

编辑

这个4+4也就是使用canvas来生成的，难度中等，但是不能使用document来操作，因为核心没有。

vue的canvos与html的canvos的区别

Vue.js的Canvas与HTML Canvas在以下几个方面存在一些区别：

运行环境：HTML Canvas 是HTML标准的一部分，可以直接在浏览器中运行。而Vue.js的Canvas通常是在浏览器之外运行的，例如在Node.js环境中，Vue.js是一个JavaScript框架，提供了一种构建用户界面的方法。

使用方式：HTML Canvas 是通过HTML标签直接在网页中使用的，而Vue.js的Canvas通常是通过在Vue组件中创建画布元素，并在该元素上绘制图形的方式使用。

功能和API：HTML Canvas 提供了一些基本的绘图API，如画线、填充等。而Vue.js通常是通过使用其他库（如vue-konva或vue-fabric-canvas等）来提供更高级的绘图功能和更丰富的API。

视图更新：HTML Canvas 的视图更新是实时的，这意味着你可以实时地看到你的绘图操作。而Vue.js的Canvas视图更新可能不是实时的，这取决于你的代码如何使用它。

框架依赖：Vue.js是一个完整的框架，提供了许多额外的功能，如数据绑定、组件系统、路由、状态管理等。而HTML Canvas 只是HTML标准的一部分，没有这些额外的功能。

总的来说，Vue.js的Canvas与HTML Canvas的主要区别在于运行环境、使用方式、功能和API、视图更新以及框架依赖等方面。选择使用哪种Canvas取决于你的具体需求和环境。如果你只需要基本的绘图功能，HTML Canvas 可能是个不错的选择。但如果你需要更强大和灵活的绘图功能，以及与Vue.js的集成，那么使用Vue.js的Canvas可能更适合你。

​