Блог

Главная - Вопросы по программированию - Как мне повторить рисунок на холсте?

Как мне повторить рисунок на холсте?

#javascript #loops #canvas

#javascript #циклы #холст

Вопрос:

Мне нужно сделать несколько повторений, но я не совсем уверен, как это сделать, когда пользователь нажимает кнопку «Часть первая», он должен отображать рисунок свиньи каждые 100 пикселей вправо, а когда пользователь нажимает на вторую часть, он должен отображать круг свиней в центре холста, ноон должен удалить функцию, выполненную в первой части. кто-нибудь может мне помочь, пожалуйста?

 "use strict";
let ctx;


function setup() {
    let canvas = document.getElementById("myCanvas");
    ctx = canvas.getContext("2d");  

  drawPig();
}

function drawPig() {
ctx.fillStyle = "pink"
  ctx.beginPath();
    ctx.arc(25, 40, 15, 0, 2 * Math.PI);
    ctx.fill();
  ctx.beginPath();
    ctx.arc(40, 25, 10, 0, 2 * Math.PI);
    ctx.fill();
  ctx.fillRect(45, 20, 10, 10);
  ctx.fillStyle = "black"
    ctx.beginPath();
    ctx.arc(42, 18, 1.5, 0, 2 * Math.PI); 
    ctx.fill();
  ctx.beginPath();
  ctx.moveTo(35, 50);
  ctx.lineTo(50, 60);
  ctx.moveTo(35, 50);
  ctx.lineTo(35, 62);
  ctx.moveTo(15, 50);
  ctx.lineTo(5, 60);
  ctx.moveTo(15, 50);
  ctx.lineTo(15, 60);
  ctx.stroke(); 
} 
 <!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>Repetitions</title>
   <script src="javascript.js" type="text/javascript"></script>
</head>
<body onload="setup()">
    <h1>Repeat</h1>
    <canvas id="myCanvas" height="500" width="500" style="border: 1px solid black"></canvas>
    <br>
    <button onclick="firstPart"> First Part</button>
    <button onclick="secondPart">Second Part</button>
</body>
</html>

Ответ №1:

Вы можете использовать CanvasRenderingContext2D.translate:

 for (int i=0; i<ctx.canvas.width; i =100){
    for (int j=0; j=ctx.canvas.height; j =100){
        ctx.translate(i,j);
        drawPig();
        ctx.translate(-i,-j);
    }
}

Это будет рисовать свинью каждые 100 пикселей. Вы могли бы использовать аналогичную функцию, чтобы нарисовать что-то еще.

Что касается очистки холста, вы можете использовать ctx.clearRect(clearRect(0, 0, canvas.width, canvas.height); , чтобы установить для всех пикселей значение 0 альфа-черный. Вы также можете использовать эту функцию для очистки только части холста, если хотите.