创建 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可能更适合你。
