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）。如果需要，我可以提供其余代码，但是由于此代码段中很可能出现错误，因此我决定不发布其余代码。

编辑：这是我的完整代码，其中包含建议的更改。现在，前部地面图像会显示在整个宽度上，但是删除操作不再有效。

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>

希望对您有帮助。

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

1 个答案: