Question

我是javascript的新手。我只想在每帧生成一些随机点并使用它们绘制图形。但该程序在绘制之前不会清除画布。所以程序只是不断添加新的像素。最后我想根据货币的价值绘制图表（欧元，美元......）。这是一张生成图片的图片：https://ibb.co/fn1qXd 这是我每帧生成图表时的图片：https://ibb.co/dmQCdJ

<script>

let canvas = document.getElementById("myCanvas");
let context = canvas.getContext("2d");

function loop()
{
    context.clearRect(0, 0, canvas.width, canvas.height);

    let growth=20;
    points[0]=0;
    for(i=1;i<points.length;i++)
        points[i]=points[i-1]+(Math.random()*growth-growth/2);          

    context.strokeStyle="#42BBDB";
    for(i=0;i<points.length-1;i++)
    {
        context.lineWidth=1;
        context.moveTo(i, points[i]+160);
        context.lineTo(i+1, points[i+1]+160);
    }                       

    context.stroke();

    requestAnimationFrame(loop);
}

for(i=0;i<values.length;i++)
    for(j=0;j<values.length;j++)
        if(i!=j)
        {
            let name=values[i]+" "+values[j];
            points=new Array(400);  
            points[0]=0;
            for(k=1;k<points.length;k++)
            {
                let growth=20;
                points[k]=points[k-1]+(Math.random()*growth-growth/2);
            }
        }
loop();
</script>

Answer 1

你应该添加：

values = [1, 2, 3, 4, 5];
points = [];

在for循环之前，为了工作。

Working Example in Fiddle

let canvas = document.getElementById("myCanvas");
let context = canvas.getContext("2d");

function loop()
{
	context.clearRect(0, 0, canvas.width, canvas.height);
	
	let growth = 20;
	
	for (i = 1; i < points.length; i++)
	{
		points[i] = points[i - 1] + (Math.random() * growth - growth / 2);
	}
	
	context.strokeStyle = "#42BBDB";
	
	for (i = 0; i < points.length - 1; i++)
	{
		context.lineWidth = 1;
		context.moveTo(i, points[i] + 160);
		context.lineTo(i + 1, points[i + 1] + 160);
	}
	
	context.stroke();
	
	requestAnimationFrame(loop);
}

values = [1, 2, 3, 4, 5];
points = [];

for (i = 0; i < values.length; i++)
{
	for (j = 0; j < values.length; j++)
	{
		if (i != j)
		{
			let name = values[i] + " " + values[j];
			
			points = new Array(400);
			
			points[0] = 0;
			
			for (k = 1; k < points.length; k++)
			{
				let growth = 20;
				points[k] = points[k - 1] + (Math.random() * growth - growth / 2);
			}
		}
	}
}

loop();

<canvas id="myCanvas" width="200" height="100"></canvas>

Answer 2

您应该按照此答案中的说明context.beginPath();之后致电context.clearRect(0, 0, canvas.width, canvas.height);：https://stackoverflow.com/a/16035567/3337236

https://jsfiddle.net/2wogtevL/

在javascript画布中绘图无法正常工作

2 个答案: