标题有点小题大作了,实际上是实现一张看起来连续的运动背景图片。 效果如下:

 

//

实现原理:

图片1与图片2是两张首尾衔接的图片,图片1以一定速度移出canvas,图片2慢慢移进canvas,当图片1完全移出canvas范围后,立即将图片1位置重置,由于两张图片是首尾衔接的,所以看起来就像是一张无限滚动的地图。

关键代码:

 var c = document.getElementById('c'),    //canvas
ctx = canvas.getContext('2d'),
img = new Image(),
offset = 0,
fps = 60,
speed = 80 / fps; //每帧的速度 img.src = "test.jpg"; function draw(ctx) {
ctx.save();
//offset < c.width ? (offset + speed) : 0
//后者不能简单重置为0,由于速度过快offset可能超过canvas的大小
//故需要计算两者的差值
offset = offset < c.width ? (offset + speed) : (offset - c.width);
//通过translate来实现图片的滚动
ctx.translate(-offset, 0); //只需将图片正常地绘制在画面上即可,不需要操作其位置
ctx.drawImage(img, 0, 0);
ctx.drawImage(img,img.width,0);
ctx.restore();
}
window.onload = function() {
(function() {
ctx.clearRect(0, 0, c.width, c.height);
draw(ctx);
requestAnimationFrame(arguments.callee,c);
})();
};

横向卷轴(side-scrolling)地图的canvas实现的更多相关文章

  1. 高德地图和canvas画图结合应用(一)

    现在重构web项目的时候发现,以前项目中是高德画基站的扇区的时候,通过计算点来画多边形,在站点的数量比较多的时候,会增加请求,同时计算扇区的时候有大量的计算,这样会极度浪费服务器的性能,所以对这块进行 ...

  2. 高德地图和canvas画图结合应用(二)

    上节讲述了如在在高德地图中添加canvas图层,这节就讲述下如何在canvas图层添加鼠标的事件. 在上节脚本的最后加入以下代码: var text; $('#container').on('clic ...

  3. 中国地图 xaml Canvas

    <Canvas x:Name="LayoutRoot"  Height="560" Width="700" Background=&q ...

  4. 赠书:HTML5 Canvas 2d 编程必读的两本经典

    赠书:HTML5 Canvas 2d 编程必读的两本经典 这两年多一直在和HTML5 Canvas 打交道,也带领团队开发了世界首款基于HTML5 Canvas 的演示文档工具---AxeSlide( ...

  5. 《HTML5 CANVAS基础教程》读书笔记

    一.HTML5简介 1.HTML5新特性 1)结构元素:section,header,hgroup,footer,nav,article,aside, 2)内容元素:figure,figcaption ...

  6. canvas模拟中国铁路运行图

    原理说明 1.在知道canvas画布尺寸的情况下,需要将地理经纬度信息转换为canvas画布x,y坐标,因为中国地图地理经纬度坐标取值范围为73.33-135.05(经度)37-50(维度),所以第一 ...

  7. HTML5 中canvas支持触摸屏的签名面板

    1.前言 最近实在是太忙了,从国庆之后的辞职,在慢慢的找工作,到今天在现在的这家公司上班大半个月了,太多的心酸泪无以言表,面试过程中,见到的坑货公司是一家又一家,好几家公司自己都只是上一天班就走了,其 ...

  8. 从flexible.js引入高德地图谈起的移动端适配

    曾几何时,前端还仅仅是PC端的.随着移动时代的兴起,h5及css3的推陈出新.前端的领域慢慢的由传统的pc端转入了移动端,这也导致了前端这一职业在风口的一段时间出尽了风头. 从开始的惶恐和无从下手,慢 ...

  9. Canvas范围裁切和几何变换

    范围裁切 clipRect() canvas.save(); canvas.clipRect(left, top, right, bottom); canvas.drawBitmap(bitmap, ...

随机推荐

  1. 【CF56E】Domino Principle(线性扫描,伪DP)

    每块多米诺骨牌所在的位置设为x,每块多米诺骨牌高度为h.如果将x位置上的多米诺骨牌向右翻到,它就可以影响[x+1, x+h-1]范围内的所有多米诺骨牌,让他们也翻到,同时这些被翻到的多米诺骨牌还能影响 ...

  2. Codeforces663E. Binary Table

    $n \leq 20,m \leq 100000$的01矩阵,可整行整列01翻转,问最少剩几个1. 一个暴力的做法是枚举$2^n$种行翻转然后$m$列扫一遍.但其实在行翻转情况确定的情况下我们只关心两 ...

  3. 【Visual Studio】Tab 转换为空格的设置

    在 Visual Studio 中写代码时,按 Tab 键,会自动进行缩进.有时希望实现按 Tab 键,出现多个空格的效 果.Visual Studio 提供了这样的功能,具体设置方法为:打开 “To ...

  4. ROS学习网址【原创】

    ROS学习网址 http://www.ros.org/ http://www.ros.org/news/book/ http://wiki.ros.org/ http://blog.exbot.net ...

  5. LeetCode OJ——Convert Sorted List to Binary Search Tree

    http://oj.leetcode.com/problems/convert-sorted-list-to-binary-search-tree/ 将一个按照元素升序排列的链表转换成BST.根据自身 ...

  6. Codeforces 696E ...Wait for it...(树链剖分)

    题目链接  ...Wait for it... 考虑树链剖分. 对于树上的每个点开一个set,记录当前该节点上所有的girls. 每个节点初始的权值为set中的最小值. 询问的时候每次在路径上寻找最小 ...

  7. GitHub 上受欢迎的 Android UI Library 整理二

    通知 https://github.com/Tapadoo/Alerter ★2528 - 克服Toast和Snackbar的限制https://github.com/wenmingvs/Notify ...

  8. Codeforces Gym 100431B Binary Search 搜索+组合数学+高精度

    原题链接:http://codeforces.com/gym/100431/attachments/download/2421/20092010-winter-petrozavodsk-camp-an ...

  9. luogu P2894 [USACO08FEB]酒店Hotel

    题目描述 The cows are journeying north to Thunder Bay in Canada to gain cultural enrichment and enjoy a ...

  10. java反射原理运用

    1.首先用Java反射机制的要做到的一个目的:我们都知道通过得到一个对象中的指定方法或者属性等,基于这个原理我们来做一个 通用的功能,让客户端可以通过传入的对象和一个标识去调用这个对象里自己想要的方法 ...