如何在html中增加画布图像的大小

我已经拍摄了2个画布，一个是源代码，另一个是其他目标。当我将鼠标悬停在画布上的图像上时，它应该放大到canvas2 如何增加canvas2中图像的高度我想放大效果.Below是代码。如何在html中增加画布图像的大小

感谢侯赛因

<html> 
<body> 
<input type="button" onclick="h()"> 
<p>Image to use:</p> 


<p>Canvas:</p> 
<canvas id="myCanvas" onmousemove="h()" width="250" height="300" style="border:1px solid #d3d3d3;"> 
Your browser does not support the HTML5 canvas tag.</canvas> 
<p>Canvas2:</p> 
<canvas id="myCanvas2" width="100" height="100" style="border:1px solid #d3d3d3;"> 
Your browser does not support the HTML5 canvas tag.</canvas> 

<script> 

var image = new Image(); 
image.crossOrigin="anonymous"; 
image.src="img_the_scream.jpg" 

var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 
var img=image ; 
ctx.drawImage(img,0,0); 
var d=document.getElementById("myCanvas2"); 
var ctx1=d.getContext("2d"); 



function h() 
{ 
var img=ctx.getImageData(event.clientX-80,event.clientY-100,100,100); 
ctx1.clearRect (0 , 0 , d.width , d.height); 
ctx1.putImageData(img,0,0); 

//d.width="200"; 
//d.height="200"; 
} 

</script> 

</body> 
</html>

来源

2014-07-25 user1881820

所有你需要做的就是利用toDataUrl和drawImage方法，而不是getImageData和putImageData。例如：

function h() { 
    var img=new Image(); 
    img.src = ctx.toDataUrl(); 
    img.onload = function() { 
     ctx1.drawImage(img,0,0,c.width*horizontalMagnification,c.height*verticalMagnification); 
    }; 
}

或者，你可以只调用ctx1.scale(horizontalMagnification,verticalMagnification);使用putImageData之前。

来源

2014-07-25 10:20:51 scribblemaniac

如何在html中增加画布图像的大小

回答

相关问题