canvas

重点

1. 一切路径从beginPath开始，清除之前路径
2. 一切状态走在save和restore之间
3. closePath 封闭图形

ctx.save()
XXXX
ctx.restore()

drawImage

function drawImage() {
    let image = new Image()
    image.setAttribute("crossOrigin", 'Anonymous')
    image.src = 'http://fed.welian.com/4_event/share/invitation_text_1.png'
    image.onload = function () {
      ctx.drawImage(image, 150, 0, 378, 666);
    }
}

saveImage

/**
    @params: { string } name 图片名字
    @params: { string } dom canvas
*/
function saveImage(name, dom) {
    const el = document.querySelector(dom)
    const img = el.toDataURL('image/png').replace('image/png', 'image/octet-stream')
    let aLink = document.createElement('a')
    aLink.href = img
    aLink.download = name + '.png'
    
    var event = document.createEvent('MouseEvents')
    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null)
    aLink.dispatchEvent(event)
}

canvas的api

clearRect 清除某个矩形区域的内容
beginPath
save
restore
moveTo
lineTo
stroke
closePath //封闭图形
fillRect
fillText
drawImage