1. ホーム
  2. 質問と答え
  3. サインインをhtmlでプロットする

サインインをhtmlでプロットする

2017-11-07 11 views
3

html、css、javascriptを使って正弦関数をプロットし、スライダスライダで振幅を動的に変更する必要があります。だから、私に値を与えるスライダーを作って、基本的なサイン関数をプロットしました。私の最大の闘いは、最初の関数では、スライダから値を取得する変数で、数式では5です。どのようにそれを動作させるためのアイデアですか？あなたの応答に感謝します。サインインをhtmlでプロットする

<!DOCTYPE html> 
 
<html> 
 
<script type="text/javascript"> 
 
function fun1(x) {return Math.sin(x)*5;} 
 
function draw() { 
 
var canvas = document.getElementById("canvas"); 
 
if (null==canvas || !canvas.getContext) return; 
 

 
var axes={}, ctx=canvas.getContext("2d"); 
 
axes.x0 = .5 + .5*canvas.width; // x0 pixels from left to x=0 
 
axes.y0 = .5 + .5*canvas.height; // y0 pixels from top to y=0 
 
axes.scale = 40;     // 40 pixels from x=0 to x=1 
 
axes.doNegativeX = true; 
 

 
showAxes(ctx,axes); 
 
funGraph(ctx,axes,fun1,"rgb(11,153,11)",1); 
 
} 
 

 
function funGraph (ctx,axes,func,color,thick) { 
 
var xx, yy, dx=4, x0=axes.x0, y0=axes.y0, scale=axes.scale; 
 
var iMax = Math.round((ctx.canvas.width-x0)/dx); 
 
var iMin = axes.doNegativeX ? Math.round(-x0/dx) : 0; 
 
ctx.beginPath(); 
 
ctx.lineWidth = thick; 
 
ctx.strokeStyle = color; 
 

 
for (var i=iMin;i<=iMax;i++) { 
 
    xx = dx*i; yy = scale*func(xx/scale); 
 
    if (i==iMin) ctx.moveTo(x0+xx,y0-yy); 
 
    else   ctx.lineTo(x0+xx,y0-yy); 
 
} 
 
ctx.stroke(); 
 
} 
 

 
function showAxes(ctx,axes) { 
 
var x0=axes.x0, w=ctx.canvas.width; 
 
var y0=axes.y0, h=ctx.canvas.height; 
 
var xmin = axes.doNegativeX ? 0 : x0; 
 
ctx.beginPath(); 
 
ctx.strokeStyle = "rgb(128,128,128)"; 
 
ctx.moveTo(xmin,y0); ctx.lineTo(w,y0); // X axis 
 
ctx.moveTo(x0,0); ctx.lineTo(x0,h); // Y axis 
 
ctx.stroke(); 
 
} 
 
</script> 
 
<style> 
 
#slidecontainer { 
 
    width: 50%; 
 
} 
 

 
.slider { 
 
    -webkit-appearance: slider-vertical; 
 
    width: 100%; 
 
    height: 25px; 
 
    background: grey; 
 
    outline: none; 
 
    opacity: 0.7; 
 
    -webkit-transition: .2s; 
 
    transition: opacity .2s; 
 
} 
 

 
.slider:hover { 
 
    opacity: 1; 
 
} 
 

 
.slider::-webkit-slider-thumb { 
 
    -webkit-appearance: slider-vertical; 
 
    appearance: none; 
 
    width: 25px; 
 
    height: 25px; 
 
    background: blue; 
 
    cursor: pointer; 
 
} 
 

 
.slider::-moz-range-thumb { 
 
    width: 25px; 
 
    height: 25px; 
 
    background: #4CAF50; 
 
    cursor: pointer; 
 
} 
 
html{ 
 
\t margin-left: 25%; 
 
\t margin-right: 25%; 
 
} 
 
</style> 
 
<body onload="draw()"> 
 
<h2>Select your amplitude</h2> 
 
<div id="slidecontainer"> 
 
    <input type="range" min="-10" max="10" value="0" class="slider" id="myRange"> 
 
    <p>Amplitude: <span id="demo"></span></p> 
 
</div> 
 
<canvas id="canvas" width="500%" height="200%"></canvas> 
 

 
<script> 
 
var slider = document.getElementById("myRange"); 
 
var a = document.getElementById("demo"); 
 
a.innerHTML = slider.value; 
 

 
slider.oninput = function() { 
 
    a.innerHTML = this.value; 
 
} 
 
</script> 
 

 
</body> 
 
</html>

出典

2017-11-07 Maťo Vači Vačko

答えて

2

あなたは固定値として5を使用するので、私はglobal_varという名前のグローバル変数に置き換え。スライダが変更されるたびに、この値が更新され、キャンバスがリフレッシュされます。

