使用html5 canvas和javascript的奇怪行为

时间:2014-03-06 20:22:21

标签: javascript html html5 canvas

我制作了一些画布,我画了一个圆圈和许多其他形状。我已经创建了一个_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

2 个答案:

答案 0 :(得分:1)

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

  • 为每个笔画/填充执行beginPath()。
  • 在弧上执行closePath(),使其成为圆形,而不是360度圆弧。
  • 确保在执行.rotate
  • 之前使用.translate设置旋转点
  • stvorec(Math.random())仅产生0-1度的角度。

不是故障,而只是命名奇怪:你调用了你的上下文变量canvas。上下文变量通常称为contextctx

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

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)将矩形置于旋转点的中心。

答案 1 :(得分:0)

这是一个简单的修复:

//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

(此处严格不需要保存/恢复)。