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. 初入lambda表达式 （主要是c++11）

    写一篇不猫的博文吧 定义 lambda表达式的定义如下 [capture](parameters) mutable ->return-type{statement} 翻译成人话就是 1.[cap ...

  2. 面向对象：元类、异常处理（try...except...）

    元类: python中一切皆对象,意味着: 1. 都可以被引用,如 x = obj 2. 都可以被当做函数的参数传入 3. 都可以被当做函数的返回值 4. 都可以当做容器类的元素(列表.字典.元祖.集 ...

  3. Python模块：configparser、hashlib、（subprocess）

    configparser模块: 此模块用于生成和修改常见配置文档. 一个常见配置文件(.ini的后缀名)格式如下: [DEFAULT] # DEFAULT 是指后面的字典里都会默认有的内容 Serve ...

  4. CSS实现自适应不同大小屏幕的背景大图的两种方法（转自简书）

    CSS实现自适应不同大小屏幕的背景大图的两种方法 一张清晰漂亮的背景图片能给网页加分不少,设计师也经常会给页面的背景使用大图,我们既不想图片因为不同分辨率图片变形,也不希望当在大屏的情况下,背景有一块 ...

  5. CentOS 5.5 介绍

    转载:http://www.osyunwei.com/archives/3625.html 操作系统:CentOS 5.5主机名称:wwwIP地址:192.168.21.128网关:192.168.2 ...

  6. Ubuntu 16.04 LTS 搭建LAMP

    1. LAMP是一系列自由和开源软件的集合,包含了Linux.Web服务器(Apache).数据库服务器(MySQL)和PHP(脚本语言). Apache2 Web 服务器的安装 sudo apt i ...

  7. oralce之复杂查询举例

    表结构: S(SNO,SNAME) 代表 学号.学生姓名: C(CNO,CNAME,CTEACHER) 代表 课号,课程名称.授课老师 SC(SNO,CNO,SCGRADE) 代表 学号.课号.课程成 ...

  8. node+express+mysql小例子

    连接:https://www.cnblogs.com/humaotegong/p/5671009.html https://www.cnblogs.com/mibear/p/nodejs.html?u ...

  9. ZOJ 3684 Destroy 树的中心

    中心节点就是树的中心,2遍dfs求到树的直径.而中心一定在直径上,顺着直径找到中心就够了. 然后能够一遍树形DP找到最小值或者二分+推断是否訪问到叶子节点. #include <iostream ...

  10. 仰视源代码，实现strcmp

    //这是系统库的实现 int strcmp(const char* src, const char* dest) { int rtn = 0; while(!(rtn = *(unsigned cha ...