캔버스는 하단 중앙 이미지 각도에서 회전합니까?
-
21-08-2019 - |
문제
하단 중심 각도에서 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;" width="800" height="800"></canvas>
</body>
</html>
불행히도 이것은 이미지의 상단 왼쪽 각도에서 회전하는 것 같습니다. 아이디어가 있습니까?
편집 : 결국 물체 (우주선)는 마치 마치 마치 오른쪽/왼쪽으로 돌아가는 것처럼 시계 포인터처럼 회전해야합니다.
해결책
먼저 회전하려는 지점으로 번역해야합니다. 이 경우 이미지 치수는 64 x 120입니다. 하단 중심 주위에서 회전하려면 32, 120으로 번역하려고합니다.
ctx.translate(32, 120);
그것은 당신을 이미지의 맨 아래 중앙으로 데려옵니다. 그런 다음 캔버스를 회전시킵니다.
ctx.rotate(90 * Math.PI/180);
90도 회전합니다.
그런 다음 이미지를 그리면 다음을 시도하십시오.
ctx.drawImage(img, -32, -120, 64, 120);
? 그게 작동합니까?
다른 팁
물론 정답은 Vincent의 것입니다.
나는이 회전/번역으로 조금 뒤섞였으며, 내 작은 실험은 흥미로울 수 있다고 생각합니다.
<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;" width="800" height="800"></canvas>
</body>
</html>
내 걸림돌은 회전 된 축을 따라 있기 때문에 회전 된 그림을 배치하는 것이 어렵다는 것이 었습니다. 원시 원점에서 페인트하기 위해 트리고 수학을해야하거나 보조 숨겨진 캔버스를 그린 다음 페인트해야합니다. 목표 하나.
다른 사람이 더 나은 아이디어가 없다면?
지정된 지점 (중앙)에서 시작한 텍스트를 회전시켜야 할 때 이것을 사용했습니다.
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();
<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" width="500" height="500"></canvas>
<INPUT VALUE="flip" TYPE=BUTTON onClick="drawagain();"><br/>
</div>
</body>
</html>
제휴하지 않습니다 StackOverflow