html5图像自动旋转,HTML5仅旋转图像而不是画布上下文(HTML5 rotate image only not the canvas context)...

最新推荐文章于 2021-06-04 02:08:04 发布

ying鹿好看

最新推荐文章于 2021-06-04 02:08:04 发布

阅读量232

点赞数

文章标签： html5图像自动旋转

HTML5仅旋转图像而不是画布上下文(HTML5 rotate image only not the canvas context)

有没有办法在画布内旋转图像？我唯一能找到的就是旋转画布的整个上下文。我想在画布上独立旋转图像。

Is there a way to rotate an image inside of a canvas? The only thing that I could find are rotating the whole context of the canvas. I would like to rotate images independently on the canvas.

原文：https://stackoverflow.com/questions/12675893

更新时间：2020-01-23 07:39

最满意答案

遗憾的是，您无法直接旋转图像。

如果要在X位置显示宽度W和高度H的图像，Y可以在图像中间以角度A(弧度)旋转，可以执行以下操作：

ctx.translate(-X - W / 2, -Y - H / 2);

ctx.rotate(A);

ctx.drawImage(YOUR_IMAGE, 0, 0);

ctx.rotate(-A);

ctx.translate(X + W / 2, Y + H / 2);

Unfortunately you can't directly rotate an image.

What you can do if you want to display an image of width W and height H at position X,Y rotate with an angle A (in radian) with a pivot in the middle of your image is :

ctx.translate(-X - W / 2, -Y - H / 2);

ctx.rotate(A);

ctx.drawImage(YOUR_IMAGE, 0, 0);

ctx.rotate(-A);

ctx.translate(X + W / 2, Y + H / 2);

相关问答

一般来说，你想要做的是：将上下文转换为对象应旋转的画布上的点。旋转上下文。根据旋转中心对象内的负偏移量转换上下文。在0,0处绘制对象。在代码中： ctx.save();

ctx.translate( canvasRotationCenterX, canvasRotationCenterY );

ctx.rotate( rotationAmountInRadians );

ctx.translate( -objectRotationCenterX, -objectRotationCente

...

您可以使用canvas'context.translate和context.rotate来旋转图像以下是绘制以指定度旋转的图像的功能： function drawRotated(degrees){

context.clearRect(0,0,canvas.width,canvas.height);

// save the unrotated context of the canvas so we can restore it later

// the alternati

...

iOS 不支持动画化SVG图像的alpha。但我找到了解决方案。如果使用以下代码创建全屏画布以缩放它： var ratio = window.devicePixelRatio || 1,

width = $(window).width(),

height = $(window).height();

this.canvas.width = width * ratio;

this.canvas.height = height * ratio;

this.canvas.style.

...

将转换后的(翻译+旋转的)画布重置为其原始状态的方法有多种。低指针的答案是使用context.save将上下文保存为原始未经转换的状态，并使用context.restore在绘制完成后将上下文恢复到原始状态。另一种方式是以与它们相反的顺序撤销转换。另请注意，context.translate实际上将画布原点移动到画布中心。由于图像是从它们的左上角(而不是它们的中心)绘制的，因此如果要将图像置于画布中心，则必须将drawImage偏移图像宽度和高度的一半。这是和例子： http : //j

...

IE 10不支持const 。将其更改为var 。这至少会成为不起作用的原因之一。另外，调试器(在IE10中并不是那么棒)仍然是你的朋友。我们会称他为'半友'。用他。他说什么？ IE 10 doesn't support const. Change it to var. That at least will be one reason for it not working. Also, the debugger (which is not that amazing in IE10) i

...

使用.save()和.restore() ( 更多信息 )： link.οnlοad=function(){

ctx.save(); // save current state

ctx.rotate(Math.PI); // rotate

ctx.drawImage(link,x,y,20,20); // draws a chain link or dagger

ctx.restore(); // restore original states (no rotati

...

你在尝试什么浏览器？使用FireFox和Chrome，我无法使用repeat-x或repeat-y渲染任何一种模式。相反，我能够只repeat渲染两者。 (见http://jsfiddle.net/ZthsS/1/ ) 浏览器可能没有完整的规范实现。根据http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#dom-context-2d-createpattern的实施状态，IE

...

遗憾的是，您无法直接旋转图像。如果要在X位置显示宽度W和高度H的图像，Y可以在图像中间以角度A(弧度)旋转，可以执行以下操作： ctx.translate(-X - W / 2, -Y - H / 2);

ctx.rotate(A);

ctx.drawImage(YOUR_IMAGE, 0, 0);

ctx.rotate(-A);

ctx.translate(X + W / 2, Y + H / 2);

Unfortunately you can't directly rotate an im

...

3注意事项： fillStyle不会导致您的画布被填充。这意味着当你填充一个形状时，它将填充该颜色。因此，您需要编写canvas.fillRect( xPos, yPos, width, height) 。等到图像实际加载，否则渲染可能不一致或有问题。仔细考虑画布中使用的跨域图像 - 大多数浏览器都会抛出安全异常并停止执行代码。 3 notes: fillStyle does not cause your canvas to be filled. It means that when y

...

您可以使用临时画布剪辑和取消旋转蓝框从图像中剪切蓝色矩形的边界框取消旋转边界框，使蓝色矩形不旋转(角度== 0) 剪切额外的边界框区域以仅显示蓝色矩形将蓝色矩形绘制到显示画布这是代码和演示： http ： //jsfiddle.net/m1erickson/28EkG/