小贝子编程

我需要一些帮助来增加HTML画布行的高度



我正在做一个项目，用户可以从单选框中选择他们喜欢的编程语言。它将一个对象设置为本地存储，并创建条形图，条形图会根据选择的内容而上升。但我遇到了一个问题，如果用户第三次选择语言，就会发现图像中有什么。我每次都会改变高度，出于某种原因，它也会越过轴。我只是想改变一下高度。我对画布不是很熟悉。有没有办法让我这样做？我只是想让酒吧从原点开始向上，但不要向下。以下代码：

<!--
Click nbfs://nbhost/SystemFileSystem/Templates/Licenses/license-default.txt to change this license
Click nbfs://nbhost/SystemFileSystem/Templates/Other/html.html to edit this template
-->
<!DOCTYPE HTML>
<html>
<head>
<title>Extra Credit Challenge</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#entryArea{
border: 1px solid black;
width: 30%;
border-radius: 100px;
text-align: center;
margin: auto;
}
#myCanvas{
border-radius: 25px;
border: 1px;
}
#submitButton{
border-radius: 15px;
background-color:lightblue;
font-size: 25px;
width: 30%;
}
input{
font-size: 25px;
}
#resetButton{
border-radius: 15px;
background-color:lightblue;  
font-size: 25px;
width: 30%;  
}
</style>
</head>
<body onload="init()">
<canvas id="myCanvas" width="500" height="450" style="border:1px solid #000000;"></canvas>
<div id="entryArea"> 
<p style="font-size: 20px">What is your favorite programming language?</p>
<p><input name="language" type="radio" value="Web Design">Web Design</p> 
<p><input name="language" type="radio" value="Java">Java</p>
<p><input name="language" type="radio" value="Python">Python</p>
<p><input name="language" type="radio" value="Other">Other</p>
<button id="submitButton">Submit</button><br><br>
<button id="resetButton">Reset</button>
</div>

