stackoom
  简体   繁体   中英

How can I randomize coordinates in javascript canvas?

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

Question

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.

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 answers

solution1
 1 ACCPTED  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

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

solution2
 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();
}

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question In Canvas via JavaScript, How can I get the coordinates of an object and then move that object to a different coordinate? 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) 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? How to get x and y coordinates in Javascript on a canvas How can I randomize the order of two sets of elements in jquery/javascript, so that they remain in sync with each order? How to convert from mouse coordinates to world coordinates in a Javascript canvas game? How can I randomize a single value in JavaScript object using Node.js
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM