有没有办法使用getImageData和putImageData来缩放画布.Below是代码片段 .
var c=document.getElementById("myCanvas");
var c2=document.getElementById("myCanvas2");
var ctx=c.getContext("2d");
var ctx2=c2.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);
function copy(){
var imgData=ctx.getImageData(10,10,50,50);
ctx2.translate(133.333,0);
ctx2.scale(0.75,1);
ctx2.putImageData(imgData,10,70);
}
我试过这个http://jsbin.com/efixur/1/edit .
谢谢Ajain
1 回答
为原始像素操作提供了getImageData()和putImageData(),因此无法进行缩放(除非您在Javascript中编写自定义缩放器) .
你想要的是使用
drawImage()
然后使用另一个<canvas>
作为源而不是<img>
.https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images#Scaling