[英]In Canvas via JavaScript, How can I get the coordinates of an object and then move that object to a different coordinate?
[英]How can I randomize coordinates in javascript canvas?
这里的新手,目前正在学习如何编码。 我的老师给我的任务是通过自己制作笑脸来证明自己在画布上。 这是迄今为止的结果。
现在他给了我随机坐标的任务,这样整个笑脸每次都会出现在一个新的地方(无论是在加载时发生还是通过按钮发生是我的决定)。
编辑:澄清一下,我的问题更多地在于改变画布坐标背后的逻辑。 我试图弄清楚如何做到这一点,并且知道为此我需要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>
感谢您的帮助。
你好,你需要使用 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>
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.