Используя Canvas через JavaScript, как я могу нарисовать картинку X раз и в пределах Y параметров? - PullRequest
Новая
       1

Используя Canvas через JavaScript, как я могу нарисовать картинку X раз и в пределах Y параметров?

0 голосов
/ 07 марта 2019

Я пытаюсь нарисовать смайлик X количество раз, а затем смайлик * Y находится в радиусе от центра холста. Я также хочу добавить функцию, позволяющую рисованию оставаться внутри холста, а не снаружи, а также две функции, позволяющие получить максимальное количество смайликов в круге и максимальный радиус, на который он может подняться. В конце концов, я хочу, чтобы мой конечный продукт выглядел примерно так: https://imgur.com/VvDcFXq. Я новичок в Canvas, и любая помощь очень ценится 

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

1 Ответ

1 голос
/ 07 марта 2019

Я пытался спасти как можно больше из вашего кода.Поскольку вы хотите вращать смайлики, я рисую их вокруг начала холста, а затем перевожу в положение и вращаю контекст: 

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

Еще одно изменение, которое я сделал: я изменил радиуссмайлика, потому что я думал, что он слишком большой, но вы можете изменить его обратно на то, что вы хотите.Все остальное будет пропорционально масштабироваться.

Надеюсь, это то, что вам нужно. 

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">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...