如何为画布图案缩放图像？

Question

我想用图像填充画布并预先将其缩放到特定宽度。

我正在尝试实现一种效果，即可以用鼠标擦除画布前景中的图像以查看背景中的图像。这就是为什么我需要使用一种模式来填充我的画布，而不仅仅是使用 drawImage()。除了前景图像的缩放之外，一切都有效。这是我生成模式的代码：

var blueprint_background = new Image();
blueprint_background.src = "myfunurl"; 
blueprint_background.width = window.innerWidth;
blueprint_background.onload = function(){
    var pattern = context.createPattern(this, "no-repeat");
    context.fillStyle = pattern;
    context.fillRect(0, 0, window.innerWidth, 768);
    context.fill();
};

这正是它应该做的，除了图像保持其原始大小。 如您所见，我希望图像缩放到 window.innerWidth （记录时其值为 1920）。 如果需要，我可以提供其余代码，但由于该错误很可能在此 sn-p 中，因此我决定不发布其余代码。

编辑：这是我的完整代码以及建议的更改。前面的地面图像现在显示在整个宽度上，但是擦除不再起作用。

JavaScript（注意我使用 jQuery 而不是 $）：

jQuery(document).ready(function() {

var cwidth = window.innerWidth;
var cheight = 768;

function createCanvas(parent, width, height) {
        var canvas = {};
        canvas.node = document.createElement('canvas');
        canvas.context = canvas.node.getContext('2d');
        canvas.node.width = width || 100;
        canvas.node.height = height || 100;
        parent.appendChild(canvas.node);
        return canvas;
    }

    function init(canvas, fillColor) {
        var ctx = canvas.context;
        canvas.isDrawing = true;
        jQuery('#canvas').children().css('position:absolute; top: ' + jQuery('#Top_bar').height() + 'px');
        // define a custom fillCircle method
        ctx.fillCircle = function(x, y, radius, fillColor) {
            this.fillStyle = fillColor;
            this.beginPath();
            this.moveTo(x, y);
            this.arc(x, y, radius, 0, Math.PI * 2, false);
            this.fill();
        };

        // bind mouse events
        canvas.onmousemove = function(e) {
            if (!canvas.isDrawing) {
               return;
            }
            var x = e.pageX - this.offsetLeft;
            var y = e.pageY - jQuery('#Top_bar').outerHeight();
            var radius = 30;
            var fillColor = '#ff0000';
            ctx.globalCompositeOperation = 'destination-out';
            ctx.fillCircle(x, y, radius, fillColor);
        };

    }

    var container = document.getElementById('canvas');
    jQuery('#canvas').css('position:absolute; top: ' + jQuery('#Top_bar').height() + 'px');
    var canvas = createCanvas(container, cwidth, cheight);
    init(canvas, '#ddd');

var fgimg = document.getElementById("fgimg");
fgimg.width = cwidth;

var context = canvas.node.getContext("2d");
let canvasP = document.getElementById("pattern");
canvasP.width = window.innerWidth;
canvasP.height = 768; 
let ctxP = canvasP.getContext("2d");
ctxP.drawImage( fgimg, 0, 0,window.innerWidth,768 );    

context.fillStyle = context.createPattern(canvasP,"no-repeat");
context.fillRect(0,0, canvas.width, canvas.height);

});

CSS：

#canvas {
    background:url(http://ulmke-web.de/wp-content/uploads/2019/01/Header-6.jpg);
    background-repeat: no-repeat;
  background-size: cover;
background-position: center center;
    width: 100%;
    height: 768px;
}

HTML：

<div id="canvas">
<canvas id="pattern">
</div>

<div style="display:none">
<img id="fgimg" src=" http://ulmke-web.de/wp-content/uploads/2019/01/Header-5.jpg">
</div>

Answer 1

我会使用两个画布。在第一个上，您绘制图像并使用此画布作为图像来创建图案。为了缩放图像，您在我的示例中缩放了第一个画布 #pattern 的大小。

例如，您可以为 10/10 图像执行此操作：

canvasP.width = 10;
canvasP.height = 10; 
ctxP.drawImage( redpoint, 2.5, 2.5 );

或者您可以为 20/20 图像执行此操作：

canvasP.width = 20;
canvasP.height = 20; 
ctxP.drawImage( redpoint, 5, 5,10,10 );

此外，在我的示例中，我在图像周围添加了一点边距。

let canvasP = document.getElementById("pattern");
		if (canvasP && canvasP.getContext) {
		let ctxP = canvasP.getContext("2d");
     /*canvasP.width = 10;
      canvasP.height = 10; 
      ctxP.drawImage( redpoint, 2.5, 2.5 );	*/
      
      canvasP.width = 20;
      canvasP.height = 20; 
      ctxP.drawImage( redpoint, 5, 5,10,10 );	
		}
		
		let canvas1 = document.getElementById("canvas");
		if (canvas1 && canvas1.getContext) {
		let ctx1 = canvas1.getContext("2d");
			if (ctx1) {

				ctx1.fillStyle = ctx1.createPattern(canvasP,"repeat");
				ctx1.fillRect(0,0, canvas1.width, canvas1.height);
							
				}
		}

canvas{border:1px solid}

 <img id="redpoint" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO 9TXL0Y4OHwAAAABJRU5ErkJggg==">
<canvas id="pattern"></canvas>
<canvas id="canvas"></canvas>

希望对你有帮助。