使用HTML5做个画图板的方法介绍


Posted in HTML / CSS onMay 03, 2013

首先要说明的是这里不是用鼠标画画,而是在触摸设备上用手指,比如ipad。

做画图板,自然使用html5的canvas来实现了。在canvas中我们可以画圆,画矩形,画自定义的线条等等。这次主要使用的画圆跟画线条来实现。html中支持对触摸事件的响应。

onTouchStart 触摸开始

onTouchMove 触摸滑动

onTouchEnd 触摸结束

有了这些事件,我们实现用手指在浏览器里画画就很简单了。

IPAD上的效果:

使用HTML5做个画图板的方法介绍

思路:当手指触摸到屏幕的时候在onTouchStart 事件中在手指触摸的位置上添加一个圆;当手指开始滑动的时候在onTouchMove中不断的从上一个触摸点到下一个点画线条。

HTML:

复制代码
代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></p> <p><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Canvas</title>
<meta name = "viewport" content = "width = device-width, user-scalable = no">
</head>
<body>
<canvas id="canvas" ></canvas>
<script type="text/javascript" src="canvasScript.js" charset="utf-8"></script>
</body>
</html>

JS:
复制代码
代码如下:

//get canvas
var canvas = document.getElementById("canvas");
//full screen
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
//是否支持触摸
var touchable = 'createTouch' in document;
if (touchable) {
canvas.addEventListener('touchstart', onTouchStart, false);
canvas.addEventListener('touchmove', onTouchMove, false);
}
else
{
alert("touchable is false !");
}
//上一次触摸坐标
var lastX;
var lastY;</p> <p>var ctx =canvas.getContext("2d");
ctx.lineWidth=10;//画笔粗细
ctx.strokeStyle="#FF0000";//画笔颜色</p> <p>//触摸开始事件
function onTouchStart(event) {
event.preventDefault();
lastX=event.touches[0].clientX;
lastY=event.touches[0].clientY;
drawRound(lastX,lastY);</p> <p>}
//触摸滑动事件
function onTouchMove(event) {
try
{
event.preventDefault();
drawLine(lastX,lastY,event.touches[0].clientX,event.touches[0].clientY);
lastX=event.touches[0].clientX;
lastY=event.touches[0].clientY;
}
catch(err){
alert( err.description);
}</p> <p>}</p> <p>//画圆
function drawRound(x,y)
{
ctx.fillStyle="#FF0000";
ctx.beginPath();
ctx.arc(x,y,5,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
}
//画线
function drawLine(startX,startY,endX,endY)
{
ctx.beginPath();
ctx.lineCap="round";
ctx.moveTo(startX,startY);
ctx.lineTo(endX,endY);
ctx.stroke();
}

关键点:

ctx.lineCap="round"; 设置所画线条结束的样式帽为圆形。这个很关键,不然在线条角度变化大的地方会出现断带。

使用HTML5做个画图板的方法介绍

event.preventDefault();取消事件的默认动作。在滑动事件中一定要调这个方法。不然滑动时就会触发浏览器默认的滑动事件,就会发生页面下拉的效果,你就画不了画喽。

HTML / CSS 相关文章推荐
发现两个有趣的CSS3动画效果
Aug 14 HTML / CSS
使用简单的CSS3属性实现炫酷读者墙效果
Jan 08 HTML / CSS
CSS3制作文字半透明倒影效果的两种实现方式
Aug 08 HTML / CSS
五款漂亮的纯CSS3动画按钮的实例教程
Nov 21 HTML / CSS
利用CSS3实现折角效果实例源码
Sep 28 HTML / CSS
详解HTML5表单新增属性
Dec 21 HTML / CSS
HTML5之web workers_动力节点Java学院整理
Jul 17 HTML / CSS
基于IE10/HTML5 开发
Apr 22 HTML / CSS
html5基础标签(html5视频标签 html5新标签用法)
Dec 30 HTML / CSS
浅谈html5增强的页面元素
Jun 14 HTML / CSS
为什么你写的height:100%不起作用
May 10 HTML / CSS
html+css实现分层金字塔的实例
Jun 02 HTML / CSS
基于第一个PhoneGap(cordova)的应用详解
May 03 #HTML / CSS
HTML5 离线应用之打造零请求、无流量网站的解决方法
Apr 25 #HTML / CSS
HTML5 本地存储之如果没有数据库究竟会怎样
Apr 25 #HTML / CSS
HTML5 通信API 跨域门槛将不再高、数据推送也不再是梦
Apr 25 #HTML / CSS
基于HTML5 FileSystem API的使用介绍
Apr 24 #HTML / CSS
HTML5 绘制图像(上)之:关于canvas元素引领下一代web页面的问题
Apr 24 #HTML / CSS
HTML5 form标签之解放表单验证、增加文件上传、集成拖放的使用方法
Apr 24 #HTML / CSS
You might like
PHP递归遍历指定目录的文件并统计文件数量的方法
2015/03/24 PHP
THINKPHP在添加数据的时候获取主键id的值方法
2017/04/03 PHP
[原创]PHP实现生成vcf vcard文件功能类定义与使用方法详解【附demo源码下载】
2017/09/02 PHP
PHP实现数据库的增删查改功能及完整代码
2018/04/18 PHP
PHP自定义错误处理的方法分析
2018/12/19 PHP
尝试在让script的type属性等于text/html
2013/01/15 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
2013/05/13 Javascript
JavaScript 上万关键字瞬间匹配实现代码
2013/07/07 Javascript
jquery使用append(content)方法注意事项分享
2014/01/06 Javascript
AngularJS入门教程(二):AngularJS模板
2014/12/06 Javascript
node.js中的fs.chmodSync方法使用说明
2014/12/18 Javascript
JAVA四种基本排序方法实例总结
2015/07/24 Javascript
用JavaScript实现PHP的urlencode与urldecode函数
2015/08/13 Javascript
详解JavaScript函数对象
2015/11/15 Javascript
JS实现图片垂直居中显示小结
2016/12/13 Javascript
纯JS单页面赛车游戏制作代码分享
2017/03/03 Javascript
vue2.0之多页面的开发的示例
2018/01/30 Javascript
浅谈Vue Element中Select下拉框选取值的问题
2018/03/01 Javascript
vue项目如何刷新当前页面的方法
2018/05/18 Javascript
axios如何利用promise无痛刷新token的实现方法
2019/08/27 Javascript
[09:59]DOTA2-DPC中国联赛2月7日Recap集锦
2021/03/11 DOTA
Python简单删除目录下文件以及文件夹的方法
2015/05/27 Python
numpy.transpose对三维数组的转置方法
2018/04/17 Python
Python之用户输入的实例
2018/06/22 Python
python 移动图片到另外一个文件夹的实例
2019/01/10 Python
Python安装与基本数据类型教程详解
2019/05/29 Python
pytorch索引查找 index_select的例子
2019/08/18 Python
canvas画图被放大且模糊的解决方法
2020/08/11 HTML / CSS
大学生标准推荐信范文
2013/11/25 职场文书
校园新闻广播稿
2014/01/10 职场文书
党员自我批评与反省材料
2014/02/10 职场文书
法制工作总结2015
2015/07/23 职场文书
生产设备维护保养制度
2015/08/06 职场文书
人民调解协议书
2016/03/21 职场文书
jquery插件实现搜索历史
2021/04/24 jQuery
html+css实现分层金字塔的实例
2021/06/02 HTML / CSS