<template>
<div id="">
<div style="display: flex;">
<canvas id="myCanvas" width="520" height="720" >这是浏览器不支持canvas时展示的信息</canvas>
</div>
</div>
</template>
<script>
const img = document.getElementById('img');
export default {
name: 'app',
data() {
return {};
},
mounted() {
this.canvasInit('')
},
methods: {
canvasInit(srcImg) {
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
var img = new Image();
img.src = 'https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1589884154&di=9b0f36e95282f61005aa4b7dc6a7698b&src=http://a3.att.hudong.com/14/75/01300000164186121366756803686.jpg';
img.onload = function() {
ctx.drawImage(img, 0, 0, 520, 720);
ctx.strokeStyle = 'darkred';
ctx.strokeRect(0, 100, 115, 108);
ctx.strokeRect(10, 50, 115, 108);
ctx.strokeRect(50, 10, 10, 10);
};
}
}
};
</script>
<style>
* {
margin: 0;
padding: 0;
}
</style>