原生canvas制作画图小工具的踩坑和爬坑(3)

如果画着画着，突然用户将窗口大小变了，你说我是保持画布大小不变呢，还是让画布大小随着窗口改变而改变，如果窗口缩小，那么保持画布大小不变是没什么大问题的，但是窗口如果变大，画布区域又是自适应的，那么就不得不跟随改变了，但是canvas的宽高改变的话，内容是会清除的，那么就面临两种选择：

用变量将绘制的每一个坐标记录下来，宽高变更后重新绘制；

将画布的内容直接作为图像（这个形容不准确，理解意思就行）保存下来

第一种我没试过，不过可想而知如果画的内容多了，应该会闪烁一下，第二种，就我所知有两种形式

第一种，用getImageData保存图像，改变大小后，用putImageData绘制，putImageData只能裁剪图像，不能拉伸 const imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); canvas.width = newWidth; canvas.height = newHeight; ctx.putImageData(imgData, 0, 0); 第二种，还是创建一个临时画布，将图形绘制下来，改变大小后，用drawImage绘制，drawImage是可以拉伸图像的 const newCanvas = document.createElement("canvas"); newCanvas.width = canvas.width; newCanvas.height = canvas.height; newCanvas.getContext("2d").drawImage(canvas, 0, 0); canvas.width = newWidth; canvas.height = newHeight; ctx.drawImage(newCanvas, 0, 0);

开始我选的是drawImage，窗口如果不是等比缩放（一般不可能等比），图像可以拉伸，但是拉伸一两次图形就变得很模糊，所以可能还不如不改变图像的比例为好，具体还是看场景

到此这篇关于原生canvas制作画图小工具的踩坑和爬坑的文章就介绍到这了,更多相关canvas画图小工具内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！

（编辑：ASP站长网）