javascript - 如何在 JavaScript 上的一个 Canvas 上传递新变量(无 Jquery)

Question

我在 javscript 中的 Canvas 有问题，我有一个函数，当我点击一个图像时，它会立即将四个值传递给另一个函数，每个图像传递不同的值，这些值我用来绘制图表 Canvas 上有矩形，效果很好!但是只要我点击另一个图像，图形的矩形值就不会改变，它们保持不变。 问题出在哪里？

html

<canvas id="canvas" width="500" height="250"></canvas>

JavaScript

function gestoreInformazioni(){
    for (var i = 0; i < pizzeRegioni.length; i++){
        var pizza = pizzeRegioni[i];
        if( this.id === pizza.nome ){
            generaGrafico(pizza.prezzo, pizza.carboidrati, pizza.grassi, pizza.proteine);
        }
    }
}     
function generaGrafico(prezzo, carboidrati, grassi, proteine){
        try{
        var ctx = canvas.getContext("2d");
        // ctx.beginPath();
        ctx.fillStyle='rgb(255,255,0)';
        ctx.translate(0,200);
        ctx.fillRect(10,-(prezzo),40,150);
        ctx.fillRect(100,-(carboidrati),40,150);
        ctx.fillRect(200,-(grassi),40,150);
        ctx.fillRect(300,-(proteine),40,150);
    }catch(e){
        alert("generaGrafico " + e);
    }
}

初始化

nodoImgPizza = document.getElementsByClassName("img_pizza");
    for(var i = 0; i<nodoImgPizza.length; i++){
        nodoImgPizza[i].onclick = gestoreInformazioni;
    }

accociativeArray

var pizzeRegioni=[
    {
        nome:"Lardellata",
        regione:"Toscana",
        ingredienti :["pomodoro","mozzarella","lardo di Colonnata","ciliegini","porcini"],
        minX:134,
        minY:128,
        maxX:202,
        maxY:222,
        prezzo:6.50,
        carboidrati : 10,
        grassi : 15,
        proteine : 20,


    },
    {
        nome:"Senese",
        regione:"Toscana",
        ingredienti :["pomodoro","mozzarella","crudo di cinta senese","porcini"],
        minX:134,
        minY:128,
        maxX:202,
        maxY:222,
        prezzo:10,
        carboidrati : 100,
        grassi : 30,
        proteine : 40,

    }
];

Answer 1

要一遍又一遍地重新绘制相同的 Canvas ，首先您必须重置 Canvas ，然后您才能重新绘制。
请参阅此代码段示例:

// on document ready
document.addEventListener("DOMContentLoaded", function(){

	function grafic(price, carbo, fat, protein){
		try{
			// Canvas Element
			var canvas = document.getElementById("canvas")
			var ctx = canvas.getContext("2d");

			// Reset Canvas
			ctx.setTransform(1, 0, 0, 1, 0, 0);
			ctx.clearRect(0, 0, 500, 400);

			// Draw (Re-Draw) Canvas
			ctx.fillStyle='rgb(255,255,0)';
			ctx.translate(0,200);
			ctx.fillRect(10,-(price),40,150);
			ctx.fillRect(100,-(carbo),40,150);
			ctx.fillRect(200,-(fat),40,150);
			ctx.fillRect(300,-(protein),40,150);
		} catch(e){
			alert("generaGrafico " + e);
		}
	}
	
  // test buttons
	document.getElementById("a").addEventListener("click",function() {
		grafic(20, 40, 60, 80);
	})	
	document.getElementById("b").addEventListener("click",function() {
		grafic(40, 20, 60, 100);
	})	
	document.getElementById("c").addEventListener("click",function() {
		grafic(60, 40, 20, 10);
	})	
	document.getElementById("d").addEventListener("click",function() {
		grafic(80, 100, 40, 20);
	})

});

div {
	margin: 5px;
  padding: 5px;
	display: inline-block;
	border: 1px solid black;
	cursor: pointer;
}

<div id="a">Image A</div>
<div id="b">Image B</div>
<div id="c">Image C</div>
<div id="d">Image D</div>
<br/>
<canvas id="canvas" width="500" height="250"></canvas>