时间戳

首页 > 解决方案 > 如何在javascript画布中随机化坐标？

javascript - 如何在javascript画布中随机化坐标？

问题描述

新手，目前正在学习如何编码。我的老师让我通过自己制作笑脸来证明自己在画布上的任务。 这是迄今为止的结果。

现在他给了我随机坐标的任务，这样笑脸作为一个整体每次都会出现在一个新的地方（无论是在加载时发生还是通过按钮发生都是我的决定）。

编辑：澄清一下，我的问题更多在于改变画布坐标背后的逻辑。我试图弄清楚如何做到这一点，并且知道我需要这样做Math.random。

编辑：澄清一下，我的问题更多在于背后的逻辑

我的代码：

<body onload="draw();">
    <canvas id="canvas" width="150" height="150"></canvas>

    <script type="application/javascript">
        function draw() {
            var canvas = document.getElementById("canvas");
            var smiley = canvas.getContext("2d");

                //Face shape
                smiley.beginPath();
                smiley.arc(75, 75, 50, 0, Math.PI * 2, true);

                //Right eye
                smiley.moveTo(65,55);
                smiley.arc(55,55,10,0, Math.PI * 2, true); 

                //Left eye
                smiley.moveTo(105,55);
                smiley.arc(95,55,10,0, Math.PI * 2, true); 

                //Mouth
                smiley.moveTo(35,75);
                smiley.arc(75, 75, 40, 0, Math.PI, false); 
                smiley.moveTo(36,81);
                smiley.lineTo(114,81);
                smiley.stroke();

                //Pupils
                smiley.beginPath(58,55);
                smiley.moveTo(58,55);
                smiley.arc(55,55,3,0, Math.PI*2,true);
                smiley.moveTo(98,55);
                smiley.arc(95,55,3,0, Math.PI*2, true);
                smiley.fill()

                //Hair
                smiley.beginPath(75,25);
                smiley.moveTo(75,25);
                smiley.lineTo(75,5);
                smiley.moveTo(79,5);
                smiley.lineTo(78,25);
                smiley.moveTo(72,25);
                smiley.lineTo(71,5);
                smiley.stroke();

                //Nose
                smiley.beginPath();
                smiley.moveTo(73,50);
                smiley.lineTo(67,67);
                smiley.lineTo(80,70);
                smiley.stroke();

                smiley.beginPath()
                smiley.moveTo(73,50);
                smiley.lineTo(63,69);
                smiley.lineTo(80,70);
                smiley.lineTo(67,67);
                smiley.lineTo(73,50);
                smiley.fill();
                smiley.endPath();
            }

    </script>
</body>

谢谢您的帮助。

标签： javascriptcanvas

解决方案

您好，您需要使用 Math.random() 给出一个介于 0 和 1 之间的数字。但是您需要介于 50 和 canvasWidth-50 之间的范围我扩展了画布宽度以更多地展示随机性 

<body onload="draw();">
    <canvas id="canvas" width="450px" height="450px"></canvas>

    <script type="application/javascript">
        function draw() {
        var canvas=document.getElementById("canvas");
        var x=Math.random()*(canvas.width-100)-25; //smiley's width 100 and your initial value was +75 it needed to be 100/2=50
        var y=Math.random()*(canvas.height-100)-25; //smiley's height 100 and your initial value was +75 it needed to be 100/2=50
            var canvas = document.getElementById("canvas");
            var smiley = canvas.getContext("2d");

                //Face shape
                smiley.beginPath();
                smiley.arc(75+x, 75+y, 50, 0, Math.PI * 2, true);

                //Right eye
                smiley.moveTo(65+x,55+y);
                smiley.arc(55+x,55+y,10,0, Math.PI * 2, true); 

                //Left eye
                smiley.moveTo(105+x,55+y);
                smiley.arc(95+x,55+y,10,0, Math.PI * 2, true); 

                //Mouth
                smiley.moveTo(35+x,75+y);
                smiley.arc(75+x, 75+y, 40, 0, Math.PI, false); 
                smiley.moveTo(36+x,81+y);
                smiley.lineTo(114+x,81+y);
                smiley.stroke();

                //Pupils
                smiley.beginPath(58+x,55+y);
                smiley.moveTo(58+x,55+y);
                smiley.arc(55+x,55+y,3,0, Math.PI*2,true);
                smiley.moveTo(98+x,55+y);
                smiley.arc(95+x,55+y,3,0, Math.PI*2, true);
                smiley.fill()

                //Hair
                smiley.beginPath(75+x,25+y);
                smiley.moveTo(75+x,25+y);
                smiley.lineTo(75+x,5+y);
                smiley.moveTo(79+x,5+y);
                smiley.lineTo(78+x,25+y);
                smiley.moveTo(72+x,25+y);
                smiley.lineTo(71+x,5+y);
                smiley.stroke();

                //Nose
                smiley.beginPath();
                smiley.moveTo(73+x,50+y);
                smiley.lineTo(67+x,67+y);
                smiley.lineTo(80+x,70+y);
                smiley.stroke();

                smiley.moveTo(73+x,50+y);
                smiley.lineTo(63+x,69+y);
                smiley.lineTo(80+x,70+y);
                smiley.lineTo(67+x,67+y);
                smiley.lineTo(73+x,50+y);
                smiley.fill();
            }

    </script>
</body>

推荐阅读