Question

我需要使用html，css和javascript绘制正弦函数，并能够通过滑动滑块动态改变其幅度。所以我做了一个滑块给了我一个值，我绘制了基本的正弦函数。我最大的困难是取代不。 5在变量的第一个函数中的数学表达式中，从滑块获取值。任何想法如何使其工作？谢谢你的回复。

＆＃13;

<!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{
	margin-left: 25%;
	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>

＆＃13;

Answer 1

您使用5作为固定值，因此我将其替换为名为global_var的全局变量。每次滑块更改时，都会更新此值并刷新画布。

我的两个小改动：

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();
}

工作示例如下：

＆＃13;

<!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{
	margin-left: 25%;
	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>

＆＃13;

在html中绘制正弦

1 个答案: