k3d实现光照光源旋转canvas动画背景效果代码-html代码-BFW代码库

k3d实现光照光源旋转canvas动画背景效果代码

代码语言：html

所属分类：动画

代码描述：k3d实现光照光源旋转canvas动画背景效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
      <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/mathlib-min.js"></script>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/k3d-min.js"></script>
<style>
    #canvas{
        height: 100vh;
    }
</style>
    <script type="text/javascript">

        // 监听页面加载处理
        window.addEventListener('load', onloadHandler, false);


        // 页面加载处理

        function onloadHandler() {
            var canvas = document.getElementById('canvas');
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            var k3dmain = new K3D.Controller(canvas, true);

            // 添加页面渲染循环回调函数
            var ctx = canvas.getContext('2d');
            var rotationOffset = 0;
            var len = (canvas.height > canvas.width ? canvas.height: canvas.width) * 0.7;
            k3dmain.clearBackground = false;
            k3dmain.callback = function() {
                // 清除画布
                ctx.clearRect(0, 0, canvas.width, canvas.height);

                // 绘制3d效果
                ctx.save();
                ctx.translate(canvas.width/2, canvas.height/2);
                ctx.rotate(rotationOffset);

                // 绘制辐射条
                var RAYCOUNT = 24;
                ctx.fillStyle = "#fdd971";
                ctx.beginPath();
                for (var i = 0; i < RAYCOUNT; i++) {
                    ctx.rotate(TWOPI / RAYCOUNT.........完整代码请登录后点击上方下载按钮下载查看