解决canvas得createPattern绘制图片显示不全得问题

您所在的位置：网站首页 › 照片设置桌面背景显示不全 › 解决canvas得createPattern绘制图片显示不全得问题

解决canvas得createPattern绘制图片显示不全得问题

2024-03-19 15:35| 来源: 网络整理| 查看: 265

今天用canvas得createPattern赋值图片背景得时候发现当我的图片大小大于canvas得画布大小的时候无法自适应！效果如下:

为了解决这个问题我们需要做如下操作：

ctx = canvas.getContext('2d'), w = canvas.width = window.innerWidth, h = canvas.height = newHeight, // 创建离屏画布 var autoImg = document.createElement("canvas"); var ctx3 = autoImg.getContext('2d'); ctx3.canvas.width = canvas.width; ctx3.canvas.height = canvas.height; var img = new Image(); img.src = imgsrc; img.onload = function() { ctx3.drawImage(img,0,0,canvas.width,canvas.height); var pattern = ctx.createPattern(autoImg, 'no-repeat'); ctx.fillStyle= pattern; ctx.fillRect(0,0, canvas.width, canvas.height); }

这样已经解决了

【本文地址】

解决canvas得createPattern绘制图片显示不全得问题

解决canvas得createPattern绘制图片显示不全得问题

今日新闻

推荐新闻