作为刚进公司的毕业生,第一个项目便是开发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. Java中是否可以调用一个类中的main方法?

    前几天面试的时候,被问到在Java中是否可以调用一个类中的main方法?回来测试了下,答案是可以!代码如下: main1中调用main2的主方法 package org.fiu.test; impor ...

  2. RxAndroid+Retrofit+MVVM(1)OKHttp

    1)Gradlecompile 'com.squareup.okhttp:okhttp:2.4.0'compile 'com.squareup.okio:okio:1.5.0' 2)Get //创建o ...

  3. Python 基礎 - 文件的操作

    在來我們來玩一下文件操作,這個在未來工作上,也是會很常用到的功能 Python2.7中,可以用file()來打開文件,而在Python3中,一律都是用open(),接下來在當前目錄下,先建立一個空文件 ...

  4. LESS速查

    注释 缓存式注释/*注释内容*/  非缓存式注释//注释内容 变量 @nice-blue: #5B83AD; @light-blue: @nice-blue + #111; #header { col ...

  5. Java面向对象三大特点之继承

    概念: 继承就是子类继承父类的特征和行为,使得子类对象(实例)具有父类的实例域和方法,或子类从父类继承方法,使得子类具有父类相同的行为. 生活中的继承: 兔子和羊属于食草动物类,狮子和豹属于食肉动物类 ...

  6. 夺命雷公狗---Thinkphp----10之后台登录.注销一条龙

    首先我们还是还是写一个控制器名字叫LoginController.class.php的控制器,首先来写一个code的方法来让验证码先显示出来: public function Code(){ //创建 ...

  7. 深入分析iSCSI协议的应用

    深入分析iSCSI协议的应用 1 引言 快速增长的存储容量使得企业需要采用网络存储解决方案.目前网络存储技术采用的连接技术主要有光纤通道和TCP/IP.基于IP的网络存储能解决基于光纤通道的网络存储中 ...

  8. 33c3-pwn350-tea

    TEA 感觉这个题目出得很不错.先运行程序了解基本功能,程序可以读取对系统上存在的文件的内容,如果文件不存在的话,直接退出. 使用IDA打开后,发现父进程通过clone api克隆出一个子进程,主要的 ...

  9. SHELL脚本--expr命令全解

    bash&shell系列文章:http://www.cnblogs.com/f-ck-need-u/p/7048359.html expr命令可以实现数值运算.数值或字符串比较.字符串匹配.字 ...

  10. (转)第十一篇:springboot集成swagger2,构建优雅的Restful API

    声明:本部分内容均转自于方志明博友的博客,因为本人很喜欢他的博客,所以一直在学习,转载仅是记录和分享,若也有喜欢的人的话,可以去他的博客首页看:http://blog.csdn.net/forezp/ ...