配列を使用したキャンバス上の点の描画（JavaScript）

-1

私の先生は私たちにキャンバスを作成させたいと思っていました。彼はわたしには分かりませんが、本当に混乱している指示を私たちにくれました。配列を使用したキャンバス上の点の描画（JavaScript）

パスを使用して、配列からポイントをプロットし、折れ線グラフとして表示します。配列の各メンバーのx座標を調整し、各メンバーの値を表示するようにy座標を調整します。キャンバス内のy座標は画面上部に0を表示しますので、は各配列を減算する必要があります以降のグラフの高さ+境界線からの値ほとんどの折れ線グラフは、上からグラフの下端を基準にしたデータを示します。 x座標は各配列値の単位での間隔で調整する必要があります。ループをにすることを強くお勧めします。

私はこの意味と実行方法について本当に説明したいと思います。

HTML：

<!DOCTYPE html> 
<html> 
<head> 

</head> 
<body> 
    <canvas id="myCanvas" width="600" height="600" style="border: 1px solid #ddd;">Your browser does not support the HTML5 canvas tag 
    </canvas> 
    <script src="script.js"> 
    </script> 
</body> 
</html>

Javaスクリプト：このように

graph(); 

function graph() { 
    var canvas = document.getElementById("myCanvas"); 
    var theContext = canvas.getContext("2d"); 
    var sales = [52, 48, 74, 31, 47, 25, 67, 78, 45, 15, 85]; 
    var width = 300; 
    var height = 100; 
    var uSpacing = 10; 
    var border = 20; 
    var scalar = 100; 

    theContext.strokeRect(border, border, width, height) 
    theContext.beginPath(); 
    theContext.moveTo(100,100); 
    theContext.lineTo(52,48); 
    theContext.stroke(); 
}

出典

2017-02-06 MehLdy

？

graph(); 
 

 
function graph() { 
 
    var canvas = document.getElementById("myCanvas"); 
 
    var theContext = canvas.getContext("2d"); 
 
    var sales = [52, 48, 74, 31, 47, 25, 67, 78, 45, 15, 85]; 
 
    var width = 300; 
 
    var height = 100; 
 
    var uSpacing = 10; 
 
    var border = 20; 
 
    var scalar = 100; 
 
    var offset = (1/(sales.length - 1)) * width; 
 

 
    theContext.strokeRect(0, 0, width, height) 
 

 
    theContext.beginPath(); 
 
    theContext.moveTo(0, sales[0]); 
 
    for (var x = 1; x < sales.length; x++) { 
 
    theContext.lineTo(x * offset, 100 - sales[x]); 
 
    } 
 
    theContext.stroke(); 
 
}

<canvas id="myCanvas" width="600" height="600" style="border: 1px solid #ddd;">Your browser does not support the HTML5 canvas tag 
 
</canvas>

EDIT

おっと、Y軸を反転するのを忘れました。

楽しみのためだけに

継続的な更新

var sales = [52, 48, 74, 31, 47, 25, 67, 78, 45, 15, 85]; 
 

 
function graph() { 
 
    var canvas = document.getElementById("myCanvas"); 
 
    var theContext = canvas.getContext("2d"); 
 
    var width = 300; 
 
    var height = 100; 
 
    var uSpacing = 10; 
 
    var border = 20; 
 
    var scalar = 100; 
 
    var offset = (1/(sales.length - 1)) * width; 
 

 
    theContext.clearRect(0, 0, width, height) 
 
    theContext.strokeRect(0, 0, width, height) 
 

 
    theContext.beginPath(); 
 
    theContext.moveTo(0, sales[0]); 
 
    for (var x = 1; x < sales.length; x++) { 
 
    theContext.lineTo(x * offset, 100 - sales[x]); 
 
    } 
 
    theContext.stroke(); 
 
} 
 

 
setInterval(function() { 
 
    sales.push(Math.random() * 100); 
 
    if (sales.length > 100) { 
 
    sales = sales.slice(sales.length - 100); 
 
    } 
 
    graph(); 
 
}, 1000/24) 
 

 
graph();

<canvas id="myCanvas" width="600" height="600" style="border: 1px solid #ddd;">Your browser does not support the HTML5 canvas tag 
 
</canvas>

出典

2017-02-06 12:08:56

配列を使用したキャンバス上の点の描画（JavaScript）

答えて

関連する問題