onclick関数ボタンの変更キャンバス

Question

キャンバスにアニメーション化された一連の線を作成する次のコードがあります。 クリックした特定のDOM要素に応じて、キャンバスに描画されるコンテキストを変更したいと思います。

私は次のようなHTMLがあります。

<style> 
    *{ 
    overflow: hidden; 
    margin: 0; 
    width: 100%; 
    height: 100%; 
    } 

.c{ 
    background: black;} 
</style> 

<canvas class='c'>waves</canvas> 
    <div style="width:100%; height:100%; position:absolute; top:0; left:0;"> 
<center> 
    <img id="click" style="margin:0 auto; position:relative; top:20%; width:360px; height:auto;" src="img.png" alt="" > 
</center> 
    </div> 
    <script src="js/index.js"></script> 
    </body> 

そして、次のjavascript：

var c = document.querySelector('.c'), 
w, h, 
ctx = c.getContext('2d'), 

x0, y0, x, y, 
t = 0, t_step = 1/200, 
u = 5, m, 
tmp, 


ceil = Math.ceil, 
exp = Math.exp, pow = Math.pow, sqrt = Math.sqrt, 
PI = Math.PI, sin = Math.sin, cos = Math.cos; 

var rand = function(max, min) { 
    var b = (max === 0 || max) ? max : 1, a = min || 0; 

    return a + (b - a)*Math.random(); 
}; 

var trimUnit = function(input_str, unit) { 
    return parseInt(input_str.split(unit)[0], 10); 
}; 

var initCanvas = function() { 
    var s = getComputedStyle(c); 

    w = c.width = trimUnit(s.width, 'px'); 
    h = c.height = trimUnit(s.height, 'px'); 

    m = ceil(w/(10*u)) + 50; 
}; 

var wave = function() { 
    ctx.clearRect(0, 0, w, h); 
    ctx.lineWidth = 2; 

    for(var i = 0; i < m; i++) { 
    x0 = -20; 
    y0 = i*2*u; 

    ctx.beginPath(); 
    ctx.moveTo(x0, y0); 

    for(x = 0; x < w; x++) { 
     y = u*sin(x/6/(16*i/m + 1) - w*(i/m + 1)*t/120) + i*2*u; 

     ctx.lineTo(x, y); 

     x0 = x; 
     y0 = y; 
    } 
    ctx.strokeStyle = 'hsl(' + i*360/m + ', 100%, 70%)'; 
    ctx.stroke(); 
    } 

t += t_step; 

    requestAnimationFrame(wave); 
}; 

setTimeout(function() { 

    initCanvas(); 
    wave(); 

    addEventListener('resize', initCanvas, false); 
}, 15); 

結局、私のことができるようにしたいのですが画像をクリックして描画されるキャンバスを変更します。具体的には、新しいアニメーションを再描画するwave関数、またはhsl値のようなアニメーションの属性を変更します。私はクリック機能を書こうとしましたが、無駄です。私がキャンバスをどのように変えることができるかを誰かが助けてくれますか？

Answer 1

#clickのクリックハンドラーで波の色を変更したいだけですか？

$('#click').on('click',function(){ 
    m = ceil(w/(10*u)) + Math.random()*10*8; 
}); 

サンプルコードとデモ：

var c = document.querySelector('.c'), 
 
w, h, 
 
ctx = c.getContext('2d'), 
 

 
x0, y0, x, y, 
 
t = 0, t_step = 1/200, 
 
u = 5, m, 
 
tmp, 
 

 

 
ceil = Math.ceil, 
 
exp = Math.exp, pow = Math.pow, sqrt = Math.sqrt, 
 
PI = Math.PI, sin = Math.sin, cos = Math.cos; 
 

 
var rand = function(max, min) { 
 
    var b = (max === 0 || max) ? max : 1, a = min || 0; 
 

 
    return a + (b - a)*Math.random(); 
 
}; 
 

 
var trimUnit = function(input_str, unit) { 
 
    return parseInt(input_str.split(unit)[0], 10); 
 
}; 
 

 
var initCanvas = function() { 
 
    var s = getComputedStyle(c); 
 

 
    w = c.width = trimUnit(s.width, 'px'); 
 
    h = c.height = trimUnit(s.height, 'px'); 
 

 
    m = ceil(w/(10*u)) + 25; 
 
}; 
 

 
var wave = function() { 
 
    ctx.clearRect(0, 0, w, h); 
 
    ctx.lineWidth = 2; 
 

 
    for(var i = 0; i < m; i++) { 
 
    x0 = -20; 
 
    y0 = i*2*u; 
 

 
    ctx.beginPath(); 
 
    ctx.moveTo(x0, y0); 
 

 
    for(x = 0; x < w; x++) { 
 
     y = u*sin(x/6/(16*i/m + 1) - w*(i/m + 1)*t/120) + i*2*u; 
 

 
     ctx.lineTo(x, y); 
 

 
     x0 = x; 
 
     y0 = y; 
 
    } 
 
    ctx.strokeStyle = 'hsl(' + i*360/m + ', 100%, 70%)'; 
 
    ctx.stroke(); 
 
    } 
 

 
t += t_step; 
 

 
    requestAnimationFrame(wave); 
 
}; 
 

 
addEventListener('resize', initCanvas, false); 
 

 
$('#click').on('click',function(){ 
 
    m = ceil(w/(10*u)) + Math.random()*10*8; 
 
}); 
 

 
initCanvas(); 
 
wave();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<h4>Click on sun to <br>change wave colors.</h4> 
 
<canvas class='c'>waves</canvas> 
 
<div style="width:100%; height:100%; position:absolute; top:0; left:0;"> 
 
    <center> 
 
    <img id="click" style="margin:0 auto; position:relative; top:35%; width:100px; height:auto;" src="https://dl.dropboxusercontent.com/u/139992952/multple/sunny.png" alt="" > 
 
    </center>