作为刚进公司的毕业生，第一个项目便是开发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:

html5 画布上的rotate使用的更多相关文章

  1. 玩转html5（二）----用canvas结合脚本在画布上画简单的图（html5又一强大功能）

    在html5中可以使用canvas标签在画布上画图,先直接上代码,这篇文章先简单介绍一下canvas的使用方法,简单画几个圆,矩形,三角形,写字. 在代码中均给出了注释,在这里特别强调的一点是:使用c ...

  2. 有趣html5（两）----使用canvas结合剧本画在画布上的简单图（html5另一个强大）

    请珍惜劳动小编成果,这篇文章是原来小编,转载请注明出处. 于html5中能够使用canvas标签在画布上绘图,先直接上代码,这篇文章先简介一下canvas的用法.简单画几个圆,矩形,三角形,写字. 在 ...

  3. 哪个HTML5内建对象用于在画布上绘制？（）

    哪个HTML5内建对象用于在画布上绘制?() getContent getContext getGraphics getCanvas 我的理解: A.C.D不存在HTML5,,js方法中 HTML 5 ...

  4. 06. Web大前端时代之：HTML5+CSS3入门系列~HTML5 画布

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 我们先看看画布的魅力: 初始画布 canvas默认是宽3 ...

  5. HTML5 画布参考

    描述 HTML5 <canvas> 标签用于绘制图像(通过脚本,通常是 JavaScript). 不过,<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器) - 您必 ...

  6. HTML5画布实现方法：

    我们可以在HTML中使用属性width和height来定义Canvas.但是实现Canvas的相关功能主要还依赖于Javascript实现,即HTML5 Canvas API.我们使用javascri ...

  7. HTML5画布Canvas

    一.Canvas概念介绍 1.概念 Canvas : 画布 2.作用 : HTML5 Canvas 元素用于图形的绘制, 通过脚本(通常是JavaScript)来完成.它本身只是个图形容器,必须使用脚 ...

  8. File控件选择图片的时候在Html5下马上预览

    页面HTML <div> <img src="@pic.Path" id="img" style="width:200px;heig ...

  9. html5 图片上传，支持图片预览、压缩、及进度显示，兼容IE6+及标准浏览器

    以前写过上传组件,见 打造 html5 文件上传组件,实现进度显示及拖拽上传,兼容IE6+及其它标准浏览器,对付一般的上传没有问题,不过如果是上传图片,且需要预览的话,就力有不逮了,趁着闲暇时间,给上 ...

随机推荐

  1. Android事件监听器Event Listener

    在 Android 中,我们可以通过事件处理使UI与用户互动(UI Events). UI的用户事件处理,即View处理用户的操作,在应用程序中几乎不可避免.View是重要的类,它是与用户互动的前线: ...

  2. GPIO的8种模式详解

    和stm32的GPIO相关的寄存器有 (1)两个32位的配置寄存器(GPIOX_CRL,GPIOX_CRH) 每一个IO占用4位,16个IO占用64位就是两个32为寄存器. 其中CNF[1:0]是用来 ...

  3. CentOS 6.5 + Nginx 1.8.0 + PHP 5.6(with PHP-FPM) 负载均衡源码安装 之 （三）Nginx负载均衡配置

    Nginx反向代理到单个PHP-FPM(PHP-FPM可位于不同机器) 0.首先,创建我们的网站根目录[注:须在PHP-FPM所在的那台机器创建](以后网站的代码放到此目录下): mkdir /opt ...

  4. uva 10026 Shoemaker's Problem

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...

  5. CRegKey 注册表操作

    CRegKey 注册表操作 标签: accessnulluserpathbyteie 2011-11-03 13:55 3477人阅读 评论(0) 收藏 举报  分类: win32(7)  1.简介 ...

  6. Windows 系统版本判断

    Windows 系统版本判断 博客分类: C/C++   很多情况下,需要软件判断操作系统,其实网上写的都很少,我希望这篇文章能给大家帮助 首先我们要在.h中定义下面的东西 #define PRODU ...

  7. HDU_1010——小狗走迷宫DFS

    Problem Description The doggie found a bone in an ancient maze, which fascinated him a lot. However, ...

  8. Nginx缓存解决方案：SRCache

    前些天帮别人优化PHP程序,搞得灰头土脸,最后黔驴技穷开启了FastCGI Cache,算是勉强应付过去了吧.不过FastCGI Cache不支持分布式缓存,当服务器很多的时候,冗余的浪费将非常严重, ...

  9. Java 8 默认方法和多继承深入解析

    以前经常谈论的Java对比c++的一个优势是Java中没有多继承的问题. 因为Java中子类只能继承(extends)单个父类, 尽管可以实现(implements)多个接口,但是接口中只有抽象方法, ...

  10. Java语言实现简单FTP软件------>上传下载队列窗口的实现（七）

    1.首先看一下队列窗口的界面 2.看一下上传队列窗口的界面 3.看一下下载队列窗口的界面 4.队列窗口的实现 package com.oyp.ftp.panel.queue; import stati ...