8个最新炫酷的HTML5动画应用

http://www.php100.com/html/it/qianduan/2015/0107/8281.html

另外一个画板demo

http://www.oschina.net/code/snippet_221942_46198

<!DOCTYPE html>

<html>

<head>

<title>h5 demo</title>

</head>

<body>

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body oncontextmenu="return false;" onselectstart="return false;">

<canvas id='canvas' style="border:2px solid blue;margin:2px"></canvas>

<div>

<button id='c'>clear</button>

</div>

<script>

var canvas = document.getElementById('canvas');

canvas.addEventListener('mousemove', onMouseMove, false);

canvas.addEventListener('mousedown', onMouseDown, false);

canvas.addEventListener('mouseup', onMouseUp, false);

canvas.addEventListener('touchstart',onMouseDown,false);

canvas.addEventListener('touchmove',onMouseMove,false);

canvas.addEventListener('touchend',onMouseUp,false)

canvas.height = ;

canvas.width = getWidth() - ;

var ctx = canvas.getContext('2d');

ctx.lineWidth = 3.0; // 设置线宽

ctx.strokeStyle = "#CC0000"; // 设置线的颜色

var flag = false;

function onMouseMove(evt)

{

evt.preventDefault();

if (flag)

{

var p = pos(evt);

ctx.lineTo(p.x, p.y);

ctx.lineWidth = 6.0; // 设置线宽

ctx.shadowColor = "#CC0000";

ctx.shadowBlur = ;

//ctx.shadowOffsetX = 6;

ctx.stroke();

}

}

function onMouseDown(evt)

{

evt.preventDefault();

ctx.beginPath();

var p = pos(evt);

ctx.moveTo(p.x, p.y);

flag = true;

}

function onMouseUp(evt)

{

evt.preventDefault();

flag = false;

}

var clear = document.getElementById('c');

clear.addEventListener('click',function()

{

ctx.clearRect(, , canvas.width, canvas.height);

},false);

function pos(event)

{

var x,y;

if(isTouch(event)){

x = event.touches[].pageX;

y = event.touches[].pageY;

}else{

x = event.layerX;

y = event.layerY;

}

return {x:x,y:y};

}

function isTouch(event)

{

var type = event.type;

if(type.indexOf('touch')>=){

return true;

}else{

return false;

}

}

function getWidth()

{

var xWidth = null;

if (window.innerWidth !== null) {

xWidth = window.innerWidth;

} else {

xWidth = document.body.clientWidth;

}

return xWidth;

}

</script>

</body>

</html>

html5 画板 demo

html5 画图板的更多相关文章

  1. 【示例代码】HTML+JS 画图板源码分享

    一个有趣的画图板, 用了 HTML5中的本地存储.下载.canvas 等技术,这个项目中用到了canvas 的很多基础功能,初学者可以学习一下 . 建议开发童鞋使用统一开发环境UDE来进行查看.调试. ...

  2. iOS开发之画图板(贝塞尔曲线)

    贝塞尔曲线,听着挺牛气一词,不过下面我们在做画图板的时候就用到贝塞尔绘直线,没用到绘制曲线的功能.如果会点PS的小伙伴会对贝塞尔曲线有更直观的理解.这篇博文的重点不在于如何用使用贝塞尔曲线,而是利用贝 ...

  3. 很值得学习的java 画图板源码

    很值得学习的java 画图板源码下载地址:http://download.csdn.net/source/2371150 package minidrawpad; import java.awt.*; ...

  4. Java版简易画图板的实现

    Windows的画图板相信很多人都用过,这次我们就来讲讲Java版本的简易画板的实现. 基本的思路是这样的:画板实现大致分三部分:一是画板界面的实现,二是画板的监听以及画图的实现,三是画板的重绘.(文 ...

  5. JAVA 画图板实现（基本画图功能+界面UI）二、功能实现及重绘实现

    上篇博客中介绍了界面的实现方法,在这篇博客中将对每个按钮的功能的实现进行讲解并介绍重绘 首先肯定要添加事件监听机制了,那么问题来了,事件源对象是谁?需要添加什么方法?事件接口是什么? 1.我们需要点击 ...

  6. JAVA 画图板实现（基本画图功能+界面UI）一、界面实现

    /*文章中用到的代码只是一部分,需要源码的可通过邮箱联系我 1978702969@qq.com*/ 这段时间在学JAVA的swing界面开发,试着做了个画图板.实现了直线.曲线.喷枪.矩形.圆形.文字 ...

  7. Java编写画图板程序细节-保存已画图形

    没有Java编写画图板程序细节-保存已画图形   一.为何我们要保存画图板上已画图形呢? 有很多人会问,为什么我们一定要保存画图板上已经画好了的图形呢?原因很简单.当我们在画图板上画完自己想画的图形后 ...

  8. wxPython 画图板

    终于开始Python学习之旅了,姑且以一个“画图板”小项目开始吧.放慢脚步,一点一点地学习. 1月28日更新 第一次遇到的麻烦便是“重绘”,查了好多资料,终于重绘成功了. #-*- encoding: ...

  9. HTML5画：线、圆、矩形、渐变

    示例一:矩形 <!DOCTYPE html><head> <meta charset=utf-8> <title>HTML5画线.圆.矩形</ti ...

随机推荐

  1. 51NOD 2370 奈芙莲的护符

    >>这是原题传送门<< 答案参考来自 http://www.cnblogs.com/sugewud/p/9822933.html 思路:看到取值范围之后,仅有的思路还是暴力

  2. Springboot开启事务

    参考资料: https://blog.csdn.net/message_lx/article/details/77584847

  3. 新装mvn建第一个项目报错org.apache.maven.plugins:maven-resources-plugin:2.6

    1.第一次创建mvn项目会报maven-resources-plugin-2.6.jar错,原因是mvn无法自动下载这个jar包,多次删除这个目录下的C:\Users\Administrator\.m ...

  4. Linux下汇编语言学习笔记31 ---

    这是17年暑假学习Linux汇编语言的笔记记录,参考书目为清华大学出版社 Jeff Duntemann著 梁晓辉译<汇编语言基于Linux环境>的书,喜欢看原版书的同学可以看<Ass ...

  5. ZOJ 4016 Mergeable Stack 链表

    Mergeable Stack Time Limit: 2 Seconds      Memory Limit: 65536 KB Given  initially empty stacks, the ...

  6. Ajax核心知识（2）

    对于Ajax核心的东西需要在进行总结提炼一下: xmlHttp对象. 方法:xml.responseText获取后台传递到前台的数据,经常性的使用var object=xml.responseText ...

  7. HDU——1150 Machine Schedule

    Machine Schedule Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  8. redhat 6 配置 yum 源

    1.删除redhat原有的yum rpm -aq|grep yum|xargs rpm -e --nodeps 2.下载yum安装文件 注意,如果下载时找不到文件,就登录到:http://mirror ...

  9. ThinkPHP3.2 点击看不清刷新验证码

    欢迎使用Markdown编辑器写博客 baidu了一下.发现没有可用的源码,自己想了想,以下的方法可行. <!DOCTYPE html> <html> <head> ...

  10. win7笔记本如何设置共享网络供手机WIFI上网？

    第一步 按WIN+R调出“运行”栏,在“运行”菜单栏输入“cmd”,出现命令提示符,输入命令“netsh wlan set hostednetwork mode=allow ssid=xiaoming ...