Using Canvas via JavaScript, how can I draw a picture X number of times and within Y parameters?

Question

I'm trying to draw a smiley face number of times, and then the smiley face are radius from the center of the canvas. 次，然后笑脸距画布中心半径。 I also want to add a function where it allows the drawing to stay within the canvas, not outside as well as two functions to allow maximum number of smiley face in the circle and the maximum radius it can go up to. Eventually, I want my final product to end up looking something like this: https://imgur.com/VvDcFXq . I am new to Canvas and any help is greatly appreciated

 <!DOCTYPE> <html lang="en"> <meta charset="UTF-8"> <head> <title>CPSC 1045 Assignment 7 - Smiley Rotator</title> </head> <body> <h1>CPSC 1045 Assignment 7 - Simley Rotator</h1> <p>Enter a number of smiles to draw<input type="number" min="0" max="9" id="NumberofSmiles"></p> <p>Enter how far from the center of the canvas to draw them<input type="number" min="0" max="151" id="radius"></p> <button id="draw">Draw</button><br> <canvas id="myCanvas" height="400" width="400" style="border: 1px solid black"> <script> let c, ctx, pos, centerX, centerY, radius, eyeRadius, eyeXOffset, eyeYOffset document.getElementById("draw").onclick = checkNumber; document.getElementById("draw").onclick = checkRadius; function placement() { c = document.getElementById("myCanvas"); ctx = c.getContext("2d"); centerX = c.width / 2; centerY = c.height / 2; radius = 70; eyeRadius = 10; eyeXOffset = 25; eyeYOffset = 20; reset(); } function drawFace(){ // Draw the yellow circle ctx.beginPath(); ctx.arc(centerX + pos.left, centerY + pos.top, radius, 0, 2 * Math.PI, false); ctx.fillStyle = 'yellow'; ctx.fill(); ctx.lineWidth = 5; ctx.strokeStyle = 'black'; ctx.stroke(); ctx.closePath(); } function drawEyes(){ // Draw the eyes let eyeX = centerX + pos.left - eyeXOffset; let eyeY = centerY + pos.top - eyeYOffset; ctx.beginPath(); ctx.arc(eyeX, eyeY, eyeRadius, 0, 2 * Math.PI, false); ctx.fillStyle = 'black'; ctx.fill(); ctx.closePath(); ctx.beginPath(); eyeX = centerX + pos.left + eyeXOffset; ctx.arc(eyeX, eyeY, eyeRadius, 0, 2 * Math.PI, false); ctx.fillStyle = 'black'; ctx.fill(); ctx.closePath(); } function drawMouth(){ // Draw the mouth ctx.beginPath(); ctx.arc(centerX + pos.left, centerY + pos.top, 50, 0, Math.PI, false); ctx.stroke(); ctx.closePath(); } function draw(x,y) { clear(); drawFace(); drawEyes(); drawMouth(); } function clear() { ctx.clearRect(0, 0, c.width, c.height); } function checkNumber() { var input = document.getElementById("NumberofSmiles").value; if (input > 9) { alert("You have enter an invalid number"); } } function checkRadius() { var inputs = document.getElementById("radius").value; if (inputs > 150) { alert("You have entered an invalid radius"); } } function checkmyvalue() { checkRadius(); checkNumber(); } </script> </body> </html>

Answer 1

I've tried to save as much as I could from your code. Since you want to rotate the smileys I draw them around the origin of the canvas and then I translate to the position and rotate the context:

  ctx.translate(pos.left,pos.top)
  ctx.rotate(Angle);

Another change I've made: I've changed the radius of the smiley because I thought it was too big but you can change it back at what you want. Everything else will scale proportionally.

I hope this is what you need.

 const c = document.getElementById("myCanvas"); const ctx = c.getContext("2d"); let center = {}; center.x = c.width / 2; center.y = c.height / 2; let face_radius = 30; let eyeRadius = face_radius / 7; let mouth_radius = face_radius * 0.7; let eyeXOffset = face_radius * 0.36; let eyeYOffset = face_radius * 0.28; function drawFace() { // Draw the yellow circle ctx.beginPath(); ctx.arc(0, 0, face_radius, 0, 2 * Math.PI, false); ctx.fillStyle = "yellow"; ctx.fill(); ctx.lineWidth = 5; ctx.strokeStyle = "black"; ctx.stroke(); ctx.closePath(); } function drawEyes() { // Draw the eyes let eyeX = - eyeXOffset; let eyeY = - eyeYOffset; ctx.beginPath(); ctx.arc(eyeX, eyeY, eyeRadius, 0, 2 * Math.PI, false); ctx.fillStyle = "black"; ctx.fill(); ctx.closePath(); ctx.beginPath(); eyeX = eyeXOffset; ctx.arc(eyeX, eyeY, eyeRadius, 0, 2 * Math.PI, false); ctx.fillStyle = "black"; ctx.fill(); ctx.closePath(); } function drawMouth() { // Draw the mouth ctx.beginPath(); ctx.arc(0, 0, mouth_radius, 0, Math.PI, false); ctx.stroke(); ctx.closePath(); } function clear() { ctx.clearRect(0, 0, c.width, c.height); } function drawSmiley(pos,Angle) { ctx.save(); ctx.translate(pos.left,pos.top) ctx.rotate(Angle); drawFace(); drawEyes(); drawMouth(); ctx.restore(); } function checkNumber() { let n = parseInt(NumberofSmiles.value); if (n > 0 && n < 9) { return n; } else { alert("You have enter an invalid number"); clear(); } } function checkRadius() { let R = parseInt(_radius.value); let maxR = c.width/2 - face_radius if (R > 0 && R < maxR) { return R; } else { alert("The radius has to be smaller than "+ maxR ); clear(); } } function checkmyvalue() { let R = checkRadius(); let N = checkNumber(); let angle = 2 * Math.PI / N; clear(); for (let i = 0; i < N; i++) { let Angle = angle * i; let pos = {}; pos.left = center.x + R * Math.cos(Angle); pos.top = center.y + R * Math.sin(Angle); drawSmiley(pos,Angle); } } draw.addEventListener("click", checkmyvalue);

 canvas{border:1px solid}

 <h1>CPSC 1045 Assignment 7 - Simley Rotator</h1> <p>Enter a number of smiles to draw<input type="number" min="0" max="9" id="NumberofSmiles"></p> <p>Enter how far from the center of the canvas to draw them<input type="number" min="0" max="151" id="_radius"></p> <button id="draw">Draw</button><br> <canvas id="myCanvas" height="400" width="400" style="border: 1px solid black">

Using Canvas via JavaScript, how can I draw a picture X number of times and within Y parameters?

Question

1 answers

solution1
1 ACCPTED 2019-03-07 12:41:03

Using Canvas via JavaScript, how can I draw a picture X number of times and within Y parameters?

Question

1 answers

solution1 1 ACCPTED 2019-03-07 12:41:03

solution1
1 ACCPTED 2019-03-07 12:41:03