canvas教程

html5版canvas自由拼图实例(3)

字号+ 作者:H5之家 来源:H5之家 2015-11-20 13:49 我要评论( )

!DOCTYPE html html head meta http-equiv="Content-Type" content="text/html; charset=UTF-8" titleInsert title here/title link type="text/css" href="html5_puzzle.css" / script type="text/javascript" src

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link type="text/css" href="html5_puzzle.css" />
<script type="text/javascript" src="../multi_upload/seed.js"></script>
<script type="text/javascript" src='html5_puzzle.js'></script>
</head>
<body>
<div>
<div>
<div>
<ul>
<li><img src='small_img/1.jpg' data-index='1' /></li>
<li><img src='small_img/2.jpg' data-index='2' /></li>
<li><img src='small_img/3.jpg' data-index='3' /></li>
<li><img src='small_img/4.jpg' data-index='4' /></li>
<li><img src='small_img/5.jpg' data-index='5' /></li>
</ul>
</div>
<div>
<ul>
<li><img src='small_img/6.jpg' data-index='6' /></li>
<li><img src='small_img/7.jpg' data-index='7' /></li>
<li><img src='small_img/8.jpg' data-index='8' /></li>
<li><img src='small_img/9.jpg' data-index='9' /></li>
<li><img src='small_img/10.jpg' data-index='10' /></li>
</ul>
</div>
</div>
<div>
<div>
<canvas></canvas>
<div>
<a href='javascript:void(0)'>删除</a> <a
href='javascript:void(0)'>更改图片</a>
</div>
</div>
<img src="big_img/1.jpg" />
</div>
<div>
<a href='javascript:void(0)'><span>添加图片</span><input
type="file" multiple=""> </a> <a
href='javascript:void(0)'>上传</a> <a>点击图片可以旋转,拖拽,
缩放哦!</a>
</div>
</div>
<input type="file">
<canvas></canvas>
</body>
</html>

html5_puzzle.css代码如下:


复制代码

代码如下:

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • html5canvas核心技术图形、动画与游戏开发源码

    html5canvas核心技术图形、动画与游戏开发源码

    2017-05-02 17:42

  • 打印html5中Canvas的方法

    打印html5中Canvas的方法

    2017-05-01 15:03

  • HTML5+Canvas调用手机拍照功能实现图片上传(下)

    HTML5+Canvas调用手机拍照功能实现图片上传(下)

    2017-04-30 17:00

  • HTML5新特性详解(三)

    HTML5新特性详解(三)

    2017-04-30 16:03

网友点评