原生canvas建造绘图小器材的踩坑和爬坑

假如画着画着，溘然用户将窗口巨细变了，你说我是保持画布巨细稳固呢，照旧让画布巨细跟着窗口改变而改变，假如窗口缩小，那么保持画布巨细稳固是没什么大题目的，可是窗口假如变大，画布地区又是自顺应的，那么就不得不跟从改变了，可是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绘图小器材内容请搜刮剧本之家早年的文章或继承赏识下面的相干文章，但愿各人往后多多支持剧本之家！

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!