canvas 3D运动球效果

时间：2016-03-15 18:45:16 阅读：82 评论：0 收藏：0 [点我收藏+]

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>canvas</title>
    <style type="text/css">
    #canvas{
        background-color: #eeeeee;
    }
    </style>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script type="text/javascript">
    window.onload = function(){
        var canvas = document.getElementById("canvas");
        var cobj = canvas.getContext("2d");

        var focusLen = 300;
        var x_3d = 0;
        var y_3d = 0;
        var z_3d = 0;
        var z_speed = 10;

        cobj.translate(250,250);
        setInterval(function(){
            cobj.clearRect(-250,-250,500,500);
            z_3d += z_speed;
            if(z_3d>600 || z_3d<=-260){
                z_speed*=-1;
            }
            var scales = focusLen/(focusLen+z_3d);
            var x = x_3d*scales;
            var y = y_3d*scales;
            cobj.save();
            cobj.translate(x,y);
            cobj.scale(scales,scales);
            cobj.beginPath();
            var colorObj = cobj.createRadialGradient(3,3,0,0,0,15);
            colorObj.addColorStop(0,"#cbc0f3");
            colorObj.addColorStop(1,"#06198b");
            cobj.fillStyle = colorObj;
            cobj.arc(0,0,15,0,2*Math.PI);
            cobj.fill();
            cobj.restore();
        },20);
    }
</script>
</body>
</html>

canvas 3D运动球效果

原文：http://www.cnblogs.com/sunbey/p/5280247.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)