學(xué)習(xí) HTML5 我遇到了一本關(guān)于圖形和數(shù)據(jù)可視化的食譜。這是第一個(gè)練習(xí)，我無法顯示圖形。我嘗試了很多東西，我什至復(fù)制并粘貼源代碼以查看它是否有效，但它沒有 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(); } }}我期望在畫布中顯示一個(gè)填充了多種顏色點(diǎn)的矩形塊。
簡(jiǎn)單圖形不會(huì)顯示在畫布中
人到中年有點(diǎn)甜
2021-12-02 16:53:02
