Question

抱歉，如果这很复杂很明显。请求，先回答后的标志..我的头发是我的头发..

为什么这里什么都没有？请帮助新的.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>

Answer 1

代码中的一些小问题：

您有对上下文（ctx）的引用，但您还需要对画布的引用（r）
现有的矩形无法移动或旋转（它们只是在画布上绘制的像素）
要移动/旋转，您应该擦除画布并在其新旋转中重绘矩形

这是带注释的代码和演示：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

你的翻译只需点击一下即可将你的起源从屏幕上移开......你需要做这样的事情......注意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/

html画布，仅使用mousedown在中心周围旋转画布

2 个答案: