Question

HTML画布新手。我使用Shovan Dhara

得到了一个很好的波形生成指针

码。但是我想在这个波浪的顶部实现一个浮动矩形。任何指针都很有用。感谢。

P.S：找到以下代码：

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Oscillators</title>

  <style type='text/css'>
    body {
        margin:0;
        padding:0;
        overflow:hidden;
        background:#e6e5e5;
    }
  </style>



<script type='text/javascript'>
// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();
//<![CDATA[
window.onload=function(){
/**
 *    Wave oscillators by Ken Fyrstenberg Nilsen
 *    http://abdiassoftware.com/
 *
 *    CC-Attribute 3.0 License
*/
var ctx = canvas.getContext('2d'),
    w, h;
canvas.width = w = window.innerWidth * 1.1;
canvas.height = h = window.innerHeight * 1;
var osc1 = new osc(),
    osc2 = new osc(),
    osc3 = new osc(),
    horizon = h * 0.5;
    count = 40,
    step = Math.ceil(w / count),
    //points = new Array(count);
    buffer = new ArrayBuffer(count * 4),
    points = new Float32Array(buffer);
osc1.max = 15;//h * 0.7;
osc2.max = 5;
osc2.speed = 0.03;
osc2.max = 5;
osc2.speed = 0.015;
function fill() {
    for(var i = 0; i < count; i++) {
        points[i] = mixer(osc1, osc2, osc3);
    }
}
fill();
ctx.lineWidth = 20;
ctx.strokeStyle = '#0000';
ctx.fillStyle = '#1d96d3';
function loop() {
    var i;
    /// move points to the left
    for(i = 0; i < count - 1; i++) {
        points[i] = points[i + 1];
    }
    /// get a new point
    points[count - 1] = mixer(osc1, osc2, osc3);
    ctx.clearRect(0, 0, w, h);
    //ctx.fillRect(0, 0, w, h);
    /// render wave
    ctx.beginPath();
    ctx.moveTo(-5, points[0]);
    for(i = 1; i < count; i++) {
        ctx.lineTo(i * step, points[i]);
    }
    ctx.lineTo(w, h);
    ctx.lineTo(-5, h);
    ctx.lineTo(-5, points[1]);
    ctx.stroke();
    ctx.fill();
    ctx.strokeRect(100,h/2,150,100);
}
/// oscillator object
function osc() {
    this.variation = 0.4;
    this.max = 150;
    this.speed = 0.02;
    var me = this,
        a = 0,
        max = getMax();
    this.getAmp = function() {
        a += this.speed;
        if (a >= 2.0) {
            a = 0;
            max = getMax();
        }
        return max * Math.sin(a * Math.PI);
    }
    function getMax() {
        return Math.random() * me.max * me.variation +
            me.max * (1 - me.variation);
    }
    return this;
}
function mixer() {
    var d = arguments.length,
        i = d,
        sum = 0;
    if (d < 1) return 0;
    while(i--) sum += arguments[i].getAmp();
    return sum / d + horizon;
}
(function animloop(){
  requestAnimFrame(animloop);
  loop();
})();
}//]]>
</script>


</head>
<body>
  <canvas id="canvas"></canvas>

</body>


</html>

＆＃13;

Answer 1

我获取了屏幕的宽度并将其除以点数然后我根据其尺寸计算了用于给定X坐标的框Y坐标的哪个点。点只是Y坐标，所以波的高度在点。这些是我的计算：

ctx.strokeRect(rectX, points[pointToUse] - rectHeight, rectWidth, rectHeight);

我画这样的盒子：

points[pointToUse] - rectHeight

您可以通过向<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>Oscillators</title> <style type='text/css'> body { margin:0; padding:0; overflow:hidden; background:#e6e5e5; } </style> <script type='text/javascript'> // shim layer with setTimeout fallback window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); }; })(); //<![CDATA[ window.onload=function(){ /** * Wave oscillators by Ken Fyrstenberg Nilsen * http://abdiassoftware.com/ * * CC-Attribute 3.0 License */ var ctx = canvas.getContext('2d'), w, h; canvas.width = w = window.innerWidth * 1.1; canvas.height = h = window.innerHeight * 1; var osc1 = new osc(), osc2 = new osc(), osc3 = new osc(), horizon = h * 0.5; count = 40, step = Math.ceil(w / count), //points = new Array(count); buffer = new ArrayBuffer(count * 4), points = new Float32Array(buffer); osc1.max = 15;//h * 0.7; osc2.max = 5; osc2.speed = 0.03; osc2.max = 5; osc2.speed = 0.015; function fill() { for(var i = 0; i < count; i++) { points[i] = mixer(osc1, osc2, osc3); } } fill(); ctx.lineWidth = 20; ctx.strokeStyle = '#0000'; ctx.fillStyle = '#1d96d3'; var rectX = 200; var rectWidth = 100; var rectHeight = 50; var centerX = rectX + rectWidth / 2; var pointToUse = Math.floor(centerX / (w / points.length)); function loop() { var i; /// move points to the left for(i = 0; i < count - 1; i++) { points[i] = points[i + 1]; } /// get a new point points[count - 1] = mixer(osc1, osc2, osc3); ctx.clearRect(0, 0, w, h); //ctx.fillRect(0, 0, w, h); /// render wave ctx.beginPath(); ctx.moveTo(-5, points[0]); for(i = 1; i < count; i++) { ctx.lineTo(i * step, points[i]); } ctx.lineTo(w, h); ctx.lineTo(-5, h); ctx.lineTo(-5, points[1]); ctx.stroke(); ctx.fill(); ctx.strokeRect(rectX, points[pointToUse] - rectHeight, rectWidth, rectHeight); } /// oscillator object function osc() { this.variation = 0.4; this.max = 150; this.speed = 0.02; var me = this, a = 0, max = getMax(); this.getAmp = function() { a += this.speed; if (a >= 2.0) { a = 0; max = getMax(); } return max * Math.sin(a * Math.PI); } function getMax() { return Math.random() * me.max * me.variation + me.max * (1 - me.variation); } return this; } function mixer() { var d = arguments.length, i = d, sum = 0; if (d < 1) return 0; while(i--) sum += arguments[i].getAmp(); return sum / d + horizon; } (function animloop(){ requestAnimFrame(animloop); loop(); })(); }//]]> </script> </head> <body> <canvas id="canvas"></canvas> </body> </html>

添加一些内容来使其更加淹没

您还可以为points.length！= 0和（w / points.length）添加安全检查！= 0

以下是工作片段：

/teams/:team_id/invites
/projects/:project_id/invites

使用浮动元素

1 个答案: