canvas是html5新增元素,通过canvas生成一块画布,在画布上使用javascript来绘制图形或实现图形动画。
<canvas id="myCanvas" width="300" height="500" v-on:click="state = false"></canvas>
onMounted(()=>{
const ccode = ref('')
code({
userid: 11,
scienceid:1
}).then(res =>{
console.log(res);
ccode.value =res
var canva = document.getElementById("myCanvas");
var canvass = canva.getContext("2d");
var Img = new Image();
Img.src="http://zhang.jiajun.asia/assets/friend.jpg";//背景图
console.log(Img.src);
Img.onload=function(){
canvass.drawImage(Img,6,6,280,360);
var Imgs = new Image();
var base=ccode.value
Imgs.src = base;
Imgs.onload=function(){
canvass.drawImage(Imgs,70,178,155,135);
}
}
});
})
上面是具体示例,首先我们要创建canvas元素,然后配合js代码去绘制图像。