html 캔버스, mousedown으로 중심 주위에 캔버스 회전

이것이 중복되는 경우 매우 유감스럽게 생각합니다. 요청을 마치고, 대답을 먼저 한 후 .. 내 머리가 내 머리카락에서 ..html 캔버스, mousedown으로 중심 주위에 캔버스 회전

왜 아무것도 아닌가? 제발 새로운 .html 캔버스와 .js 도와주세요.

<!DOCTYPE html> 
<html> 
<body> 
<canvas id="r" width="300" height="150" style="border:solid></canvas> 

<script> 
var ctx=document.getElementById("r").getContext("2d"); 

ctx.beginPath(); 
ctx.fillRect(50,20,100,50); 

function roc(){//rotate on click 
ctx.translate(r.width/2,r.height/2); 
ctx.rotate(20*Math.PI/180); 
}r.addEventListener("mousedown",roc) 

</script> 
</body> 
</html>

출처

2014-05-01 user3591486

코드에서 결함의 몇 가지 : 당신이 (CTX)하지만 당신은 또한 캔버스 (R)에 대한 참조를 필요

컨텍스트에 대한 참조가

기존 사각형은 이동하거나 회전 할 수 없습니다 (캔버스에 그려진 픽셀 일뿐입니다)
이동/회전하려면 캔버스를 지우고 직사각형을 새 썩음에 다시 그려야합니다 ATION
다음

코드와 데모 주석 것 : http://jsfiddle.net/m1erickson/GMtPT/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
<style> 
    body{ background-color: ivory; } 
    canvas{border:1px solid red;} 
</style> 
<script> 
$(function(){ 

    // get reference variables to both the canvas and the canvas-context 
    var canvas=document.getElementById("r"); 
    var ctx=canvas.getContext("2d"); 

    // this determines how much the canvas is rotated 
    var rotation=0; 

    // call roc to draw the rectangle the first time 
    roc(); 

    function roc(){ 
     // clear the canvas in preparation for new drawings 
     // NOTE: you can't move/rotate existing drawings! 
     ctx.clearRect(0,0,canvas.width,canvas.height); 

     // save the context in its untranslated unrotated state 
     ctx.save(); 

     // translate to center canvas 
     // (this means the origin [0,0] will be at center canvas 
     ctx.translate(r.width/2,r.height/2); 

     // increase the rotation by 20 more degrees 
     rotation+=20*Math.PI/180; 

     // rotate the canvas by 20 degrees 
     ctx.rotate(rotation); 

     // draw a rectangle 
     // the rectangle will be rotated by [rotation] degrees 
     // Note: [0,0] is center canvas so we fillRect with x,y offset by 1/2 width & height 
     // because fillRect positions the top-left part of the rectangle at x,y 
     var rectWidth=100; 
     var rectHeight=50; 
     ctx.fillRect(-rectWidth/2,-rectHeight/2,rectWidth,rectHeight); 

     // restore the context to its unrotated state 
     ctx.restore(); 
    } 


    // listen for mousedown and call roc 
    r.addEventListener("mousedown",roc) 


}); // end $(function(){}); 
</script> 
</head> 
<body> 
    <canvas id="r" width=300 height=300></canvas> 
</body> 
</html>

출처

2014-05-01 03:27:10 markE

당신의 ... 당신이 이런 일을 할 필요가 클릭 한 번으로 화면 떨어져 당신의 기원을 복용 번역 ...을 통지 매번 원본을 재설정 할 ctx.save() 및 ctx.restore().

function roc(){//rotate on click 
    ctx.clearRect(0,0,r.width,r.height); 
    ctx.save(); 
    ctx.translate(r.width/2,r.height/2); 
    rotate+=10; 
    ctx.rotate(rotate*Math.PI/180); 
    ctx.fillRect(-50,-25,100,50); 
    ctx.restore(); 
} 
roc(); 
r.addEventListener("mousedown",roc)

http://jsfiddle.net/K8UCc/

출처

2014-05-01 03:29:33 ericjbasti

html 캔버스, mousedown으로 중심 주위에 캔버스 회전

답변

관련 문제