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. vscode 解决符号无法识别的问题

    一开始浏览代码出现了下面这个问题, __attribute__ 标记为红色,符号无法识别,下面还出现了很多提示需要加 ), } 等符号,虽然编译没问题,但是看着红色标记和一堆提示真是要逼死强迫症. 既 ...

  2. 九度oj 题目1063：整数和

    题目1063:整数和 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:4043 解决:2638 题目描述: 编写程序,读入一个整数N.若N为非负数,则计算N到2N之间的整数和:若N为一个负数 ...

  3. 【Linux】date命令用法详解（日期格式）

    inux下date命令用法 date [OPTION]… [+FORMAT] date [-u|--utc|--universal] [MMDDhhmm[[CC]YY][.ss]] date命令参数 ...

  4. hdu 4033 状态压缩枚举

    /* 看别人的的思路 搜索搜不出来我太挫了 状态压缩枚举+好的位置 */ #include<stdio.h> #include<string.h> #define N 20 i ...

  5. 【BZOJ2330】糖果（差分约束系统，强连通分量，拓扑排序）

    题意: 幼儿园里有N个小朋友,lxhgww老师现在想要给这些小朋友们分配糖果,要求每个小朋友都要分到糖果.但是小朋友们也有嫉妒心,总是会提出一些要求,比如小明不希望小红分到的糖果比他的多,于是在分配糖 ...

  6. POJ3728 The merchant解题报告

    Description There are N cities in a country, and there is one and only one simple path between each ...

  7. JS中的双等和全等号比较机制

    JavaScript中的"==" 和 "===" 的用法: "=="判断相等的隐式转换机制 1. 判断是否有NaN(not a Number ...

  8. 洛谷 P2237 [USACO14FEB]自动完成Auto-complete

    P2237 [USACO14FEB]自动完成Auto-complete 题目描述 Bessie the cow has a new cell phone and enjoys sending text ...

  9. Kettle循环删除数据

    1.问题描述: 某个系统原库的数据同步到备份库.但是由于原库的的数据会物理删除,此时需要删除备份库的数据. 2.不理想的解决1: 1)首先从备份库获取该表的所有ID: 2)循环备份库的ID,去原库检测 ...

  10. UML图与机房收费系统实例

    前言 通过看视频,对于UML也有了一些初步的了解.前面也介绍了UML的三个基本块.规则和机制,只是这些东西就像是一个个机器的零部件.要组合起来才干发挥作用. 所以,实例才是验证自己学习好坏标准,以下我 ...