相关疑难解决方法(0)

围绕任意点旋转:HTML5 Canvas

来看看惊人的消失的矩形!

但严重的是我有一个非常简单的HTML5画布,它只绘制一个矩形(出于某种原因使用lineTo而不是rect ).

我的问题:我试图将矩形旋转90度.矩形应旋转90度,但它会消失.

在我的webapp项目中,当我在HTML5画布中旋转我的复杂多边形时,我得到了奇怪的x,y放置错误,所以我创建了这个简单的HTML来测试旋转并确保它围绕x,y点100,100旋转.但是当我试图旋转一个形状时,即使这样也有奇怪的结果.

任何人都可以告诉我如何让我的矩形可见以及我如何围绕特定点旋转我的多边形而不会完全改变x,y值.

有没有人用HTML5 canvas遇到过这个问题'并知道解决这个问题的解决方案?

<canvas id="testCanvas" width="900px" height="900px" style="background-color: blue;">

</canvas>
<script type="text/javascript">

    var canvas = document.getElementById("testCanvas");
    var dc     = canvas.getContext("2d");

    dc.clearRect(0, 0, canvas.width, canvas.height);

    dc.save();
    dc.fillStyle = "#FF0000";

    dc.rotate( 90*Math.PI/180 );  // rotate 90 degrees
    dc.beginPath();
    dc.moveTo(100, 100);
    dc.lineTo(200, 100);
    dc.lineTo(200,300);
    dc.lineTo(100,300);
    dc.closePath();
    dc.fill();

    dc.restore();
-->
</script>
Run Code Online (Sandbox Code Playgroud)

html javascript html5 canvas

14
推荐指数
2
解决办法
2万
查看次数

标签 统计

canvas ×1

html ×1

html5 ×1

javascript ×1