用HTML5的Canvas写字的例子
来源:互联网 发布:星宇周晓萍老公知乎 编辑:程序博客网 时间:2024/04/30 21:40
最近项目轻松了一些,就抱着学习的态度阅读了HTML Canvas 2D Context的内容。又想到以前曾经在android上做过原笔迹手写的内容,就想试着在HTML5中简单做一下看看。摸索着完成了demo。下面是在Google Chrome 13.0版本上的效果。
下面附上代码,仅仅为学习,没做优化,作为例子吧。
<html> <head> <title>write demo</title> </head> <body><canvas width="800" height="450"></canvas><script> var canvas = document.getElementsByTagName('canvas')[0]; canvas.addEventListener('mousemove', onMouseMove, false); canvas.addEventListener('mousedown', onMouseDown, false); canvas.addEventListener('mouseup', onMouseUp, false); var context = canvas.getContext('2d'); var linex = new Array(); var liney = new Array(); var linen = new Array(); var lastX = -1; var lastY = -1; var hue = 0; var flag = 0; function onMouseMove(evt) { if (flag == 1) { linex.push(evt.layerX); liney.push(evt.layerY); linen.push(1); context.save(); context.translate(context.canvas.width/2, context.canvas.height/2); context.translate(-context.canvas.width/2, -context.canvas.height/2); context.beginPath(); context.lineWidth = 5 + Math.random() * 10; for (var i=1;i<linex.length;i++) { lastX = linex[i]; lastY = liney[i]; if (linen[i] == 0) {context.moveTo(lastX,lastY); } else {context.lineTo(lastX,lastY); } } hue = hue + 10 * Math.random(); context.strokeStyle = 'hsl(' + hue + ', 50%, 50%)'; context.shadowColor = 'white'; context.shadowBlur = 10; context.stroke(); context.restore(); } } function onMouseDown(evt) { flag = 1; linex.push(evt.layerX); liney.push(evt.layerY); linen.push(0); } function onMouseUp(evt) { flag = 0; linex.push(evt.layerX); liney.push(evt.layerY); linen.push(0); }</script></body></html>
注:要在支持HTML5的浏览器上运行才能看到效果。
---------------------------------------------------------------------------
GL(arui319)
http://blog.csdn.net/arui319
<本文可以转载,但是请保留以上作者信息。谢谢。>
---------------------------------------------------------------------------
- 用HTML5的Canvas写字的例子
- 用HTML5的Canvas写字的例子
- 利用html5 canvas 画图的一个例子
- 用canvas画的图片跟在图片上写字居中的问题?
- html5 canvas的clearRect
- 关于HTML5 的canvas
- HTML5的canvas标签
- Html5 的Canvas使用
- HTML5的canvas标签
- HTML5的canvas标签
- html5的canvas插件
- Html5的canvas
- HTML5 的<canvas>标签
- html5里的canvas
- html5 canvas的使用
- html5的canvas时钟
- html5 canvas 的transform
- html5 canvas 完美例子
- HDU 4007 Dave 线段树
- Doxygen简单经验谈
- 什么是设计模式
- 程序调用存储过程 输出参数返回0的问题
- 提升程序权限
- 用HTML5的Canvas写字的例子
- net 打开后在文件菜单下没有源代码管理项
- java对象的创建与初始化
- HP-Mercury LoadRunner - 可预测系统行为和性能的负载测试工具
- c# 经验
- 产生随机验证码
- JavaEE平台下Web应用开发(更新程度:完毕)送源码
- C++ 程序文档生成器介绍(doxygen)
- java Logger 的使用与配置