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

debugcn 发表于 Dev

骨盆

我正在使用尺寸为1024 x 768的图像，并且画布的尺寸为300 x 300，因此我想先将图像的尺寸调整为300 x 300，然后在画布中按比例旋转它。我正在使用以下代码，但它正在调整图像大小，但在画布外旋转了某些元素。因此，如果单击右键，则看不到任何东西，然后再次单击右键，则图像将向下旋转。

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]偏移image.width / 2和image.height / 2的DrawImage。需要此偏移量是因为平移有效地使画布中心点[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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。