堆栈内存溢出
  简体   繁体   English

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

[英]How can I randomize coordinates in javascript canvas?

 原文  2020-02-18 07:42:14  4   2    javascript/ canvas

问题描述

Newbie here, currently learning how to code.这里的新手，目前正在学习如何编码。 My teacher gave me the task of proving myself in canvas by making a smiley face on my own.我的老师给我的任务是通过自己制作笑脸来证明自己在画布上。 This is the result so far.这是迄今为止的结果。

Now he gave me the task of randomizing the coordinates, so that the smiley as a whole appears in a new place everytime (whether that happens on load or through a button is my decision).现在他给了我随机坐标的任务，这样整个笑脸每次都会出现在一个新的地方（无论是在加载时发生还是通过按钮发生是我的决定）。

Edit: to clarify, my problem lies more within the logic behind altering the coordinates of my canvas.编辑：澄清一下，我的问题更多地在于改变画布坐标背后的逻辑。 I've tried to figure out how to do this, and know that I'll need Math.random for that.我试图弄清楚如何做到这一点，并且知道为此我需要Math.random 。

Edit: to clarify, my problem lies more within the logic behind编辑：澄清一下，我的问题更多地在于背后的逻辑

My code:我的代码：

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

Thank you for your help.感谢您的帮助。

2 个解决方案

解决方案1
 1 已采纳  2020-02-18 08:01:36

Hello you need to use Math.random() which gives a number between 0 and 1. But you need a range between 50 and canvasWidth-50 I expanded canvas width to demonstrate randomness more你好，你需要使用 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>

解决方案2
 0  2020-02-18 08:50:03

function getRandom(from, to) {
  return Math.floor(Math.random() * to) + from
}

function normalise(px, shift) {
  return px - 75 + shift // moving it to 0 and then shifting it to anywhere
}


function draw() {
  var canvas = document.getElementById("canvas");
  var smiley = canvas.getContext("2d");
  const [startx, starty] = [getRandom(75, 100), getRandom(75, 100)];
  console.log(startx, starty);


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

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

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

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

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

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

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

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

暂无
暂无

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

相关问题 在通过 JavaScript 的 Canvas 中，如何获取对象的坐标，然后将该对象移动到不同的坐标？ - In Canvas via JavaScript, How can I get the coordinates of an object and then move that object to a different coordinate? 如何在 JavaScript Canvas 中绘制坐标 - How to draw coordinates in JavaScript Canvas 画布坐标如何转换为瓷砖坐标？ - How can canvas coordinates be converted into tile coordinates? 如何使用矢量作为坐标在画布上绘制对象？ - How can I draw objects on canvas using vectors as coordinates? 如何获得在画布上单击鼠标的“旋转”坐标？ - How can I get the “rotated” coordinates of a mouse-click on a canvas? （Javascript）如何从 4 个可能的变量中选择一个随机变量并使用它们的值（x 和 y 坐标）在 Canvas 上绘制图像？ - (Javascript) How can I pick a random variable out of 4 possible and use their values (x and y coordinates) to draw an image on Canvas? 如何在画布上的Javascript中获取x和y坐标 - How to get x and y coordinates in Javascript on a canvas 如何在jquery / javascript中随机化两组元素的顺序，以便它们与每个订单保持同步？ - How can I randomize the order of two sets of elements in jquery/javascript, so that they remain in sync with each order? 如何在 Javascript canvas 游戏中将鼠标坐标转换为世界坐标？ - How to convert from mouse coordinates to world coordinates in a Javascript canvas game? 如何使用 Node.js 随机化 JavaScript object 中的单个值 - How can I randomize a single value in JavaScript object using Node.js
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM