dom -> canvas

前端图形、算法这块还差很多，身处一个注重UI的公司，先从常用的图形开始···

#1、ctx = element.getContext('2d');

让元素可以绘图。

#2、ctx.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

【引】dom -> canvas：https://blog.csdn.net/u010081689/article/details/50728854。

#3、ctx.fillStyle

ctx.fillStyle = "transparent";为透明

#4、ctx.fillRect()、ctx.strokeRect()、ctx.rect()、ctx.fill()、ctx.stroke()

首先：fill填充、stroke笔触（理解为边框），rect 需要与 fill 或者 stroke 搭配使用。

rect + fill = fillRect实心矩形

rect + stroke= strokeRect空心矩形

【引】https://blog.csdn.net/u013182438/article/details/65630287

#5、ctx.clearRect(x,y,width,height)

清空给定矩形内的指定像素。

#dom2Svg

1、模板，好多模板都不对会报错。。。

const svg = 'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" ' +
    'width="' + element.offsetWidth +
    '" height="' + element.offsetHeight + '">' +
    '<foreignObject x="0" y="0" width="100%" height="100%">' +
    new XMLSerializer().serializeToString(element).replace(/#/g, '%23').replace(/\n/g, '%0A') +
    '</foreignObject></svg>';

2、如果dom有<img/>标签则需要先全部转成base64格式链接，并且调用drawImage()方法，否则图片不显示~