var canvas = document.getElementById('canvas');
var cxt = canvas.getContext('2d');

var timer;
var iStop = false;
var rotateSpeed = 0;
var endLines = [{'deg':0},{'deg':90},{'deg':180},{'deg':270}];
var runSpeed = 0;
var runLines = [{'x1':300,'y1':600, 'x2':300, 'y2':500, 'speed':0}];

function draw(){
cxt.save();
cxt.translate(300, 300);
cxt.rotate(rotateSpeed*Math.PI/180);
cxt.beginPath();
cxt.arc(0, 0, 50, 0, 360*Math.PI/180, false);
cxt.stroke();
cxt.closePath();

for(var i=0; i<endLines.length; i++){
cxt.save();
cxt.rotate(endLines[i].deg*Math.PI/180);
cxt.beginPath();
cxt.moveTo(50, 0);
cxt.lineTo(150, 0);
cxt.stroke();
cxt.closePath();
cxt.restore();
}
cxt.restore();

for(var j=0; j<runLines.length; j++){
cxt.save();
cxt.beginPath();
cxt.moveTo(runLines[j].x1, runLines[j].y1);
cxt.lineTo(runLines[j].x2, runLines[j].y2);
cxt.stroke();
cxt.closePath();
cxt.restore();
}

var _runLines = [];
for(var k=0; k<runLines.length; k++){
if(runLines[k].y2 < 450){
for(var m=0; m<endLines.length; m++){
if((endLines[m].deg + rotateSpeed)%360 == 90){
iStop = true;
}
}
}
if(runLines[k].y2 == 350){
endLines.push({'deg':90-rotateSpeed});
}else{
runLines[k].y1 -= runLines[k].speed;
runLines[k].y2 -= runLines[k].speed;
_runLines.push(runLines[k]);
}
}
runLines = _runLines;

if((++rotateSpeed) == 360){
rotateSpeed = 0;
}

}

function erase(){
cxt.clearRect(0, 0, canvas.width, canvas.height);
}

document.onmousedown = function(){
runLines.push({'x1':300,'y1':600, 'x2':300, 'y2':500, 'speed':10});
};

window.requestAnimationFrame =
window.requestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.msRequestAnimationFrame;

window.cancelRequestAnimationFrame =
window.cancelRequestAnimationFrame ||
window.mozCancelRequestAnimationFrame ||
window.webkitCancelRequestAnimationFrame ||
window.msCancelRequestAnimationFrame;

function animate() {
erase();
draw();
if(iStop){
cancelRequestAnimationFrame(timer);
}else{
timer = requestAnimationFrame(animate);
}
}

animate();

