简体   繁体   English

在html画布中围绕固定中心旋转弧

[英]rotate arc around fixed center in html canvas

I am trying to rotate arc in canvas on mouse movement, but its not working. 我试图在鼠标移动时在画布上旋转弧,但它不起作用。

here is my code: 这是我的代码:

http://jsfiddle.net/nNffu/ http://jsfiddle.net/nNffu/

        var c=document.getElementById("c");
        var ctx=c.getContext('2d');
        c.width=window.innerWidth;
        c.height=window.innerHeight;

        var width=c.width;
        var height=c.height;

        draw();

        function draw(){
            var cx=width/2;
            var cy=height/2;

            ctx.beginPath();
            ctx.strokeStyle="#fff";
            ctx.arc(cx,cy,100,0,Math.PI);
            ctx.stroke();

        }

        document.addEventListener("mousemove",function(e){

            var p1=(width/2)-e.clientX;
            var p2=(height/2)-e.clientY;
            var angle=Math.atan2(p2, p1);
            ctx.clearRect(0,0,width,height);
            ctx.beginPath();
            ctx.strokeStyle="#fff";
            ctx.arc(width/2,height/2,100,0,Math.PI);
            // ctx.translate(width/2,height/2);
            ctx.rotate(angle);
            //ctx.translate(0,0);
            ctx.stroke();
           // ctx.restore();
        },false);

It didnt worked. 它没有用。 later i want to add more objects but they should not rotate only this semicircle should be in ratation as per mouse movements. 后来我想添加更多的对象,但是它们不应该只旋转这个半圆应该按照鼠标移动进行调整。 i tried other examples with translation which i have commented because it's not working. 我尝试了其他翻译的例子我已经评论过,因为它不起作用。 how can i fix my code to do so? 我该如何修复我的代码呢?

Do you want a half-circle that rotates in relation to the mouse? 你想要一个相对于鼠标旋转的半圆吗?

Here is code and a Fiddle: http://jsfiddle.net/m1erickson/jJTsH/ 这是代码和小提琴: http//jsfiddle.net/m1erickson/jJTsH/

<!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 canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    var canvasOffset=$("#canvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;
    ctx.lineWidth=3;
    ctx.strokeStyle="blue";

    var cx=canvas.width/2;
    var cy=canvas.height/2;
    var radius=75;


    function drawArc(cx,cy,mouseX,mouseY){

        var dx=mouseX-cx;
        var dy=mouseY-cy;
        var angle=Math.atan2(dy,dx);
        ctx.clearRect(0,0,canvas.width,canvas.height);
        ctx.beginPath();
        ctx.arc(cx,cy,radius,angle,angle+Math.PI);
        ctx.stroke();

    }

    function handleMouseMove(e){
      mouseX=parseInt(e.clientX-offsetX);
      mouseY=parseInt(e.clientY-offsetY);
      drawArc(cx,cy,mouseX,mouseY);
    }

    $("#canvas").mousemove(function(e){handleMouseMove(e);});


}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM