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. Gram-Schmidt向量正交化

    正交:向量的内积为0,即相互垂直. 假如存在向量a,b确定一个平面空间,但是a,b向量并不垂直,如下图. 现在要在该平面内找出2个垂直的向量确定该平面: b和e垂直,接下来求解e: 根据向量计算法则: ...

  2. Node.js & Unix/Linux & NVM

    Node.js & Unix/Linux & NVM nvm https://github.com/creationix/nvm https://github.com/xyz-data ...

  3. HDU 4745 最长回文子序列

    题目大意 两只青蛙朝不同方向条,每次都到达值相同的位置,不能重复到达自己到过的地方,且不能飞跃已到过的地方 我们可以理解为这两只青蛙分别把整个序列遍历了一遍,依次走过所有的点,找到最多相同的点的个数, ...

  4. 联想M7400打印机加粉墨了还是显示没有粉墨

     联想M7400打印机加粉墨了还是显示没有粉墨?想必有很多的办公人士发现这个难题吧.其实很简单的! 先说下打印机的原理,打印机粉墨一边用的时候系统也在计数,当我们打印机加好墨后但打印机是不知道已经加好 ...

  5. git的配置文件

    转载:https://cnbin.github.io/blog/2015/06/19/git-config-ming-ling-cha-kan-pei-zhi-wen-jian/ Git Config ...

  6. Lua迭代器

    在Lua中我们常常使用函数来描述迭代器,每次调用该函数就返回集合的下一个元素.迭代器需要保留上一次成功调用的状态和下一次成功调用的状态,可以通过闭包提供的机制来实现这个任务(闭包中的外部局部变量可以用 ...

  7. Spark修炼之道（基础篇）——Linux大数据开发基础：第二节：Linux文件系统、文件夹（一）

    本节主要内容 怎样获取帮助文档 Linux文件系统简单介绍 文件夹操作 訪问权限 1. 怎样获取帮助文档 在实际工作过程其中,常常会忘记命令的使用方式.比如ls命令后面能够跟哪些參数,此时能够使用ma ...

  8. Flink内存管理源代码解读之基础数据结构

    概述 在分布式实时计算领域,怎样让框架/引擎足够高效地在内存中存取.处理海量数据是一个非常棘手的问题.在应对这一问题上Flink无疑是做得非常杰出的,Flink的自主内存管理设计或许比它自身的知名度更 ...

  9. 小白学开发（iOS）OC_ 字符串的获取 （2015-08-11）

    // //  main.m //  字符串的获取 // //  Created by admin on 15/8/13. //  Copyright (c) 2015年 admin. All righ ...

  10. android动态控制组件的位置、大小和新的动画

    一.动态设置组件的位置 当中view是须要改变位置的控件,top是须要设制的位置: private static void setLayoutX(View view,int top)  { //克隆v ...