Question

我试图绘制一个 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>

Answer 1

我已经尽力从您的代码中节省了很多。由于您要旋转笑脸，因此我将其围绕画布的原点绘制，然后平移到该位置并旋转上下文：

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

通过JavaScript使用Canvas，如何在Y参数内绘制X次图片？

1 个答案: