Javascript рисунок слушателя windowaddevent, как поставить 10 яблок рядом друг с другом с помощью for l oop и if - PullRequest
Новая
       65

Javascript рисунок слушателя windowaddevent, как поставить 10 яблок рядом друг с другом с помощью for l oop и if

0 голосов
/ 20 июня 2020

Я стараюсь получить 3 яблока по диагонали и 7 нормально по прямой, а последние три яблока другого цвета. ИДК как получить. У меня есть следующий код на следующем сайте: https://85377.ict-lab.nl/KDFRONT1/Javascript_advanced/opdracht101.html Я хочу for l oop и дополнительный оператор if, чтобы снова не писать 9 яблок, что требует много времени.

Мне не удалось вставить изображение, поэтому я вставил его под страницу по ссылке выше. 

window.addEventListener("load", function() {
    var canvas2 = document.getElementById("canvasje2");
    var ctx = canvas2.getContext("2d");

    for (var i = 0; i < 10; i++){

    //Rondje_groot
    ctx.beginPath();
    ctx.strokeStyle="darkred";
    ctx.fillStyle="red";
    ctx.arc(100, 100, 50, 0, 2 * Math.PI);
    ctx.stroke();
    ctx.fill();
    ctx.closePath();

    //Rondje_klein
    ctx.beginPath();
    ctx.fillStyle="white";
    ctx.arc(82, 79, 3, 0, 2 * Math.PI);
    ctx.fill();
    ctx.closePath();

    //Steeltje
    ctx.beginPath()
    ctx.strokeStyle="darkbrown";
    ctx.fillStyle="brown";
    ctx.rect(92, 2, 12.5, 50);
    ctx.stroke();
    ctx.fill();
    ctx.closePath();

    //Bochtje1
    ctx.beginPath();
    ctx.strokeStyle="darkgreen";
    ctx.fillStyle="green";
    ctx.moveTo(92, 2);
    ctx.quadraticCurveTo(-80,110,92,45);
    ctx.stroke();
    ctx.fill();
    ctx.closePath();

    //Bochtje2
    ctx.beginPath();
    ctx.strokeStyle="green";
    ctx.fillStyle="darkgreen";
    ctx.moveTo(104.5, 2);
    ctx.quadraticCurveTo(260,110,104.5,45);
    ctx.stroke();
    ctx.fill();
    ctx.closePath();

    }
});

function Sluiten6() {
    window.close();
}
<!DOCTYPE html>
<html lang="nl">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>opdracht101 85377</title>
        <link rel="stylesheet" type="text/css">
        <style>
            #canvasje2{
                background-image: linear-gradient(-90deg, #000000, #0F2DD7, #000000);
            }
        </style>
    </head>
    <body>
        <script src="opdracht101.js"></script>
        <canvas id="canvasje2" width="900" height="900"></canvas><br/>

        <a href="index.html" onclick="Sluiten6()">Home</a>
        <a href="opdracht71a.html">opdracht71a</a>
        <a href="opdracht71b.html">opdracht71b</a>
        <a href="opdracht72.html">opdracht72</a>
        <a href="opdracht8.html">opdracht8</a>
        <a href="opdracht91.html">opdracht91</a>
    </body>
</html>
<!--width="56.25em" height="56.25em"-->
...