HTML5 画布如何更改 putImageData 比例 [英] HTML5 canvas how to change putImageData scale

问题描述

如何在 scale(1.5, 1.5) 不起作用的情况下更改 putImageData 比例..

How to change putImageData scale with scale(1.5, 1.5) not working..

var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
context.clearRect(0, 0, canvas.width, canvas.height);
context.scale(1.5, 1.5);
context.putImageData(imageData, 0, 0);

推荐答案

正确，您的代码不会缩放现有图形.

context.scale 仅影响新绘图，而不影响现有绘图.

context.scale only affects new drawings, not existing drawings.

context.putImageData 会将保存的原始像素放回画布上，但 putImageData 不是绘图命令，因此不会缩放其结果.

context.putImageData will put the saved original pixels back on the canvas, but putImageData is not a drawing command so its results will not be scaled.

要缩放现有像素，您必须将像素保存到画布之外的实体.外部实体可以是一个新的 Image 元素或第二个 Canvas 元素.

To scale existing pixels you have to save the pixels to an entity outside of your canvas. The outside entity could be a new Image element or a second Canvas element.

示例代码和演示:http://jsfiddle.net/m1erickson/p5nEE/

// canvas related variables
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");

// draw a test square
context.fillStyle="red";
context.fillRect(0,0,50,50);

// create an image from the canvas
// clear & scale the canvas
// draw the image to the canvas
var imageObject=new Image();
imageObject.onload=function(){

    context.clearRect(0,0,canvas.width,canvas.height);
    context.scale(1.2,1.2);
    context.drawImage(imageObject,0,0);

}
imageObject.src=canvas.toDataURL();

这篇关于HTML5 画布如何更改 putImageData 比例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！