简单图形不会显示在画布中

首页课程实战体系课手记专栏慕课教程

简单图形不会显示在画布中

学习 HTML5 我遇到了一本关于图形和数据可视化的食谱。这是第一个练习，我无法显示图形。

我尝试了很多东西，我什至复制并粘贴源代码以查看它是否有效，但它没有 D:

这是代码：index.html：

<!DOCTYPE html>

<html>

<head>

<title>Canvas Example</title>

</head>

</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();

}

我期望在画布中显示一个填充了多种颜色点的矩形块。

人到中年有点甜

浏览 163回答 1

1回答

浮云间

这里的问题是您的代码在声明和初始化之前尝试使用高度变量。myCanvas.height = height;var height = 100只需要切换这些行的顺序，以便在尝试使用高度时具有有效值，如下所示：var height = 100myCanvas.height = height;

0 0

随时随地看视频慕课网APP