使用画布绘制网格
使用画布绘制网格
提问于 2020-03-04 01:26:11
我想创建一个具有不同输入的网格。画布应该接受这些输入并创建网格。例如，具有相同高度和宽度的8*8网格、16*16网格或32*32网格。但是网格没有显示。无法在Canvas中使用if else语句。请帮帮我。
//HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="myCss.css">
</head>
<body>
<div class="pixelArt">
<h2>PIXEL ART</h2>
<div class="canvasSec">
<canvas id="canvas" width="400" height="400"></canvas>
</div>
<div class="makeChanges">
<p>Pick Color</p>
<input id="pickColor" type="color"><br><br>
<label>Choose Grid</label>
<select id="gridSize">
<option value="8*8">8*8</option>
<option value="12*12">12*12</option>
<option value="16*16">16*16</option>
<option value="32*32">32*32</option>
</select>
</div>
</div>
</body>
<script type="text/javascript" src="myScript.js"></script>
</html>
//js
var pickColor = document.getElementById('pickColor');
var gridSize = document.getElementById('gridSize').value;
console.log(gridSize);
var myCanvas = document.getElementById('canvas');
var context = myCanvas.getContext('2d');
function drawBoard(){
debugger;
if(gridSize === 8*8){
for(var x = 1; x < 400; x+=50){
context.moveTo(x, 0);
context.lineTo(x, 400);
}
for(var y = 1; y < 400; y+=50){
context.moveTo(0, y);
context.lineTo(400, y);
}
}else if(gridSize === 16*16){
for(var x = 1; x < 400; x+=25){
context.moveTo(x, 0);
context.lineTo(x, 400);
}
for(var y = 1; y < 400; y+=25){
context.moveTo(0, y);
context.lineTo(400, y);
}
}
context.strokeStyle = 'gray';
context.stroke();
}
drawBoard();回答 1
Stack Overflow用户
发布于 2020-03-04 02:24:36
看起来你只是在数学上有点小麻烦...
使用if else语句，您的代码将变得非常非常长
以下是我会做的事情：
var grid = {x:8, y:8}
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
function drawBoard() {
w = canvas.width - 2
for (var x = 1; x < canvas.width; x += w/grid.x) {
context.moveTo(x, 0);
context.lineTo(x, 400);
}
h = canvas.height - 2
for (var y = 1; y < canvas.height; y += h/grid.y) {
context.moveTo(0, y);
context.lineTo(400, y);
}
context.stroke();
}
drawBoard();<canvas id=canvas width=160 height=160>
正如您所看到的，我使用canvas.width和canvas.height来保持网格大小以计算画布的大小，但您当然可以将其更改为您喜欢的任何值。
希望这能让你更贴近你的需求。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/60512568
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号