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. 基于vue实现模糊匹配（这里以邮箱模糊匹配为例，其他的模糊匹配都可以类比）

    html部分(主要部分): js: data: methods: 效果图:

  2. jmap Unable to open socket file解决

    pid:Unable to open socket file: target process not responding or HotSport VM not loadedThe -F option ...

  3. DFS template and summary

    最近一直在学习Deep Frist Search,也在leetcode上练习了不少题目.从最开始的懵懂,到现在遇到问题基本有了思路.依然清晰的记得今年2月份刚开始刷题的时做subsets的那个吃力劲, ...

  4. android开发里跳过的坑——“org.apache.http.message.BasicHeaderValueFormatter.INSTANCE”错误

    在android4.4.2的系统里,写了一个系统应用,其中有一个功能是通过表单上传图片的,使用了httpclient-4.5.3.jar httpmime-4.5.3.jar httpcore-4.4 ...

  5. VIM使用技巧15

    在vim的插入模式下,有时需要插入寄存器中的文本: 1.使用<C-r>{register} 2.使用<C-r><C-p>{register} 3.使用<C-r ...

  6. JVM 总结

    面试 java 虚拟机 jvm 基础 jvm Write Once Run EveryWhere >jar 包可以在任何兼容jvm上运行 >jvm 适配器 屏蔽掉底层差异 >内存管理 ...

  7. [bzoj3252]攻略_dfs序_线段树_贪心

    攻略 bzoj-3252 题目大意:给定一棵n个节点的有根树,点有点权.让你选出至多k个节点,使得他们到根的链的并最大. 注释:$1\le n\le 2\cdot 10^5$,$1\le val_i\ ...

  8. Reorder the Books-HDU5500

    Problem Description dxy has a collection of a series of books called "The Stories of SDOI" ...

  9. laravel 邮件

    本文使用qq邮箱 env邮件配置: MAIL_FROM_ADDRESS = 17******92@qq.com MAIL_FROM_NAME = listen~ MAIL_DRIVER=smtp MA ...

  10. C#使用全局钩子(hook)，SetWindowsHookEx返回0、不回调的解决

    http://www.csharpwin.com/csharpspace/3766r5747.shtml 在.net 2005平台下 在使用全局hook时,总是遇见SetWindowsHookEx的返 ...