<script> 
function init(){ 
unCheckItems();
drawAxes();
walkThroughStorage();  
document.getElementById("submitButton").addEventListener("click", setItemToStorage);
document.getElementById("resetButton").addEventListener("click", clearCanvas); 
}
function walkThroughStorage(){
var ele = document.getElementById("entryArea").querySelectorAll("input");
var curTextStorage = localStorage.getItem("ClickedBoxes");
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
curTextStorage = JSON.parse(curTextStorage);
if(curTextStorage !== null){    
for(let i = 0; i<ele.length; i++){
let height = (curTextStorage[ele[i].value] || 0) * 40;  
if(ele[i].value === "Web Design"){
if(curTextStorage[ele[i].value] > 1){ 
ctx.rect(80, 310-(height/2), 30, height);
ctx.lineWidth = 1;
ctx.stroke(); 
} 
if(curTextStorage[ele[i].value] === 1){
ctx.rect(80, 310, 30, 40);
ctx.lineWidth = 1;
ctx.stroke();  
}
}
else if(ele[i].value === "Java"){
if(curTextStorage[ele[i].value] > 1){
ctx.rect(180, 310-(height/2), 30, height);
ctx.lineWidth = 1;
ctx.stroke();
}
if(curTextStorage[ele[i].value] === 1){
ctx.rect(180, 310, 30, 40);
ctx.lineWidth = 1;
ctx.stroke();  
}    
}
else if(ele[i].value === "Python"){
if(curTextStorage[ele[i].value] > 1){
ctx.rect(255, 310-(height/2), 30, height);
ctx.lineWidth = 1;
ctx.stroke();  
}
if(curTextStorage[ele[i].value] === 1){
ctx.rect(255, 310, 30, 40);
ctx.lineWidth = 1;
ctx.stroke(); 
}      
}
else{
if(curTextStorage[ele[i].value] > 1){  
ctx.rect(335, 310-(height/2), 30, height);
ctx.lineWidth = 1;
ctx.stroke();    
}
if(curTextStorage[ele[i].value] === 1){
ctx.rect(335, 310, 30, 40);
ctx.lineWidth = 1;
ctx.stroke();   
}                           
}
}           
}
ctx.closePath();
}
function drawAxes(){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
//draw x axis
ctx.moveTo(20,350); 
ctx.lineTo(500,350);
ctx.lineWidth = 4;
ctx.stroke();
ctx.closePath();
//draw y axis
ctx.beginPath();
ctx.moveTo(40,400);
ctx.lineTo(40,0);  
ctx.stroke();
ctx.closePath();
//draw names at the bottom
ctx.font = "15px Arial";
ctx.fillText("Web Design", 60,370);
ctx.fillText("Java", 180,370);
ctx.fillText("Python", 250,370);
ctx.fillText("Other", 330,370);
}
function unCheckItems(){ 
var ele = document.getElementById("entryArea").querySelectorAll("input");
for(let i = 0; i < ele.length; i++) {
if(ele[i].checked){
ele[i].checked = false;
} 
}
}
function setItemToStorage(){
var savedClicks = localStorage.getItem("ClickedBoxes");
let clickDict = JSON.parse(savedClicks) || {};
var ele = document.getElementById("entryArea").querySelectorAll("input");
for(let i = 0; i < ele.length; i++){
if(ele[i].checked){                  
if(!clickDict[ele[i].value]){     
clickDict[ele[i].value]=1;
}   
else//the key of 1,2,3,4 or 5 (contents of curRandNum) exist in theDict so add one to its value 
{
clickDict[ele[i].value] += 1;    
}   
}
localStorage.setItem("ClickedBoxes",JSON.stringify(clickDict));
}
drawBars(); 
}
function drawBars(){
var savedClicks = localStorage.getItem("ClickedBoxes");     
savedClicks = JSON.parse(savedClicks);
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath(); 
var ele = document.getElementById("entryArea").querySelectorAll("input");
for(let i = 0; i < ele.length; i++) {
let height = (savedClicks[ele[i].value] || 0) * 40;
if(ele[i].checked){
if(ele[i].value === "Web Design"){
if(savedClicks[ele[i].value] > 1){
clearBar();
//ctx.clearRect(80, 300, 30, 40);   
ctx.rect(80, 310-(height/2), 30, height);
ctx.lineWidth = 0;
ctx.stroke();
}  
if(savedClicks[ele[i].value] === 1){ 
ctx.rect(80, 310, 30, 40);
ctx.lineWidth = 1;
ctx.stroke(); 
}
}
else if(ele[i].value === "Java"){
if(savedClicks[ele[i].value] > 1){
clearBar();
ctx.rect(180, 310-(height/2), 30, height);
ctx.lineWidth = 0;
ctx.stroke();
}
if(savedClicks[ele[i].value] === 1){
ctx.rect(180, 310, 30, 40);
ctx.lineWidth = 1;
ctx.stroke();  
}    
}
else if(ele[i].value === "Python"){
if(savedClicks[ele[i].value] > 1){
clearBar();
ctx.rect(255, 310-(height/2), 30, height);
ctx.lineWidth = 0;
ctx.stroke();
}
if(savedClicks[ele[i].value] === 1){
ctx.rect(255, 310, 30, 40);
ctx.lineWidth = 1;
ctx.stroke(); 
}      
}
else{
if(savedClicks[ele[i].value] > 1){
clearBar();
ctx.rect(335, 310-(height/2), 30, height);
ctx.lineWidth = 0;
ctx.stroke();
}                    
if(savedClicks[ele[i].value] === 1){
ctx.rect(335, 310, 30, 40);
ctx.lineWidth = 1;
ctx.stroke();
}                           
}
}
}
ctx.closePath();
}
function clearBar(){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); 
ctx.clearRect(0, 0, c.width, c.height);
init();
}
function clearCanvas(){
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d"); 
ctx.clearRect(0, 0, c.width, c.height);
localStorage.clear(); 
init();    
}
</script>  
</body>
</html>

这是图片提前感谢！

绘制矩形时计算错误。

线路

ctx.rect(255, 310-(height/2), 30, height);

应该改为

ctx.rect(255, 350 - height, 30, height);

复制粘贴太多了。基本问题是@Ruan显示的内容：如果你想画一个结束于y=350的矩形，你只需要从350减去它的高度，而不需要任何除法。

