Question

我制作了一些画布，我画了一个圆圈和许多其他形状。我已经创建了一个_rotate()函数，用于清除（删除内容）画布并调用一个绘制正方形的函数。问题是，点击旋转后不仅绘制了方形，而且绘制了圆形和矩形。我不知道代码可能出现什么问题所以我正在接受任何建议。实际代码：

var c = document.getElementById("canv");
var canvas = c.getContext("2d");
//ciarka
function _rotate() {

canvas.clearRect(0, 0, 600, 400);
stvorec(Math.random());
return;
}


function stvorec(param) {
canvas.rotate(param*Math.PI/180);
canvas.fillStyle="green";
canvas.fillRect(350,50,50,50);
canvas.stroke();
}

function ciarka() {
canvas.beginPath();
canvas.moveTo(10,10);
canvas.lineTo(50,30);
canvas.lineTo(100,10);
canvas.lineTo(150,30);
canvas.lineTo(200,10);
canvas.lineTo(250,30);
canvas.lineTo(300,10);
canvas.lineTo(350,30);
canvas.lineTo(400,10);
canvas.lineTo(450,30);
canvas.lineTo(500,10);
canvas.lineTo(550,30);
canvas.lineTo(590,10);
canvas.stroke();
}


//obdlznik
function obdlznik() {
canvas.rect(150,150,100,50);
canvas.strokeStyle="black";
canvas.stroke();
}

//kruh
function kruh() {
canvas.beginPath();
canvas.arc(200,80,50,0,2.0*Math.PI);
canvas.stroke();
}
//stvorec

stvorec();
ciarka();
kruh();
obdlznik();

$("body").on("click", "#rot", function() {
   _rotate(); 
});

Jsfiddle供参考：jsfiddle

Answer 1

我看到您的代码中出现了一些问题：

为每个笔画/填充执行beginPath（）。
在弧上执行closePath（），使其成为圆形，而不是360度圆弧。
确保在执行.rotate
stvorec（Math.random（））仅产生0-1度的角度。

不是故障，而只是命名奇怪：你调用了你的上下文变量canvas。上下文变量通常称为context或ctx

我不知道您的设计要求，但这里有一些重构的工作代码：

http://jsfiddle.net/m1erickson/5PuW9/

<!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(){

    var c = document.getElementById("canv");
    var canvas = c.getContext("2d");

    //ciarka
    function _rotate() {
        canvas.clearRect(0, 0, 600, 400);
        stvorec(Math.random()*360);
    }

    function stvorec(param) {
        canvas.save();
        canvas.beginPath();
        canvas.translate(350,50);
        canvas.rotate(param*Math.PI/180);
        canvas.fillStyle="green";
        canvas.fillRect(-25,-25,50,50);
        canvas.restore();
    }

    function ciarka() {
        canvas.beginPath();
        canvas.moveTo(10,10);
        canvas.lineTo(50,30);
        canvas.lineTo(100,10);
        canvas.lineTo(150,30);
        canvas.lineTo(200,10);
        canvas.lineTo(250,30);
        canvas.lineTo(300,10);
        canvas.lineTo(350,30);
        canvas.lineTo(400,10);
        canvas.lineTo(450,30);
        canvas.lineTo(500,10);
        canvas.lineTo(550,30);
        canvas.lineTo(590,10);
        canvas.stroke();
    }

    //obdlznik
    function obdlznik() {
        canvas.beginPath();
        canvas.rect(150,150,100,50);
        canvas.strokeStyle="black";
        canvas.stroke();
    }

    //kruh
    function kruh() {
        canvas.beginPath();
        canvas.arc(200,80,50,0,2.0*Math.PI);
        canvas.closePath();
        canvas.stroke();
    }

    //stvorec
    stvorec();
    ciarka();
    kruh();
    obdlznik();

    $("#test").click(function() {
       _rotate(); 
    });

}); // end $(function(){});
</script>
</head>
<body>
    <button id="test">Test</button><br>
    <canvas id="canv" width=600 height=400></canvas>
</body>
</html>

[添加了beginPath和负坐标的说明]

关于context.beginPath（）

将beginPath（）和fill（）/ stroke（）视为上下文路径绘制命令周围所需的括号。

如果不使用每组新的路径绘制命令执行beginPath，则在调用下一个fill（）/ stroke（）时将重新执行所有先前的路径绘制命令。

例如：

// circle#1

context.beginPath();
context.arc(100,100,10,0,Math.PI*2);
context.closePath();
context.fillStyle=”green”;
context.fill();

// circle#2  -- Note: no beginPath here

context.arc(200,200,10,0,Math.PI*2);
context.closePath();
context.fillStyle=”green”;
context.fill();

在此示例中，将绘制圆＃1。但由于第2个圆圈的代码中没有beginPath，因此圆圈＃1将与<2>圆圈一起重绘。

两个圆圈都是绿色的，因为每个beginPath只允许1个样式（将使用最后一个fillStyle =“green”，并且不会使用红色样式）。

关于旋转和负坐标

要旋转，您应该告诉上下文要旋转的坐标点。

这称为设置旋转点。默认情况下，上下文将设置画布左上角的旋转点，以便每个后续绘图将围绕画布的左上角旋转。

要设置自己的旋转点，请执行context.translate（myCenterX，myCenterY）。

然后所有后续的抽奖将围绕myCenterX，myCenterY。

将此视为在一张纸上拿着铅笔点。纸张围绕铅笔点旋转。

现在绘制矩形。

由于上下文从矩形的左上角绘制矩形，因此矩形将围绕其左上角旋转。

要围绕矩形的中心旋转，必须使用负坐标向左上方拉动矩形，直到矩形位于旋转点的中心。

这意味着您必须使用fillRect（-rectWidth / 2，-rectHeight / 2）将矩形置于旋转点的中心。

Answer 2

这是一个简单的修复：

//obdlznik
function obdlznik() {
    canvas.save();
    canvas.beginPath();               // add this and you're good to go!
    canvas.rect(150, 150, 100, 50);
    canvas.strokeStyle = "black";
    canvas.stroke();
    canvas.restore();
}

<强> Modified fiddle here

（此处严格不需要保存/恢复）。

使用html5 canvas和javascript的奇怪行为

2 个答案: