onclick 함수 단추 변경 캔버스

Question

캔버스에 애니메이션 된 일련의 선을 만드는 다음 코드가 있습니다. 클릭 한 특정 DOM 요소에 따라 캔버스에서 그려지는 컨텍스트를 변경하고 싶습니다.

<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> 

그리고 다음 자바 스크립트 :

나는 다음과 같은 HTML이 궁극적으로

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

을, 나는 수 있도록하고 싶습니다 이미지를 클릭하고 그려진 캔버스, 특히 새 애니메이션을 다시 그리거나 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>