点击功能按钮更改画布
onclick function button change canvas
我有以下代码在画布中创建一系列动画行。我想根据单击的某些 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);
最终,我希望能够单击图像并更改正在绘制的画布,特别是用于重绘新动画或更改动画属性(如 hsl 值)的波形函数。我尝试编写一个点击函数,但无济于事。谁能帮我澄清如何改变画布?
您只想在 #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>
相关文章:
- 用于导出Excel的.Net MVC 4.5 JqGrid按钮功能不起作用.什么'我的代码错了
- 多按钮功能
- 如何将JsBarcode放入javascript按钮功能中
- 选项卡按钮功能
- j查询禁用按钮功能在第二次点击
- 交通信号灯点击按钮功能
- 按钮功能,如果按钮被按下 10 秒钟
- 更新引导拆分按钮文本并使用下拉按钮功能
- 动态更改点击事件上的按钮功能
- 阻止安卓后退按钮功能
- 使用提交按钮功能调试javascript中的问题
- RoR 3.1-用于锁定用户的按钮_功能
- 当我将鼠标悬停在通过按钮功能添加的表行上时,如何更改列中的图像
- Jquery UI按钮功能在弹出对话框打开时执行
- Javascript在一定条件下的点击按钮功能
- 在不加载页面的情况下保留后退按钮功能
- 按钮功能不重复
- 复制Next &上一页按钮功能
- 按钮与单选按钮功能
- Android (Tasker) -如何模拟返回按钮功能