私の2つのマイナーな変更：

var global_var = 5; 
function fun1(x) {return Math.sin(x)*global_var;}

と

slider.oninput = function() { 
    a.innerHTML = this.value; 
    global_var = this.value; 
    //reset canvas 
    document.getElementById("canvas").getContext("2d").clearRect(0, 0, canvas.width, canvas.height); 
    //draw again 
    draw(); 
}

の作業例は、次のとおりです。

<!DOCTYPE html> 
 
<html> 
 
<script type="text/javascript"> 
 
var global_var = 5; 
 
function fun1(x) {return Math.sin(x)*global_var;} 
 
function draw() { 
 
var canvas = document.getElementById("canvas"); 
 
if (null==canvas || !canvas.getContext) return; 
 

 
var axes={}, ctx=canvas.getContext("2d"); 
 
axes.x0 = .5 + .5*canvas.width; // x0 pixels from left to x=0 
 
axes.y0 = .5 + .5*canvas.height; // y0 pixels from top to y=0 
 
axes.scale = 40;     // 40 pixels from x=0 to x=1 
 
axes.doNegativeX = true; 
 

 
showAxes(ctx,axes); 
 
funGraph(ctx,axes,fun1,"rgb(11,153,11)",1); 
 
} 
 

 
function funGraph (ctx,axes,func,color,thick) { 
 
var xx, yy, dx=4, x0=axes.x0, y0=axes.y0, scale=axes.scale; 
 
var iMax = Math.round((ctx.canvas.width-x0)/dx); 
 
var iMin = axes.doNegativeX ? Math.round(-x0/dx) : 0; 
 
ctx.beginPath(); 
 
ctx.lineWidth = thick; 
 
ctx.strokeStyle = color; 
 

 
for (var i=iMin;i<=iMax;i++) { 
 
    xx = dx*i; yy = scale*func(xx/scale); 
 
    if (i==iMin) ctx.moveTo(x0+xx,y0-yy); 
 
    else   ctx.lineTo(x0+xx,y0-yy); 
 
} 
 
ctx.stroke(); 
 
} 
 

 
function showAxes(ctx,axes) { 
 
var x0=axes.x0, w=ctx.canvas.width; 
 
var y0=axes.y0, h=ctx.canvas.height; 
 
var xmin = axes.doNegativeX ? 0 : x0; 
 
ctx.beginPath(); 
 
ctx.strokeStyle = "rgb(128,128,128)"; 
 
ctx.moveTo(xmin,y0); ctx.lineTo(w,y0); // X axis 
 
ctx.moveTo(x0,0); ctx.lineTo(x0,h); // Y axis 
 
ctx.stroke(); 
 
} 
 
</script> 
 
<style> 
 
#slidecontainer { 
 
    width: 50%; 
 
} 
 

 
.slider { 
 
    -webkit-appearance: slider-vertical; 
 
    width: 100%; 
 
    height: 25px; 
 
    background: grey; 
 
    outline: none; 
 
    opacity: 0.7; 
 
    -webkit-transition: .2s; 
 
    transition: opacity .2s; 
 
} 
 

 
.slider:hover { 
 
    opacity: 1; 
 
} 
 

 
.slider::-webkit-slider-thumb { 
 
    -webkit-appearance: slider-vertical; 
 
    appearance: none; 
 
    width: 25px; 
 
    height: 25px; 
 
    background: blue; 
 
    cursor: pointer; 
 
} 
 

 
.slider::-moz-range-thumb { 
 
    width: 25px; 
 
    height: 25px; 
 
    background: #4CAF50; 
 
    cursor: pointer; 
 
} 
 
html{ 
 
\t margin-left: 25%; 
 
\t margin-right: 25%; 
 
} 
 
</style> 
 
<body onload="draw()"> 
 
<h2>Select your amplitude</h2> 
 
<div id="slidecontainer"> 
 
    <input type="range" min="-10" max="10" value="0" class="slider" id="myRange"> 
 
    <p>Amplitude: <span id="demo"></span></p> 
 
</div> 
 
<canvas id="canvas" width="500%" height="500%"></canvas> 
 

 
<script> 
 
var slider = document.getElementById("myRange"); 
 
var a = document.getElementById("demo"); 
 
a.innerHTML = slider.value; 
 

 
slider.oninput = function() { 
 
    a.innerHTML = this.value; 
 
    global_var = this.value; 
 
    //reset 
 
    document.getElementById("canvas").getContext("2d").clearRect(0, 0, canvas.width, canvas.height); 
 
    //draw again 
 
    draw(); 
 
} 
 
</script> 
 

 
</body> 
 
</html>

出典

2017-11-07 13:12:12 tgogos

関連する問題

 関連する問題