canvas 实现微信小游戏的更多相关文章

  1. 微信小游戏开发Canvas资源汇总

    Demo: 微信小程序demo组件:股票分时图 微信小程序小组件:仿直播点赞气泡效果,基于Canvas 优质demo推荐:二维码生成器:使用canvas与纯JS版二维码生成 微信小程序学习用完整dem ...

  2. 微信小游戏canvas操作

    这几天在做项目的时候,想在游戏画面之前,在Canvas上面画上一张背景图,代码如下     let ctx = canvas.getContext('2d')    export default cl ...

  3. 微信小游戏排行榜页滚动查看排行榜(canvas指定区域溢出滚动,懒渲染)

    在微信小游戏中,好友排名数据是能在关系数据域操作,整个关系数据域只会返回一个最终的sharedCanvas,并且这个canvas不能调用toDataURL()方法,所以要展示好友排行榜的话只能在关系数 ...

  4. 【转】利用 three.js 开发微信小游戏的尝试

    前言 这是一次利用 three.js 开发微信小游戏的尝试,并不能算作是教程,只能算是一篇笔记吧. 微信 WeChat 6.6.1 开始引入了微信小游戏,初期上线了一批质量相当不错的小游戏.我在查阅各 ...

  5. 微信小游戏开发之四:使用three.js引擎

    一.前言 微信小游戏中最魔性的'跳一跳'就是基于three.js 引擎开发的 源码放到github上了:GitHub地址   请自行下载. 二.下载 three.min.js 打开页面,复制代码到本地 ...

  6. 使用Laya引擎开发微信小游戏(上)

    本文由云+社区发表 使用一个简单的游戏开发示例,由浅入深,介绍了如何用Laya引擎开发微信小游戏. 作者:马晓东,腾讯前端高级工程师. 微信小游戏的推出也快一年时间了,在IEG的游戏运营活动中,也出现 ...

  7. three.js 微信小游戏

    最近在 https://classroom.udacity.com/courses/cs291 学习了一些 3D 引擎和 three.js 的知识 把 three.js 弄到微信小游戏里,先随便跑一跑 ...

  8. .Net Core ORM选择之路,哪个才适合你 通用查询类封装之Mongodb篇 Snowflake(雪花算法)的JavaScript实现 【开发记录】如何在B/S项目中使用中国天气的实时天气功能 【开发记录】微信小游戏开发入门——俄罗斯方块

    .Net Core ORM选择之路,哪个才适合你   因为老板的一句话公司项目需要迁移到.Net Core ,但是以前同事用的ORM不支持.Net Core 开发过程也遇到了各种坑,插入条数多了也特别 ...

  9. Egret5.2.2 微信小游戏行的示例排行榜

    Egret5.2.2版本发布微信小游戏后,在开放数据域有一个默认排行榜.这个文件夹代码+图大小就22kb. 排行榜的效果就是示范用的,很丑...带翻页. 代码如下,基本就是使用canvas渲染了一个排 ...

随机推荐

  1. 使用scaleBitmap类缩放和拉伸

    使用scaleBitmap类缩放和拉伸 位图,画架,图形,小贴士我们一直在寻找在createJS中优化.简化或创建更好工作流的方法,scaleBitmap就是一个很好的例子.使用旧的flash方法,在 ...

  2. 原生js实现一个简单的轮播图

    想锻炼一下自己的原生js能力可以从写一个轮播图开始,轮播图的运用想必大家都知道吧,好了废话不多说,开始记笔记了,一些需要注意的点,我都在代码中标注了 首先是构造html: <div id=&qu ...

  3. 聚合查询、分组查询、F&Q查询

    一.聚合查询和分组查询 1.aggregate(*args, **kwargs): 通过对QuerySet进行计算,返回一个聚合值的字典.aggregate()中每个参数都指定一个包含在字典中的返回值 ...

  4. mac上将代码上传到github

    前言 有时我们会写一些小程序来学习新的知识,但是完事之后过一段时间可能会忘记,最好的办法就是找到原来的代码看一看.现在可以将代码免费托管到一些网站上,其中最著名的非github莫属了, 今天就把这个过 ...

  5. [剑指Offer]27-二叉树的镜像

    题目链接 https://www.nowcoder.com/practice/564f4c26aa584921bc75623e48ca3011?tpId=13&tqId=11171&t ...

  6. ubuntu系列-安装jdk以及eclipse(for C++)

    1.安装jdk eclipse是使用java语言开发的,一个java应用程序的运行要在java虚拟机下.在没有安装jdk的前提下,即使在ubuntu上安装了eclipse也不能使用. (1)首先在官网 ...

  7. 34-BigInteger详解

    在用C或者C++处理大数时感觉非常麻烦,但是在Java中有两个类BigInteger和BigDecimal分别表示大整数类和大浮点数类,至于两个类的对象能表示最大范围不清楚,理论上能够表示无线大的数, ...

  8. go语言net包udp socket的使用

    udp与tcp的不同在于客户端请求方式不同,udp缺少Accept函数. 一个简单的udp客户端: package main; import ( "net" "log&q ...

  9. css外层透明,内层不透明

    外层div透明使用:background: rgba(0, 0, 0, 0.5); 内层div透明使用:opacity:1; 这么样就可以了.不要外层使用opacity,会影响内层也透明的.主要是rg ...

  10. linux minitools+minicom 安装及使用

    1,通过SSH将minitools的安装包传到ubuntu 文件下, 2,   解压minitools.tgz  (具体方法见上一篇) 3,命令安装minicom  :   apt-get insta ...