前端图形、算法这块还差很多,身处一个注重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()方法,否则图片不显示~