今天一直在找html5 canvas的使用实例。想画一张地图，再画个小车在上面跑。运气好找到了一个大神写的js代码。该代码实现了图片的左右来回滚动，现在粘贴在博客里记录一下：

<html>

<head>

<meta charset="utf-8" />

<title>LScroll5.html</title>

<script type="text/javascript">

	var LScroll = {

		img : null,

		sc : null,

		scx : null,

		at : 0,

		flag : true,

		loadImg : function(srcs, callback) {

			var mg = new Image();

			mg.src = srcs;

			mg.onload = function() {

				callback(this);

			}; // callback function

			return LScroll.img = mg;

		},

		init : function(srcs) {

			if (!document.body)

				document.createElement('body');

			if (!LScroll.sc) {

				var sc = document.createElement('canvas');

				LScroll.scx = sc.getContext('2d');

				var callback = function(imgs) { // after onload image can be draw

					sc.width = imgs.width / 4;

					sc.height = imgs.height; //not style.

					sc.style.backgroundColor = 'black';

					sc.style.border = 'solid 1px white';

					document.body.style.backgroundColor = 'black';

					document.body.style.textAlign = 'center';

					document.body.appendChild(LScroll.sc = sc);

					LScroll.draw(LScroll.sc, LScroll.scx);

				};

				LScroll.loadImg(srcs, callback);

			}

		},

		draw : function(sc, scx) {

			scx.clearRect(0, 0, sc.width, sc.height);

			scx.save();

			scx.beginPath();

			switch (LScroll.flag) {

			case true:

				if (-LScroll.at == LScroll.img.width - sc.width)

					LScroll.flag = !LScroll.flag;

				LScroll.at--;

				break;

			case false:

				if (LScroll.at == 0)

					LScroll.flag = !LScroll.flag;

				LScroll.at++;

			}

			scx.drawImage(LScroll.img, LScroll.at, 0);

			scx.restore();

			setTimeout(function() {

				LScroll.draw(sc, scx);

			}, 10);

		}

	};

	window.onload = function() {

		LScroll.init('road-map.png');

	};

</script>

</head>

<body>

</body>

</html>

图片是运行的效果。

Html5 Canvas 实现滚动的图片的更多相关文章

  1. 解决html5 canvas 绘制字体、图片与图形模糊问题

    html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...

  2. html5 canvas 自定义画图裁剪图片

    html5 给我们带来了极大惊喜的canvas标签,有了它我们可以在浏览器客户端处理图片,不需要经过服务器周转.可以实现: 1.照片本地处理,ps有的一些基本功能都有 2.结合js可以实现一些很炫的动 ...

  3. HTML5 程序设计 - 使用HTML5 Canvas API

    请你跟着本篇示例代码实现每个示例,30分钟后,你会高喊:“HTML5 Canvas?!在哥面前,那都不是事儿!” 呵呵.不要被滚动条吓到,很多都是代码和图片.我没有分开写,不过上面给大家提供了目录,方 ...

  4. 8个经典炫酷的HTML5 Canvas动画欣赏

    HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮 ...

  5. 基于HTML5 Canvas实现的图片马赛克模糊特效

    效果请点击下面网址: http://hovertree.com/texiao/html5/1.htm 一.开门见山受美国肖像画家Chuck Close的启发,此脚本通过使用HTML5 canvas元素 ...

  6. HTML5 CANVAS 实现图片压缩和裁切

    原文地址:http://leonshi.com/2015/10/31/html5-canvas-image-compress-crop/?utm_source=tuicool&utm_medi ...

  7. 使用html5 canvas绘制图片

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  8. 将HTML5 Canvas的内容保存为图片借助toDataURL实现

    将HTML5 Canvas的内容保存为图片主要思想是借助Canvas自己的API - toDataURL()来实现,具体实现如下,感兴趣的朋友可以参考下哈,希望对你有所帮助 <html> ...

  9. 基于html5页面滚动背景图片动画效果

    基于html5页面滚动背景图片动画效果是一款带索引按钮的页面滚动动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id="fullpage&q ...

随机推荐

  1. onActivityResult不执行 或者 onActivityResult的解决方法

    开发人员都知道,可以通过使用 startActivityForResult() 和 onActivityResult() 方法来传递或接收参数.然而在一次使用中,还没等到被调用的 Activity 返 ...

  2. POJ 2449 Remmarguts' Date （SPFA + A星算法） - from lanshui_Yang

    题目大意:给你一个有向图,并给你三个数s.t 和 k ,让你求从点 s 到 点 t 的第 k 短的路径.如果第 k 短路不存在,则输出“-1” ,否则,输出第 k 短路的长度. 解题思路:这道题是一道 ...

  3. php增删改查，自己写的demo

    1.链接数据库通用方法:conn.php <?php //第一步:链接数据库 $conn=@mysql_connect("localhost:3306","root ...

  4. C++11 : 外部模板（Extern Template）

    在C++98/03语言标准中,对于源代码中出现的每一处模板实例化,编译器都需要去做实例化的工作:而在链接时,链接器还需要移除重复的实例化代码.显然,让编译器每次都去进行重复的实例化工作显然是不必要的, ...

  5. Linux驱动开发常用头文件

    头文件目录中总共有32个.h头文件.其中主目录下有13个,asm子目录中有4个,linux子目录中有10个,sys子目录中有5个.这些头文件各自的功能如下: 1.主目录 <a.out.h> ...

  6. SSH Secure Shell Client连接Linux 命令行显示中文乱码问题 和oracle 查询数据中文乱码问题

    一.SSH Secure Shell Client连接Linux 命令行显示中文乱码问题 linux 设置系统语言 修改 /etc/sysconfig/i18n 文件,如 LANG="en_ ...

  7. iOS_SN_LLDB常用命令

    有一次因为封装一个控件,UI能正常显示就是不能点击,一点击就崩溃,而且异常断点也无法捕捉,把Xcode的僵尸对象打开,每次崩溃就打印一个地址,最后就必须根据地址寻找对象,可以使用frame varia ...

  8. pch文件出现no such file or directory错误

    一般出现这种情况是由于项目直接拷贝到其他电脑上运行... clang: error: no such file or directory: '/demo2/控件代码/13/Recorder/Recor ...

  9. C#高级知识点概要(1) - 委托和事件

    本文目录: 委托 委托的简单使用 用委托实现插件式编程 多播委托 静态方法和实例方法对于委托的区别 泛型委托 Func 和 Action 委托 委托的兼容 事件 事件的基本使用 事件的标准模式 委托 ...

  10. QML学习心得

    Qt Quick之于QML,正如Qt 之于 C++,QML是Qt中开发的一个新的语言,而Qt Quick是这个语言的一个组件库,其中包含了很多用QML写的可以现成使用的组件. QML Hello Wo ...