html5 画布上的rotate使用

作为刚进公司的毕业生，第一个项目便是开发html5游戏，于是网上搜寻各种有关html5的资料，把w3School中有关html5的教程通通过了一遍，发现里面的教程非常适合刚接触html5的人，作为菜鸟的我看了各种资料终于有所领会，作为游戏开发，其实就是通过JavaScript对html5 中Canvas画布进行各种处理，之后又在网上搜了一些有关html5 游戏Demo,其中有类似贪吃蛇，超级玛丽这样的，之后自己也尝试写了个Demo,是关于摇摆Rotate，伸长以及碰撞到物体检测。

先附上绳子摇摆rotate代码，过段时间再加上伸长和碰撞检测代码(在网上随便找了两张图片在代码下方)：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
        <canvas id="canvas"></canvas>
</body>
<script>
        // 设置定时器用来控制旋转
        var interval;
        // 绳子摇摆的角度
        var angle = 0;
        // 接在绳子上钩子摇摆角度
        var hookAngle = 0;
        // 控制摇摆的变量
        var i = 1;
        var flag = 1;
        // 获得画布
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
        // 获得绳子图片   
        var line = new Image();
        line.src = "line.png";
        line.width = 100;
        // 获得钩子图片
        var hook = new Image();
        hook.src = "laoshu.png";
        
        // 定时器重复执行animate方法
        function animate() {
                lineRotate();
                clearInterval(interval);
                interval = setInterval("animate()", 50);
        }
        
        // 绳子摇摆 
        function lineRotate(){
                if (angle > Math.PI / 2) {
                        flag = -1;
                } else if (angle < 0){
                        flag = 1;
                }
                if (flag == 1) {
                        i = 1;
                } else {
                        i = -1;
                }
                angle +=  i*Math.PI / 180;
                draw();
        }
        
        //画图 
        function draw() {
                context.clearRect(0,0,canvas.width, canvas.height);
                context.translate(0,0);
                context.save();
                context.rotate(angle);
                context.drawImage(line, 0 , 0, line.width, line.height);
                context.save();
                context.translate(line.width + hook.width / 2, hook.height / 2);  
                context.rotate(-angle);
                context.drawImage(hook, -hook.width / 2, -hook.height / 2);
                context.restore();
                context.restore();
        }
</script>
</html>

line.png:   
laoshu.png:

爱程序网

Tags：[db:关键字]