<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 5 年前。
标签 javascript css html canvas
<分区>
编辑问题以包含 desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem .这将有助于其他人回答问题。
关闭 5 年前。
嘿，我正在制作响应式 Canvas 。我不知道出了什么问题请帮助我。 html 或 javascript 有问题。我不知道。 我不知道标准关键字。请帮我修好。 我正在使用支架。
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#myCanvas {
border: 2px solid black;
}
input {
border: .5px solid black;
padding: 2px;
}
</style>
<script>
function drawRect() {
var ctx = document.getElementById('myCanvas').getContext('2D');
var x = document.getElementById("x").value;
var y = document.getElementById("y").value;
var w = document.getElementById("w").value;
var h = document.getElementById("h").value;
ctx.fillStyle = "black";
ctx.fillRect( x, y, w, h);
reset()
}
</script>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<br />
<input id="x" type="number" value="10" step="5" min="0" max="200">
<input id="y" type="number" value="10" step="5" min="0" max="200">
<input id="w" type="number" value="10" step="5" min="0" max="400">
<input id="h" type="number" value="10" step="5" min="0" max="300">
<button id="mybtn" onclick="drawRect">Draw</button>
</body>
</html>
最佳答案
您应该使用 .getContext('2d') 而不是 .getContext('2D')。
此外，drawRect 没有括号，正如 Anthony McGrath 所提到的
检查一下:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
#myCanvas {
border: 2px solid black;
}
input {
border: .5px solid black;
padding: 2px;
}
</style>
<script>
function drawRect() {
var ctx = document.getElementById('myCanvas').getContext('2d');
var x = document.getElementById("x").value;
var y = document.getElementById("y").value;
var w = document.getElementById("w").value;
var h = document.getElementById("h").value;
ctx.fillStyle = "black";
ctx.fillRect( x, y, w, h);
}
</script>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<br />
<input id="x" type="number" value="10" step="5" min="0" max="200">
<input id="y" type="number" value="10" step="5" min="0" max="200">
<input id="w" type="number" value="10" step="5" min="0" max="400">
<input id="h" type="number" value="10" step="5" min="0" max="300">
<button id="mybtn" onclick="drawRect()">Draw</button>
</body>
</html>关于javascript - 我正在制作一个 html Canvas 游戏。类型，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48375016/
相关文章：
javascript - str.replace 不会替换 $1
html - 将下拉子菜单 <li> 元素对齐到页面右侧，同时保持 <li> 元素的正确顺序
javascript - 想要在不增加或减少任何单个像素的情况下显示从 1680 到 980 分辨率的相似 View
javascript - 在 textarea 字段中使用 "tabs"
html - Span 标签在 Drupal Bootstrap 子主题中显示为文本
javascript - 为什么 JS 日期差异脚本中缺少大约 30 天
javascript - React Redux Saga Effect 不执行