图标单击以JavaScript在画布上绘制矩形
在HTML和JavaScript中，这应该是一个非常简单的任务。我有一个图标栏，目前有一个单一的可点击链接，新的框。在图标栏下面，我有一张画布。我的目标是在用户每次按下new Box按钮时，在画布上绘制一个新的矩形。
现在，我的图标栏和画布正确显示，我可以单击图标栏的“新建框”链接，但画布上没有出现矩形，尽管我已将其onclick参数指定为:NewBox。
null
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>null
共有1个答案
您需要存储和更新y位置，如下所示。请注意，您还需要增加画布的大小，以防止框消失。
null
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>-
我正在尝试创建一个程序，该程序应该基于两次鼠标左键单击在画布上绘制一个矩形，并通过一次右键单击清除画布。 创建矩形的方式应该是，第一次鼠标点击模拟矩形的一个角，下一次鼠标点击与第一次鼠标点击相比模拟矩形的对角线角。 我被困在如何存储第一次鼠标点击的坐标，然后把第二次鼠标点击用好，因为每个定义的矩形只基于一组坐标创建，这是矩形的左上角。 现在，我的代码所做的只是绘制固定大小的矩形(50x25)，这显
-
实际上，我可以使用函数来完成。我从“HTML5画布-如何在图像背景上画一条线？”中得到的东西。但是我需要在不使用from函数的情况下绘制图像，如下所示：
-
问题内容： 如标题所示，我很难在JApplet中绘制一些矩形（填充的）。确切的目标是拥有一张50x50的表格，并在您 点击目标单元格时将其填充（可以通过绘制一个填充的矩形来完成）。我已经完成了有关起点坐标的数学运算， 但是由于某些原因，我无法在MouseClicked方法中绘制新矩形。有什么建议？ 问题答案： 这是一个相对简单的概念（没有冒犯性）。 首先，请勿将代码与JApplet和混合使用JFr
-
我的任务是在画布上绘制许多矩形，但所有矩形都有一个旋转角度，它们必须在画布上旋转。我在寻找这个问题的解决方案时遇到的许多建议都指出了绘制一个矩形并旋转画布的方法（canvas.rotate（angle）），但它会旋转所有画布，并且只能使用一个矩形。在画布上绘制许多旋转矩形的最佳方法是什么？我想画矩形（单色，带颜料），但不是位图，因为时间效率和内存。 目前我主要的方法是创建一堆画布，在每个画布上绘制
-
问题内容： 我发现只能填充矩形，而没有圆角，该怎么办？ 问题答案： HTML5画布没有提供绘制带有圆角的矩形的方法。 如何使用和方法？ 您也可以使用方法代替方法。
-
5.2.3 在画布上绘图 本节介绍如何在画布上绘制图形。为了完整起见，我们将前面介绍过的首先需要执行的 几条语句合在一起复制如下： >>> from Tkinter import * >>> root = Tk() >>> c = Canvas(root,width=300,height=200,bg='white') >>> c.pack() 如前所述，c 是一个画布对象，而画布对象提供了若干