canvas画布

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代码去绘制图像。