使用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 相关文章推荐
35款精致的 CSS3 和 HTML5 网页模板 推荐
Aug 03 HTML / CSS
纯css3实现鼠标经过图片显示描述的动画效果
Sep 01 HTML / CSS
利用纯css3实现的文字亮光特效的代码演示
Nov 27 HTML / CSS
html5定制表单_动力节点Java学院整理
Jul 11 HTML / CSS
html5 svg 中元素点击事件添加方法
Jan 16 HTML / CSS
html5开发之viewport使用
Oct 17 HTML / CSS
html5版canvas自由拼图实例
Oct 15 HTML / CSS
HTML5 Canvas的常用线条属性值总结
Mar 17 HTML / CSS
微信端html5页面调用分享接口示例
Mar 14 HTML / CSS
Html5调用企业微信的实现
Apr 16 HTML / CSS
Css预编语言及区别详解
Apr 25 HTML / CSS
常用的文件对应的MIME类型汇总
Apr 26 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
Dwz与thinkphp整合下的数据导出到Excel实例
2014/12/04 PHP
php强制用户转向www域名的方法
2015/06/19 PHP
jquery 跨域访问问题解决方法(笔记)
2011/06/08 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2012/01/21 Javascript
表单元素值获取方式js及java方式的简单实例
2016/10/15 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
2016/12/01 Javascript
NodeJs中express框架的send()方法简介
2017/06/20 NodeJs
通过js控制时间,一秒一秒自己动的实例
2017/10/25 Javascript
vue项目打包上传github并制作预览链接(pages)
2019/04/19 Javascript
详解vue为什么要求组件模板只能有一个根元素
2019/07/22 Javascript
小程序自定义弹框效果
2020/11/16 Javascript
[01:34]2016国际邀请赛中国区预选赛IG战队教练采访
2016/06/27 DOTA
Python中声明只包含一个元素的元组数据方法
2014/08/25 Python
Python的Flask框架中实现简单的登录功能的教程
2015/04/20 Python
基于Python Shell获取hostname和fqdn释疑
2016/01/25 Python
Python利用Beautiful Soup模块搜索内容详解
2017/03/29 Python
Python 实现删除某路径下文件及文件夹的实例讲解
2018/04/24 Python
Flask框架配置与调试操作示例
2018/07/23 Python
使用matplotlib中scatter方法画散点图
2019/03/19 Python
Django 路由层URLconf的实现
2019/12/30 Python
基于python计算滚动方差(标准差)talib和pd.rolling函数差异详解
2020/06/08 Python
LEGO玩具英国官方商店:LEGO Shop GB
2018/03/27 全球购物
枚举和一组预处理的#define有什么不同
2016/09/21 面试题
Final类有什么特点
2012/04/25 面试题
给民警的表扬信
2014/01/08 职场文书
初中地理教学反思
2014/01/11 职场文书
学生会个人自荐书范文
2014/02/12 职场文书
中专生毕业个人鉴定
2014/02/26 职场文书
教职工代表大会主持词
2014/04/01 职场文书
房屋买卖协议书
2014/04/10 职场文书
企业法人代表证明书
2015/06/18 职场文书
会计继续教育培训心得体会
2016/01/19 职场文书
导游词之北京明十三陵
2019/10/28 职场文书
ztree+ajax实现文件树下载功能
2021/05/18 Javascript
sql server偶发出现死锁的解决方法
2022/04/10 SQL Server