学习 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 回答
浮云间
TA贡献1829条经验 获得超4个赞
这里的问题是您的代码在声明和初始化之前尝试使用高度变量。
myCanvas.height = height;
var height = 100
只需要切换这些行的顺序，以便在尝试使用高度时具有有效值，如下所示：
var height = 100
myCanvas.height = height;
添加回答
举报
0/150
提交
取消