解决canvas得createPattern绘制图片显示不全得问
今天用canvas得createPattern赋值图片背景得时候发现 当我的图片大小大于canvas得画布大小的时候 无法自适应!效果如下:
![](https://img.haomeiwen.com/i1480521/f6c537800138499c.png)
为了解决这个问题我们需要做如下操作:
// 创建初始画布
let scienceDom = document.createElement( 'canvas' );
scienceDom.width = 600;
scienceDom.height = 300;
let context = scienceDom.getContext("2d");
// 创建离屏画布
var autoImg = document.createElement("canvas");
var ctx2 = autoImg.getContext('2d');
ctx2.canvas.width = 1024;
ctx2.canvas.height = 576;
/**
*加载图片
* */
let backImage = new Image();
backImage.src = "./images/science.jpg"
backImage.onload = function () {
ctx2.drawImage(backImage,0,0,600,300);
var pattern = context.createPattern(autoImg, 'no-repeat');
context.fillStyle = pattern;
context.fillRect(0, 0, 600, 300);
}
document.body.appendChild( scienceDom );
![](https://img.haomeiwen.com/i1480521/fa60dcdf1124e535.png)
![](https://img.haomeiwen.com/i1480521/d24e767b77b3e429.png)
欧克 这样就解决了我们的问题拉 欢迎大家留言咨询
document.body.appendChild( scienceDom );