javascript - createpattern canvas 怎么设置图片的大小啊

问题描述

问 题

解决方案

new Image()的时候，本身可以指定宽高（基于css像素的值）。

参考：
1. MDN - Image

---

思路：
用离屏Canvas，设置好宽高后绘制图片进去，然后作为.createPattern()的渲染对象。

示例代码：

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var into = document.createElement("canvas");
var ctx2 = into.getContext('2d');
into.width = 50;
into.height = 50;

var img = new Image();
img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
img.onload = function() {
    ctx2.drawImage(img,0,0,50,50);
    var pattern = ctx.createPattern(into, 'repeat');
    ctx.fillStyle = pattern;
    ctx.fillRect(0, 0, 400, 400);
};

这篇关于javascript - createpattern canvas 怎么设置图片的大小啊的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！