canvas绘制图片 a标签下载图片

downloadPoster(){

  var canvas = document.createElement('canvas');// 创建一个名字为canvas的元素
  canvas.id = 'myCanvas'// id为myCanvas
  canvas.width = 350// 设置宽高，隐藏，
  canvas.height = 581
  canvas.style.display = 'none'
  document.body.appendChild(canvas)// 新建的canvas添加到body里面
  
  // 以下绘制画布
  var c=document.getElementById("myCanvas"); // 获取到myCanvas的id
  var ctx=c.getContext("2d");// 创建context对象 getContext对象是内建的HTML5对象，拥有多种绘制路劲，矩形，圆形，字符以及添加图像的方法
  var spreadImg=document.getElementById("spreadImg");// 获取到界面上的本来的图片，需求是在这个图片上加图片，加文字等
  // context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
  // 必填项：img:图片等   x:x坐标位置   y:y坐标位置
  // 可选：sx/sy:开始剪切的x/y轴，swidth/sheight：被剪切图像的宽度/高度，width/height：要使用的图像的宽度/高度
  ctx.drawImage(spreadImg,0,0);// 在创建的ctx画布上面绘制图像，画布或者是视频

  // 以下把需要的字加进去 设置位置 大小 颜色 居中等
  ctx.font='16px Arial';// 设置ctx画布字体属性 ：context.font="italic small-caps bold 12px arial";
  ctx.fillStyle="#FF9429";// 设置ctx画布填充绘画的颜色，渐变和模式
  ctx.textAlign='center'//设置或返回文本内容的当前对齐方式 "center|end|left|right|start"
  ctx.fillText(this.showCouponName,180,270)//在画布上绘制“被填充的文本”，(text,x,y,maxWidth);maxWidth可选

  // 以下把需要的字加进去 设置位置 字体大小 颜色 居中等
  ctx.font='23px Arial';
  ctx.fillStyle="#DF460A";
  ctx.textAlign='center'
  ctx.fillText(this.discountAmount,185,315)

  // 以下把需要的图片放进去 设置位置等
  var spreadCodeImg = document.getElementById("spreadCodeImg");//获取需要的图片
  ctx.drawImage(spreadCodeImg,110,395,130,130)//设置图片的xy轴位置，设置宽高
  var oA = document.createElement("a");//创建a标签
  oA.download = '图文海报.jpg';//设置a标签的download 就是a标签自带的下载的功能，名字就是下载的文件名
  oA.href = c.toDataURL();//就是将canvas画板保存为图片格式
  document.body.appendChild(oA);//把创建的a标签添加到body里面取
  oA.click();//给a标签添加click点击事件
  oA.remove(); // 下载之后把创建的元素删除
},

remark：

1. fillRect(x,y,width,height):绘制已经填色的矩形，默认的填充颜色是黑色，使用fillStyle属性设置绘图的颜色