Простая графика не будет отображаться на холсте - PullRequest
Новая
       7

Простая графика не будет отображаться на холсте

0 голосов
/ 24 октября 2019

Изучение HTML5 Я наткнулся на кулинарную книгу для построения графиков и визуализации данных. это первое упражнение, и я не могу показать графику.

Я перепробовал столько вещей, что даже скопировал и вставил исходный код, чтобы посмотреть, сработал ли он, и не получилось D:

вот код: index.html: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <script src="01.01.canvas.js"></script>
    <title>Canvas Example</title>
  </head>
  <body onLoad="init();" style="margin:0px">

    <canvas id="myCanvas"> </canvas>
  </body>
</html>

01.01.canvas.js: 

function init()
{
    updateCanvas();
}

function  updateCanvas()
{
    //rest of the code in the next steps will go in here
    var width = window.innerWidth;
    var myCanvas = document.getElementById("myCanvas");
    myCanvas.width = width;
    myCanvas.height = height;
    var height = 100

    var context = myCanvas.getContext("2d");
        context.fillStyle = "#FCEAB8";
        context.fillRect(0,0,width,height);

    var circleSize=10;
    var gaps= circleSize+10;
    var widthCount = parseInt(width/gaps); 
    var heightCount = parseInt(height/gaps); 
    var aColors=["#43A9D1","#EFA63B","#EF7625","#5E4130"];
    var aColorsLength = aColors.length;

    for(var x=0; x<widthCount;x++){
        for(var y=0; y<heightCount;y++){
          context.fillStyle = aColors[parseInt(Math.random()*aColorsLength)];
          context.beginPath();
          context.arc(circleSize+gaps*x,circleSize+ gaps*y, circleSize, 0, Math.PI*2, true); 
          context.closePath();
          context.fill();   
        }
    }
}

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

1 Ответ

3 голосов
/ 24 октября 2019

Проблема в том, что ваш код пытается использовать переменную высоты до того, как она будет объявлена ​​и инициализирована. 

myCanvas.height = height;
var height = 100

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

var height = 100
myCanvas.height = height;

Ссылка на рабочий CodePen

...