html 画布，仅使用鼠标按下围绕中心旋转画布

Question

Sorry if this is duplication very obviously.对不起，如果这是很明显的重复。 Requesting, flag after answer first.. I have my hair out of my head..请求，先回答后标记..我的头发从头上掉下来..

Why is nothing all here?为什么这里什么都没有？ Please help the new to .html canvas and .js.请帮助新的 .html canvas 和 .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>

Answer 1

A couple of glitches in your code:您的代码中有几个小故障：

you have a reference to the context (ctx) but you also need a reference to the canvas (r)您有对上下文 (ctx) 的引用，但您还需要对画布 (r) 的引用
existing rectangles cannot be moved or rotated (they are just pixels painted on the canvas)现有的矩形不能移动或旋转（它们只是画在画布上的像素）
to move/rotate, you should erase the canvas and redraw the rect in its new rotation要移动/旋转，您应该擦除画布并在新的旋转中重新绘制矩形

Here's annotated code and a Demo: http://jsfiddle.net/m1erickson/GMtPT/这是带注释的代码和演示： 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>

Answer 2

Your translate is taking your origin off the screen in one click... you need to do something like this... notice the ctx.save() and ctx.restore() that will reset your origin each time.您的翻译一键将您的原点从屏幕上移开...您需要做这样的事情...注意 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/ http://jsfiddle.net/K8UCc/

html 画布，仅使用鼠标按下围绕中心旋转画布

问题描述

2 个解决方案

解决方案1
2 2014-05-01 03:27:10

解决方案2
0 2014-05-01 03:29:33

html 画布，仅使用鼠标按下围绕中心旋转画布

问题描述

2 个解决方案

解决方案1 2 2014-05-01 03:27:10

解决方案2 0 2014-05-01 03:29:33

解决方案1
2 2014-05-01 03:27:10

解决方案2
0 2014-05-01 03:29:33