JavaScript 波浪

2017-01-13 11:40:20来源:CSDN作者:chy555chy人点击

<html>    <body>        <canvas id="canvas" width="200" height="200" style="border: 1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas>        <script>            (function () {                var c = document.getElementById("canvas");                var ctx = c.getContext("2d");                //波峰或波谷的高度                var waveHeight = 8;                //要显示的波浪个数                var waveCount = 5;                //波长,即两波峰(波谷)之间的距离                var waveLen = c.width / waveCount;                //半波长                var halfWaveLen = waveLen / 2;                //四风之一波长                var quarterWaveLen = halfWaveLen / 2;                //进度条更新步长                var progressStep = 1;                //水平位移步长                var stepX = 1;                //垂直位移步长,容器除以100份,每一份的高度                var stepY = c.height / 100;                //为了让波浪全部消失,必须添加一点额外的进度                var additionProgress = waveHeight / stepY;                //当前波浪起始点X坐标                var startX = -1 * waveLen;                //当前水平面高度                var waterHeight;                //当前进度值(0-100)                var progress;                //当前X坐标                var currentX;                //波峰                var peakY;                //波谷                var troughY;                //绘制颜色                var color;                //hsl                var hue;                var saturation;                var luminance = "50%";                //返回一个随机的RGB颜色                function randomRGBColor() {                    return "rgb(" + Math.round(Math.random() * 255) + "," + Math.round(Math.random() * 255) + "," + Math.round(Math.random() * 255) + ")";                }                //生成随机色相                function randomHue() {                    hue = Math.round(Math.random() * 360);                }                //组合成HSL颜色(注意:SL只能用百分号的形式,小数的形式不合法)                function formHSLColor() {                    saturation = getProgress() + "%";                    console.log(hue+", "+saturation+", "+luminance);                    return "hsl(" + hue + "," + saturation + "," + luminance + ")";                }                //根据当前进度,计算水平面高度                function calcWaterHeight() {                    return (100 - progress) * stepY;                }                //更新                function update() {                    startX += stepX;                    progress += progressStep;                    waterHeight = calcWaterHeight();                    currentX = startX;                    peakY = waterHeight - waveHeight;                    troughY = waterHeight + waveHeight;                    if (progress > 100 + additionProgress) {                        progressStep *= -1;                    }                    if (progress < 0 - additionProgress) {                        progressStep *= -1;                        //color = randomRGBColor();                        randomHue();                    }                    color = formHSLColor();                    if (startX >= 0) {                        startX = -1 * waveLen;                    }                }                //如果是外部要获取当前进度值,必须使用处理之后的progress返回                function getProgress() {                    return progress < 0 ? 0 : (progress > 100 ? 100 : progress);                 }                //渲染                function render() {                    ctx.clearRect(0, 0, c.width, c.height);                    ctx.fillStyle = color;                    ctx.beginPath();                    ctx.moveTo(currentX, waterHeight);                    for(var i = 0; i < waveCount + 1; i++, currentX += waveLen) {                        //绘制波谷                        ctx.quadraticCurveTo(currentX + quarterWaveLen, troughY, currentX + halfWaveLen, waterHeight);                        //绘制波峰                        ctx.quadraticCurveTo(currentX + quarterWaveLen + halfWaveLen, peakY, currentX + waveLen, waterHeight);                    }                    ctx.lineTo(c.width, c.height);                    ctx.lineTo(0, c.height);                    ctx.closePath();                    ctx.fill();                }                //循环                function loop() {                    update();                    render();                    requestAnimationFrame(loop);                }                //初始化                function init() {                    progress = 0;                    //color = randomRGBColor();                    randomHue();                    color = formHSLColor();                    waterHeight = calcWaterHeight();                    loop();                }                init();            })();        </script>    </body></html>

这里写图片描述

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台