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

 

//

实现原理:

图片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. 用Keepalived搭建双Nginx server集群,防止单点故障

    综述: 浏览器访问虚拟IP: 192.168.1.57, 该虚拟IP被Keepalived接管,两个Keepalived进程分别运行在物理IP为192.168.1.56和192.168.1.59服务器 ...

  2. docker 镜像阿里加速器

    1.登录 https://cr.console.aliyun.com/#/imageList 2.点击加速器tab,获取自己的加速器地址,然后执行黑框内的命令. .sudo mkdir -p /etc ...

  3. hdu 4305 生成树计数问题

    Lightning Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total S ...

  4. DispatcherServlet与ContextLoaderListener的对比

    1. 从DispatcherServlet和ContextLoaderListener的初始化过程可以看出,二者分别会生成一个WebApplicationContext,且以不同的attrName注册 ...

  5. 【CF1023C】Bracket Subsequence(模拟)

    题意:给定一个正则括号序列 s ,让你在当中选择一个长度正好为 t 的子串,使得 t 恰好也是一个正则括号序列 思路:用栈模拟 #include<cstdio> #include<c ...

  6. 【BZOJ4472】salesman(树形DP)

    题意: 给定一颗有点权的树,每个树上的节点最多能走到lim[u]次,求一条路径,使路径上的点权和最大,每个节点上的点权如果走了多次只能算一次.还要求方案是否唯一. 思路:每个点只能取lim[u]-1个 ...

  7. luogu 1354 房间最短路问题 线段与直线相交 最短路

    题目链接 题目描述 在一个长宽均为10,入口出口分别为(0,5).(10,5)的房间里,有几堵墙,每堵墙上有两个缺口,求入口到出口的最短路经. 输入输出格式 输入格式: 第一排为n(n<=20) ...

  8. Python日志(logging)模块使用方法简介

    A logger is configured to have a log level. This log level describes the severity of the messages th ...

  9. Java原来如此-随机数

    在Java中,生成随机数有两种方法.1是使用Random类.2是使用Math类中的random方法. 我们现在做个例子,比如生成20个0到10之间的随机数. 1.使用Random类的nextInt(n ...

  10. 第三章 poj 1064——关于带精度的二分法

    /* 题意:给定n个实数l[i],给定一个k 问:求最大的ans,使得sum l[i]/ans i=1 to n >=k,且ans最大*/ #include <iostream> # ...