javascript – 旋转后,在正确的位置绘制图像

2019-07-13 21:35:56 阅读：170 来源： 互联网

如您所见,我尝试在画布中旋转图像：

https://jsfiddle.net/1a7wpsp8/4/

因为我在[0,image_height]周围旋转了图像,所以图像信息丢失了.缺少部分头部,并且“画布”的高度现在变小,以显示整个旋转图像.

为了解决这个问题,我想我必须将旋转原点更多地向右移动并增加画布高度.

我添加了一个方法,以特定的角度获取原点周围的旋转点：

function rotate(x, y, a) {
 var cos = Math.cos,
    sin = Math.sin,

    a = a * Math.PI / 180, 
    xr =  x * cos(a) - y * sin(a);
    yr =  x * sin(a) + y * cos(a);

 return [xr, yr];
}

有了这个我试图计算新的旋转原点,但失败了.

旋转图像的首选方法是什么？
如何在画布上显示完整图像,没有红色边框？谢谢
https://jsfiddle.net/1a7wpsp8/4/

解决方法:

这是一个小提琴,代码为您的图像旋转:)
http://jsfiddle.net/6ZsCz/1911/

HTML：

canvas id="canvas" width=300 height=300></canvas><br>
<button id="clockwise">Rotate right</button>
<button id="counterclockwise">Rotate left</button>

JS：

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var width=0;
var height=0;
var diagonal = 0;
var angleInDegrees=0;
var image=document.createElement("img");
image.onload=function(){
    width = image.naturalWidth;
  height = image.naturalHeight;
 diagonal=Math.sqrt(Math.pow(width,2)+Math.pow(height,2));
   ctx.canvas.height = diagonal;
  ctx.canvas.width = diagonal;
  ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.save();
    ctx.translate(diagonal/2,diagonal/2);
    ctx.rotate(0);
    ctx.drawImage(image,-width/2,-height/2);
    ctx.restore();
}
image.src="http://i.imgur.com/gwlPu.jpg";

$("#clockwise").click(function(){ 
    angleInDegrees+=45;
    drawRotated(angleInDegrees);
});

$("#counterclockwise").click(function(){ 
    angleInDegrees-=45;
    drawRotated(angleInDegrees);
});

function drawRotated(degrees){
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.save();
    ctx.translate(diagonal/2,diagonal/2);
    ctx.rotate(degrees*Math.PI/180);
    ctx.drawImage(image,-width/2,-height/2);
    ctx.restore();
}

CSS(用于画布背景)：

canvas{border:1px solid red;
background:red;border-radius:50%} // to see exectly centered :)

标签：jquery,javascript,html5,canvas
来源： https://codeday.me/bug/20190713/1453509.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

javascript – 旋转后,在正确的位置绘制图像