此处添加/删除的其他内容包括：

  • 0-1-多个不再单独处理，一个零大小的矩形方便地位于横轴内，因此可以绘制它，并且40与1*40没有区别，因此无需单独绘制
  • 绘制4个条形图的代码部分仅在x坐标上不同，即使它们的间距不规则，也可以从阵列中拾取，参见[80, 180, 255, 335][i]部分-有点讨厌，但可以完成任务
  • walk无论移除了什么，它都在执行与drawBars()相同的操作
  • 添加了一个单独的reDraw()方法来处理所有内容的重绘
  • 已删除重复画布清除
  • 相反，添加了一个clear()方法来清除现有数据并调用reDraw()
  • init()不再被重用，因为这将再次添加点击处理程序，这通常会导致有趣的行为

(添加了一个假的localStorage，只是因为它对StackOverflow上托管的代码段禁用了(

// this is just for simulating localStorage here on StackOverflow
const localStorage = {m: new Map(),
getItem: function(k) {return this.m.has(k) ? this.m.get(k) : null;},
setItem: function(k, v) {this.m.set(k, v);},
clear: function() {this.m.clear();}};
function init() {
unCheckItems();
drawAxes();
drawBars();
document.getElementById("submitButton").addEventListener("click", setItemToStorage);
document.getElementById("resetButton").addEventListener("click", clear);
}
function drawAxes() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
//draw x axis
ctx.moveTo(20, 350);
ctx.lineTo(500, 350);
ctx.lineWidth = 4;
ctx.stroke();
ctx.closePath();
//draw y axis
ctx.beginPath();
ctx.moveTo(40, 400);
ctx.lineTo(40, 0);
ctx.stroke();
ctx.closePath();
//draw names at the bottom
ctx.font = "15px Arial";
ctx.fillText("Web Design", 60, 370);
ctx.fillText("Java", 180, 370);
ctx.fillText("Python", 250, 370);
ctx.fillText("Other", 330, 370);
}
function unCheckItems() {
var ele = document.getElementById("entryArea").querySelectorAll("input");
for (let i = 0; i < ele.length; i++) {
if (ele[i].checked) {
ele[i].checked = false;
}
}
}
function setItemToStorage() {
var savedClicks = localStorage.getItem("ClickedBoxes");
let clickDict = JSON.parse(savedClicks) || {};
var ele = document.getElementById("entryArea").querySelectorAll("input");
for (let i = 0; i < ele.length; i++) {
if (ele[i].checked) {
if (!clickDict[ele[i].value]) {
clickDict[ele[i].value] = 1;
} else //the key of 1,2,3,4 or 5 (contents of curRandNum) exist in theDict so add one to its value 
{
clickDict[ele[i].value] += 1;
}
}
localStorage.setItem("ClickedBoxes", JSON.stringify(clickDict));
}
reDraw();
}
function drawBars() {
var savedClicks = localStorage.getItem("ClickedBoxes");
savedClicks = JSON.parse(savedClicks) || {};
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.lineWidth = 1;
var ele = document.getElementById("entryArea").querySelectorAll("input");
for (let i = 0; i < ele.length; i++) {
let height = (savedClicks[ele[i].value] || 0) * 40;
ctx.strokeRect([80, 180, 255, 335][i], 350 - height, 30, height);
}
}
function clearCanvas() {
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.clearRect(0, 0, c.width, c.height);
}
function reDraw() {
unCheckItems();
clearCanvas();
drawAxes();
drawBars();
}
function clear() {
localStorage.clear();
reDraw();
}
init(); // "onload"
#entryArea {
border: 1px solid black;
width: 30%;
border-radius: 100px;
text-align: center;
margin: auto;
}
#myCanvas {
border-radius: 25px;
border: 1px;
}
#submitButton {
border-radius: 15px;
background-color: lightblue;
font-size: 25px;
width: 30%;
}
input {
font-size: 25px;
}
#resetButton {
border-radius: 15px;
background-color: lightblue;
font-size: 25px;
width: 30%;
}
<canvas id="myCanvas" width="500" height="450" style="border:1px solid #000000;"></canvas>
<div id="entryArea">
<p style="font-size: 20px">What is your favorite programming language?</p>
<p><input name="language" type="radio" value="Web Design">Web Design</p>
<p><input name="language" type="radio" value="Java">Java</p>
<p><input name="language" type="radio" value="Python">Python</p>
<p><input name="language" type="radio" value="Other">Other</p>
<button id="submitButton">Submit</button><br><br>
<button id="resetButton">Reset</button>
</div>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium