canvas图片绘制

H5的img标签可以在手机端自动保存，但是我需求是这样子的，一张图片上有优惠码，可以点击复制，有合成的照片，长按要整体保存。所以就用了canvas图片合成的功能。
绘制之前，我们先了解下canvas的绘制图片方法。
HTML5中引入新的元素canvas，其drawImage 方法允许在 canvas 中插入其他图像( img 和 canvas 元素) 。drawImage函数有三种函数原型：

drawImage(image, dx, dy) 
drawImage(image, dx, dy, dw, dh) 
drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

第一个参数image可以用HTMLImageElement，HTMLCanvasElement或者HTMLVideoElement作为参数。dx和dy是image在canvas中定位的坐标值；dw和dh是image在canvas中即将绘制区域（相对dx和dy坐标的偏移量）的宽度和高度值；sx和sy是image所要绘制的起始位置，sw和sh是image所要绘制区域（相对image的sx和sy坐标的偏移量）的宽度和高度值。
下面开始上代码

	drawimg() {
		var that = this;
		var canvas = document.createElement('canvas');
		var ctx = canvas.getContext('2d');
		canvas.width = 624;//canvas画布的宽度
		canvas.height = 1103;//canvas画布大小
		var img1 = new Image();
		img1.crossOrigin = "";//解决跨域
		img1.src = 'http://morefun.image.alimmdn.com/neateest/background.png'
		img1.onload = function () {
		//把图片画到canvas上
			ctx.drawImage(
				this, 0, 0
			);
			var img2 = new Image();
			img2.crossOrigin = "";
			img2.src = "http://morefun.image.alimmdn.com/youmai/xuxu/photo.png"
			img2.onload = function () {
				ctx.drawImage(
					this, 12, 12
				)
				//canvas写入文字
				ctx.font = "bold 44px 方正粗圆简体";
				ctx.fillStyle = "#890a0a";
				for (var i = 0; i < that.promocode.length; i++) {
					ctx.fillText(that.promocode[i], 40 + i * 37, 997);
				}
				that.canvasimg = canvas.toDataURL("image/png")//此时的路径是base64格式，ios可以直接长按保存，但是在安卓上就要把base64格式转为url就可以了
			}
		}

这样一个canvas就绘制好了。