当前位置:Aurora network > 教程 > Html5 > 正文
天白

作者:天白

手机扫码查看

教程:Canvas波浪特效实现代码

基于canvas的三次贝塞尔曲线(bezierCurveTo)

<canvas id="myCanvas"></canvas>

<script>

    var WAVE_HEIGHT = 200 //波浪变化高度

    var SCALE = 0.5 // 绘制速率

    var CYCLE = 360 / SCALE

    var TIME = 0

    function initCanvas() {

        var c = document.getElementById("myCanvas")

        var width = window.screen.width

        var height = window.screen.height

        var ctx = c.getContext("2d")

        c.width = width

        c.height = height

        // start

        window.requestAnimationFrame(function() {

            draw(ctx, width, height)

        })

    }

    function draw(ctx, width, height) {

        ctx.clearRect(0, 0, width, height)

        TIME = (TIME + 1) % CYCLE

        var angle = SCALE * TIME // 当前正弦角度

        var dAngle = 60 // 两个波峰相差的角度

        ctx.beginPath()

        ctx.moveTo(0, height * 0.5 + distance(WAVE_HEIGHT, angle, 0))

        ctx.bezierCurveTo(

            width * 0.4,

            height * 0.5 + distance(WAVE_HEIGHT, angle, dAngle),

            width * 0.6,

            height * 0.5 + distance(WAVE_HEIGHT, angle, 2 * dAngle),

            width,

            height * 0.5 + distance(WAVE_HEIGHT, angle, 3 * dAngle)

        )

        ctx.strokeStyle = "#ff0000"

        ctx.stroke()

        ctx.beginPath()

        ctx.moveTo(0, height * 0.5 + distance(WAVE_HEIGHT, angle, -30))

        ctx.bezierCurveTo(

            width * 0.3,

            height * 0.5 + distance(WAVE_HEIGHT, angle, dAngle - 30),

            width * 0.7,

            height * 0.5 + distance(WAVE_HEIGHT, angle, 2 * dAngle - 30),

            width,

            height * 0.5 + distance(WAVE_HEIGHT, angle, 3 * dAngle - 30)

        )

        ctx.strokeStyle = "#0000ff"

        ctx.stroke()

        function distance(height, currAngle, diffAngle) {

            return height * Math.cos((((currAngle - diffAngle) % 360) * Math.PI) / 180)

        }

        // animate

        window.requestAnimationFrame(function() {

            draw(ctx, width, height)

        })

    }

    initCanvas()

</script>
未经允许不得转载:

作者:天白, 转载或复制请以 超链接形式 并注明出处 Aurora network
原文地址:《教程:Canvas波浪特效实现代码》 发布于2019-03-06

分享到:
赞(0) 打赏

评论 抢沙发

7 + 1 =


教程:Canvas波浪特效实现代码

长按图片转发给朋友

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

WEB导航之家

WEB导航之家是汇集全网优质网址及资源的中文上网导航。及时收录博客、论坛、门户、工具等主流分类的网址和内容,让您的网络生活更丰富精彩。上网,从WEB导航之家开始。

申请加入吧

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录