canvas在图片上绘制图形

王等等csdn

已于 2022-08-26 16:17:23 修改

阅读量1.4k

点赞数 4

文章标签： javascript canvas async await

于 2022-08-26 16:09:02 首次发布

本文链接：https://blog.youkuaiyun.com/qq_38475901/article/details/126544835

版权

本文介绍如何在Vue项目中，根据后台返回的图片URL和矩形顶点坐标，利用canvas在图片上绘制矩形，并通过async await处理异步加载，确保图片顺序正确。最终实现图片集合的顺序播放和展示。

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

说明
在vue项目中，后台返回图片的url和矩形的顶点坐标（左上和右下），需要在图片上绘制矩形框，并在前端进行展示（一张张的播放图片）。
其中返回的数据是多张图片的集合，前端也需要整合一个绘制后的图片集合，由于image onload是异步的，为了保证图片顺序不变，用到了async await。

<canvas id="canvas" width="640" height="320" style="display: none" />

loadImg(src) {
   
	return new Promise((resolve, reject) => {
   
		const img = new Image()
		img.src = src
		img.setAttribute('cros