单击图标可以在画布上用JavaScript绘制矩形

这在HTML和JavaScript中应该是一项非常简单的任务。我有一个图标栏，现在有一个可点击的链接，New Box。在图标栏下面，我有一个画布。我的目标是每次用户按下NewBox按钮时在画布上绘制一个新的矩形。

现在，我的图标栏和画布显示正确，我可以单击图标栏的New Box链接，但画布上没有出现矩形，尽管我已将其onclick参数指定为：newBox。

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
function newBox(e) {
context.beginPath();
context.fillStyle = "#ADD8E6";
context.fillRect(50, 50, 150, 150);
context.fill();
}

body{
background-color: ivory;
padding:20px;
}
.icon-bar {
width: 100%; 
background-color: #555; 
overflow: auto; 
margin-bottom: 25px;
}
.icon-bar a {
float: left;
text-align: center;
width: 11.11%;
padding: 12px 0;
transition: all 0.3s ease;
color: white;
font-size: 24px;
text-decoration: none;
}
.icon-bar a:hover {
background-color: #000; 
}
.icon-bar-text {
font-style: normal;
}
.active {
background-color: #4CAF50; 
}
#canvas {
width:95%;
height:30%;
border:4px solid blue;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Builder</title>
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="icon-bar">
<a href="#">
<i class="icon-bar-text" onclick="newBox();" title="Click to add a new box on canvas">New Box
</i>
</a>
<!-- ...there will be more <a> tags here -->
</div>
<canvas id="canvas"></canvas>
</body>
</html>

您需要存储并更新y位置，如下所示。请注意，您还需要增加画布大小，以防框出现在视图之外。

var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
var canvasWidth = canvas.width;
var canvasHeight = canvas.height;
let prevY = 0;
function newBox(e) {
context.fillStyle = "#ADD8E6";
context.fillRect(50, prevY, 150, 150);
prevY+= 160; // height + some padding
}

body {
background-color: ivory;
padding: 20px;
}
.icon-bar {
width: 100%;
background-color: #555;
overflow: auto;
margin-bottom: 25px;
}
.icon-bar a {
float: left;
text-align: center;
width: 11.11%;
padding: 12px 0;
transition: all 0.3s ease;
color: white;
font-size: 24px;
text-decoration: none;
}
.icon-bar a:hover {
background-color: #000;
}
.icon-bar-text {
font-style: normal;
}
.active {
background-color: #4CAF50;
}

<div class="icon-bar">
<a href="#"><i class="icon-bar-text" onclick="newBox();" title="Click to add a new box on canvas">New Box</i></a>
<!-- ...there will be more <a> tags here -->
</div>
<canvas id="canvas" width="500" height="500"></canvas>

相关内容

最新更新

热门标签：