onclick函数按钮更改画布 [英] onclick function button change canvas
本文介绍了onclick函数按钮更改画布的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有以下代码在画布中创建动画系列。
我想根据某些被点击的DOM元素改变在canvas中绘制的上下文。
我有以下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 =clickstyle =margin：0 auto; position：relative; top：20％; width：360px; height：auto; src =img.pngalt =>
< / 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
y0 = i * 2 * u;
ctx.beginPath（）;
ctx.moveTo（x0，y0）;对于（x = 0; x
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值一样改变动画的属性。我试着写一个点击功能，但没有效果。任何人都可以帮助我澄清如何去改变画布？
解决方案
你只需要一个点击处理程序#click改变你的波颜色？
$（'＃click' bm = 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;返回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
< script src =https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js>< / script>< h4> < canvas class ='c'> wave< / canvas>< div style =width：100％; height：100％; position ：absolute; top：0; left：0;> < center> < img id =clickstyle =margin：0 auto; position：relative; top：35％; width：100px; height：auto; src =https://dl.dropboxusercontent.com/u/139992952/multple/sunny.pngalt => < / center>
[/ p>
I have the following code creating an animated series of lines in canvas. I would like to change the context being drawn in the canvas depending on certain DOM elements being clicked.
I have the following 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>
And the following 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);
Ultimately, I'd like to be able to click the image and change the canvas being drawn, specifically the wave function to redraw a new animation or change the attributes of the animation like the hsl values. I've tried writing a click function but to no avail. Can anybody help me clarify how I can go about changing the canvas?
解决方案
You just want a click-handler on #click to change your wave colors?
$('#click').on('click',function(){
m = ceil(w/(10*u)) + Math.random()*10*8;
});
Example code and a Demo:
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>
这篇关于onclick函数按钮更改画布的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
