画布从底部中心图像角度旋转？
Posted
技术标签:
【中文标题】画布从底部中心图像角度旋转？【英文标题】：Canvas rotate from bottom center image angle? 【发布时间】：2010-09-26 19:04:16 【问题描述】：如何从底部中心角度旋转带有 canvas html5 元素的图像？
<html>
<head>
<title>test</title>
<script type="text/javascript">
function startup()
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = 'player.gif';
img.onload = function()
ctx.translate(185, 185);
ctx.rotate(90 * Math.PI / 180);
ctx.drawImage(img, 0, 0, 64, 120);
</script>
</head>
<body onload='startup();'>
<canvas id="canvas" style="position: absolute; left: 300px; top: 300px;" ></canvas>
</body>
</html>
不幸的是，这似乎从图像的左上角旋转它。有什么想法吗？
编辑：最终物体（宇宙飞船）必须像时钟指针一样旋转，好像它在向右/向左转。
【问题讨论】：
code.google.com/p/explorercanvas 它将为您添加出色的跨浏览器支持，这不是一回事，因为对于 IE，您实际上将使用 VML 另见Using HTML5 Canvas to Rotate Image About Arbitrary Point 【参考方案1】：首先，您必须平移到您想要旋转的点。在这种情况下，图像尺寸为 64 x 120。要围绕底部中心旋转，您需要转换为 32、120。
ctx.translate(32, 120);
这会将您带到图像的底部中心。然后旋转画布：
ctx.rotate(90 * Math.PI/180);
旋转 90 度。
然后当你绘制图像时试试这个：
ctx.drawImage(img, -32, -120, 64, 120);
？这行得通吗？
【讨论】：
真的太棒了：再次感谢。我想我现在已经掌握了窍门。 更新：但是有一个问题，由于我认为的宽度，左侧被切断了。有什么办法可以解决这个问题，但仍然有这个很好的角度？ 看来我通过设置 ctx.translate(232, 120); - 将您的答案设置为接受的答案:) @Vincent 你能看看***.com/questions/17487277/…。谢谢:)【参考方案2】：正确的答案当然是文森特的答案。 我对这个旋转/平移的事情有点摸索，我认为我的小实验可能会很有趣：
<html>
<head>
<title>test</title>
<script type="text/javascript">
canvasW = canvasH = 800;
imgW = imgH = 128;
function startup()
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// Just to see what I do...
ctx.strokeRect(0, 0, canvasW, canvasH);
var img = new Image();
img.src = 'player.png';
img.onload = function()
// Just for reference
ctx.drawImage(img, 0, 0, 128, 128);
ctx.drawImage(img, canvasW/2 - imgW/2, canvasH/2 - imgH/2, 128, 128);
mark(ctx, "red");
// Keep current context (transformations)
ctx.save();
// Put bottom center at origin
ctx.translate(imgW/2, imgH);
// Rotate
// Beware the next translations/positions are done along the rotated axis
ctx.rotate(45 * Math.PI / 180);
// Mark new origin
mark(ctx, "red");
// Restore position
ctx.translate(-imgW/2, -imgH);
ctx.drawImage(img, 0, 0, imgW, imgH);
mark(ctx, "green");
// Draw it an wanted position
ctx.drawImage(img, canvasW/2, canvasH/3, imgW, imgH);
// Move elsewhere:
ctx.translate(canvasW/2, canvasH/2);
ctx.drawImage(img, 0, 0, imgW, imgH);
mark(ctx, "blue");
ctx.restore();
function mark(ctx, color)
ctx.save();
//~ ctx.fillStyle = color;
//~ ctx.fillRect(-2, -2, 4, 4);
ctx.strokeStyle = color;
ctx.strokeRect(0, 0, imgW, imgH);
ctx.restore();
</script>
</head>
<body onload='startup();'>
<canvas id="canvas" style="position: absolute; left: 300px; top: 300px;" ></canvas>
</body>
</html>
我的绊脚石是定位旋转的图形很难，因为它是沿着旋转轴的：要么我们必须做一些三角数学来在原始原点进行绘制，要么我们必须在第二个隐藏的画布上绘制，然后把它涂在目标上。 除非别人有更好的主意？
【讨论】：
【参考方案3】：当我需要从指定点（中心）开始旋转文本时，我使用过这个？
ctx.save();
ctx.translate(x,y);
ctx.rotate(degree*Math.PI/180);
ctx.translate(-x,-y);
ctx.fillText(text,x,y);
ctx.stroke();
ctx.restore();
【讨论】：
【参考方案4】：<html>
<head>
<title>Canvas Pinball flippers by stirfry</title>
<script type="application/x-javascript">
/*THIS SCRIPT ADAPTED BY STIRFRY. SOURCE TEETHGRINDER no warranty or liability implied or otherwise. use at your own risk. No credit required. Enjoy.stirfry.thank(you)*/
var img = new Image();
//img.src = "flipper.gif";//right
img.src="http://i39.tinypic.com/k1vq0x.gif"
var img2 = new Image();
//img2.src = "flipper2.gif";//left
img2.src ="http://i42.tinypic.com/14c8wht.gif"
var gAngle = 0;
gAngle = 60;
stop = false;
inertia = .8;
vel = 10;
k = 0.1;
function drawagain()
gAngle = 60;
stop = false;
inertia = .8;
vel = 10;
k = 0.1;
draw()
function draw()
var ctx = document.getElementById('canvas').getContext('2d');
ctx.save();
vel = ( vel * inertia ) + ( -gAngle * k );
gAngle += vel;
ctx.fillStyle = 'rgb(255,255,255)';
ctx.fillRect (0, 0, 600, 600);
ctx.translate(380, 480); //location of the system
ctx.rotate( gAngle * Math.PI / 180 );//rotate first then draw the flipper
ctx.drawImage(img, -105, -16);
ctx.restore();
ctx.save();
ctx.translate(120, 480); //location of the system
ctx.rotate( -1*gAngle * Math.PI / 180 );//rotate first then draw the flipper
ctx.drawImage(img2, -18, -16);
ctx.restore();
if( !stop )
setTimeout(draw, 30);
</script>
<style type="text/css">
body margin: 20px; font-family: arial,verdana,helvetica; background: #fff;
h1 font-size: 140%; font-weight:normal; color: #036; border-bottom: 1px solid #ccc;
canvas border: 2px solid #000; float: left; margin-right: 20px; margin-bottom: 20px;
pre float:left; display:block; background: rgb(238,238,238); border: 1px dashed #666; padding: 15px 20px; margin: 0 0 10px 0;
.gameLayer position: absolute; top: 0px; left: 0px;
#scoreLayer font-family: arial; color: #FF0000; left: 10px; font-size: 70%;
#windowcontainer position:relative; height:300px;
</style>
</head>
<body onload="draw()">
<div id="windowcontainer">
<canvas id="canvas" ></canvas>
<INPUT VALUE="flip" TYPE=BUTTON onClick="drawagain();"><br/>
</div>
</body>
</html>
【讨论】：
以上是关于画布从底部中心图像角度旋转？的主要内容，如果未能解决你的问题，请参考以下文章