基于vue的canvas画图并下载到本地

canvas画图的基本步骤

html创建一个canvas标签画布

<div class="contain">
   <canvas id="myCanvas" width="444" height="500" ref="myCanvas"></canvas> 
</div>

canvas的宽高一定要写，因为你不设置他会有一个默认的宽高300*150，你在绘图的时候会出现变形 

js在canvas画布中画出数据

let myCanvas = this.$refs.myCanvas
//画布的宽高
let Cwidth = 500
let CHeight = 500
// 创建一个画布上绘图的环境
var ctx = myCanvas.getContext('2d')
// 一般情况下，canvas的背景颜色是透明的，当生成图片的时候也是透明
// 如果希望图片有个背景颜色，可以创建一个框高100%的矩形
// 画布的最底端-这样就可以有个背景颜色
ctx.fillStyle = '#fff'
ctx.fillRect(0, 0, Cwidth, CHeight);

//设置颜色也可以适用rgba
ctx.fillStyle = 'rgba(0,0,0,0.9)'
//绘制一个矩形的边框(x, y, width, height)
ctx.strokeRect(50, 100, 100, 100)

// 可以在页面插入文字
ctx.fillStyle = '#333'

// 三个参数-文字，横坐标-纵坐标
ctx.font = '16px Arial'
ctx.fillText('今天是个好日子', 50, 50);

ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
ctx.fillRect(200, 30, 80, 50);

// 还可以插入图片
// 首先创建一个图片标签
// 等待图片加载完之后在渲染画布中
// let imgObj = new Image()
// imgObj.src = 'http://img4.imgtn.bdimg.com/it/u=3704809141,1787261659&fm=11&gp=0.jpg'
// let imgUrl = await this.imgOnload(imgObj)
// ctx.drawImage(imgUrl, 250, 200, 150, 150)

// 这里图片的我注释了，，因为跨域的图片链接，在生成图片时会失败，你可以使用本地图片
// 基本步骤就这样

// 生成图片（图片的格式）
let imageUrl = myCanvas.toDataURL("image/png", 0.5);

// base64图片地址就获取到了
// 现实中存在两种情况，一个显示页面中，点击下载，这个就简单了，可以利用a标签进行下载
//还有一种情况就是，图片base64地址生成后，自动下载
this.downloadFile(imageUrl, '1.png')

// 加载图片-二维码-条形码
imgOnload(img) {
    return new Promise(resolve => {
        img.onload = function () {
	        resolve(this)
        }
    })
}

// 创建下载图片事件
downloadFile(data, filename) {
    //创建一个具有指定的命名空间URI和限定名称的元素
    var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
    save_link.href = data;
    save_link.download = filename;
    // 绑定下载事件
    var event = document.createEvent('MouseEvents');
    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false,         false, false, 0, null);
    save_link.dispatchEvent(event);
},

这样的话就可以生成图片，但是还会出现一种情况，就是画的canvas和生成的图片会有点模糊现象，在下一篇文章会写解决办法