有没有办法使用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。
由于 阿然
答案 0 :(得分:6)
为原始像素操作提供了getImageData()和putImageData(),因此无法进行缩放(除非您在Javascript中编写自定义缩放器)。
您想要的是使用drawImage()
,然后使用其他<canvas>
作为来源,而不是<img>
。
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Using_images#Scaling