Question

我一直试图找到一种方法来渲染如何用画布制作一把可以指向光标所在位置的枪的结果。我对我应该做的事情有一个基本的想法：

<!doctype html>
<html>
    <head>
        <title>Block Shooter</title>
    </head>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <body>
        <center>
            <div id="introContainer"><h1 id="intro">Welcome to Block Shooter</h1></div>
            <button id="skip" style="position: absolute; bottom: 50px; left:610px">Skip Intro</button>
            <canvas id="canvas" width="1200" height="600" style="border: 1px solid black;"></canvas>
            <script>

            // Variables

            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");
            var gunWidth = 80;
            var gunLength = 150;

            $("#canvas").mousemove(function (event) {
                ctx.clearRect(0, 0, canvas.width, canvas.height)
                ctx.beginPath();
                ctx.lineWidth = gunWidth;
                ctx.strokeStyle = "black";
                ctx.moveTo(canvas.width / 2 - gunWidth / 2, canvas.height + 100);
                ctx.lineTo(event.offsetX, event.offsetY);
                ctx.stroke();
                ctx.closePath();

                ctx.beginPath();
                ctx.lineWidth = gunWidth;
                ctx.strokeStyle = "white";
                ctx.moveTo(event.offsetX, event.offsetY);
                ctx.lineTo(canvas.width / 2 - gunWidth / 2, canvas.height - gunLength);
                ctx.stroke();
                ctx.closePath();

            })

            </script>
        </center>
    </body>

</html>

我不知道接下来该做什么。有没有更好的方法呢？如果是，请提供一个例子。谢谢！

Answer 1

不幸的是，交互式图形编程很快就会进入数学...... 替换$（＃canvas）.mousemove中的内容（具有以下

的功能）

           ctx.clearRect(0, 0, canvas.width, canvas.height)
            ctx.beginPath();
            ctx.lineWidth = gunWidth;
            ctx.strokeStyle = "black";
            //get dimensions of canvas
           //for performance this should be moved out of the
            //mousemove and up to where your other global variables canvas and ctx are. 
            var dimensions=event.target.getBoundingClientRect();
            var middle=dimensions.left+(dimensions.width/2)
            ctx.moveTo(middle,0);
            //get mousex relative to canvas
            var mousex=event.clientX-dimensions.left;
            //get mousey relative to canvas 
            var mousey=event.clientY-dimensions.top;
            var ydistance=mousey;
            var xdistance=mousex-middle
            //distance formula 
            var distance=Math.sqrt((xdistance*xdistance)+(ydistance*ydistance))
            //http://math.stackexchange.com/questions/175896/finding-a-point-along-a-line-a-certain-distance-away-from-another-point
            var gunlength=200;
            var drawx=(gunlength*(xdistance/distance))+middle
            var drawy=gunlength*(ydistance/distance)

            ctx.lineTo(drawx, drawy);


            ctx.stroke();
            ctx.closePath();

这将使枪保持相同的大小.... 您将更改一些东西以使枪回到画布的底部（HTML画布具有反转的y轴，我没有在演示中考虑到这一点）

使用帆布创造一个可指向的第一人称射击枪

1 个答案: