图像调整大小然后在画布中旋转 - javascript

问题描述：

我使用的图像大小为1024 x 768，并且我的图像大小为300 x 300，因此我想先将图像大小调整为300 x 300，然后在画布内旋转它比例。我正在使用下面的代码，但它正在调整图像大小，但旋转画布外的一些元素。所以，如果你点击右键，那么你什么都看不到，然后再次右击，然后你将图像向下旋转。图像调整大小然后在画布中旋转 - javascript

var canvas=document.getElementById("canvas"); 
var ctx=canvas.getContext("2d"); 
var degrees=0; 
var image=document.createElement("img"); 
image.onload=function(){ 
    ctx.drawImage(image,0,0,300,300); 
} 
image.src="http://media1.santabanta.com/full1/Outdoors/Landscapes/landscapes-275a.jpg"; 
image.width = 300; 
image.height = 300; 
$("#clockwise").click(function(){ 
    degrees+=90 
    ctx.clearRect(0,0,canvas.width,canvas.height); 
    ctx.save(); 
    ctx.translate(300,300); 
    ctx.rotate(degrees*Math.PI/180); 
    ctx.drawImage(image,0,0,300,300); 
    ctx.restore(); 
});

请检查我的代码中的jsfiddle以及 http://jsfiddle.net/6ZsCz/914/

答

尝试这种变化。

转换到画布的中心。
带有[x，y]偏移量的ImageImage的DrawImage image.width/2 & image.height/2。此偏移量是必需的，因为平移有效地使画布中心点[150,150]成为新的画布原点[0,0]。您需要负向偏移量将图形向左和向上拉动以补偿新原点。

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 

 
var degrees=0; 
 

 
var image=document.createElement("img"); 
 
image.onload=function(){ 
 
    ctx.drawImage(image,0,0,300,300); 
 
} 
 
image.src="http://media1.santabanta.com/full1/Outdoors/Landscapes/landscapes-275a.jpg"; 
 

 

 
$("#clockwise").click(function(){ 
 
    degrees+=90 
 
    ctx.clearRect(0,0,canvas.width,canvas.height); 
 
    ctx.save(); 
 
    ctx.translate(150,150); 
 
    ctx.rotate(degrees*Math.PI/180); 
 
    ctx.drawImage(image,0,0,image.width,image.height,-150,-150,300,300); 
 
    ctx.restore(); 
 
});

body{ background-color: ivory; } 
 
canvas{border:1px solid red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<canvas id="canvas" width=300 height=300></canvas><br> 
 
<button id="clockwise">Rotate right</button>

图像调整大小然后在画布中旋转 - javascript

相关推荐