Vue Canvas绘图如何实现复杂图形绘制技巧？

本文共计1531个文字，预计阅读时间需要7分钟。

目录 + Vue使用Canvas绘图 + 1. 前言 + 2. 实现原理 + Vue使用Canvas的小demo + 顺便总结 + Vue使用Canvas绘图 + 1. 前言 + 图片存储在后台，根据图片地址，在vue页面中查看图片，并基于坐标标注

目录

• Vue使用Canvas绘图
• 1、前言
• 2、实现原理
• Vue使用Canvas的小demo
• 顺便总结一波

Vue使用Canvas绘图

1、前言

图片储存在后台中，根据图片的地址，在vue页面中，查看图片，并根据坐标标注指定区域。

由于浏览器的机制，使用window.location.href下载图片时，并不会保存到本地，会在浏览器打开。

2、实现原理

2.1 绘制画布

<el-dialog     title="查看图片"     :visible.sync="dialogJPG"     append-to-body>     <canvas id="mycanvas" width="940" height="570"></canvas> </el-dialog>   //为了突出画布效果可以在css中设置一个边框。