<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="apple-mobile-web-app-capable" content="yes"><meta name = "viewport" content = "width = 670">
<title>HTML5 Canvas液体水拖拽与双击后不同动画效果</title>
<link href="styles.css" rel="stylesheet" media="screen" />
</head>
<body>
<div id="panel">
<h2>Canvas 水滴</h2>
<p>双击可以把水滴分离;拖放到一起可以融合;<br/>晃动浏览器可以让水滴跳动;键盘左右键可以切换皮肤;上下键可以变换大小。<br/><b>Shake</b> the browser window to make them bounce.<br/>Use the keyboard <b><a id="keyboardUp" href="#">up</a> / <a id="keyboardDown" href="#">down</a></b> arrows to change blob size and<br/>the <b><a id="keyboardLeft" href="#">left</a> / <a id="keyboardRight" href="#">right</a></b> arrows to change between skins.<br/>适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
</div>
<canvas id="world"><p class="noCanvas">You need a <a href="http://www.xwcms.net">modern browser</a> to view this.</p></canvas>
<script src="blob.min.js"></script>
<script src="jquery-1.9.1.min.js"></script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
</div>
</body>
</html>