为什么我的小球不会弹回而直接下落呢

来源:8-3 clip和剪辑区域

Forget_淡忘

2016-04-25 20:32

var searchLight = {x:400, y:400, radius:150, vx:Math.random() * 5 + 10, vy:Math.random() * 5 + 10};
            window.onload = function(){
                var canvas = document.getElementById("canvas");
                var context = canvas.getContext("2d");
                setInterval(
                    function(){
                        draw(context);
                        update(canvas.width, canvas.height);
                    },40
                );
            }
            function draw (cxt) {
                var canvas = cxt.canvas;
                cxt.clearRect(0, 0, canvas.width, canvas.height);
                
                cxt.save();
                cxt.beginPath();
                cxt.fillStyle = "#000";
                cxt.fillRect(0, 0, canvas.width, canvas.height);
                
                cxt.beginPath();
                cxt.fillStyle = "#FFF";
                cxt.arc(searchLight.x, searchLight.y, searchLight.radius, 0, Math.PI * 2, false);
                cxt.fill();
                cxt.clip();
                
                cxt.font = "bold 150px Arial";
                cxt.textAlign = "center";
                cxt.textBaseline = "middle";
                cxt.fillStyle = "#058";
                cxt.fillText("CANVAS", canvas.width / 2, canvas.height / 4);
                cxt.fillText("CANVAS", canvas.width / 2, canvas.height / 2);
                cxt.fillText("CANVAS", canvas.width / 2, canvas.height * 3 / 4);
                cxt.restore();
            }
            function update (canvasWidth, canvasHeight) {
                searchLight.x += searchLight.vx;
                searchLight.y += searchLight.vy;
                
                if (searchLight.x - searchLight.radius <= 0) {
                    searchLight.vx = -searchLight.vx;
                    searchLight.x = searchLight.radius;
                }
                
                if (searchLight.x + searchLight.radius >= canvasWidth) {
                    searchLight.vx = -searchLight.vx;
                    searchLight.x = canvasWidth - canvas.radius;
                }
                
                if (searchLight.y - searchLight.radius <= 0) {
                    searchLight.vy = -searchLight.vy;
                    searchLight.y = searchLight.radius;
                }
                
                if (searchLight.y + searchLight.radius >= canvasHeight) {
                    searchLight.vy = -searchLight.vy;
                    searchLight.y = canvasHeight - canvas.radius;
                }
            }



写回答 关注

1回答

  • Forget_淡忘
    2016-04-25 20:40:15

    没问题了,问题解决了......

Canvas绘图详解

Canvas系列教程第二课,详解Canvas各接口,让同学彻底掌握Canvas绘图

72881 学习 · 422 问题

查看课程

相似问题