使用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中border-radius属性设定圆角的使用技巧
May 10 HTML / CSS
HTML+CSS3 模仿Windows7 桌面效果
Jun 17 HTML / CSS
CSS3 @font-face属性使用指南
Dec 12 HTML / CSS
一款利用html5和css3实现的3D滚动特效的教程
Jan 04 HTML / CSS
基于CSS3实现的黑色个性导航菜单效果
Sep 14 HTML / CSS
详解CSS 3 中的 calc() 方法
Jan 12 HTML / CSS
CSS3 实现童年的纸飞机
May 05 HTML / CSS
css3实现背景动态渐变效果
Dec 10 HTML / CSS
HTML5之web workers_动力节点Java学院整理
Jul 17 HTML / CSS
localStorage 设置过期时间的方法实现
Dec 21 HTML / CSS
html5中canvas学习笔记1-画板的尺寸与实际显示尺寸
Jan 06 HTML / CSS
HTML5新增的表单元素和属性实例解析
Jul 07 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
帅气的琦玉老师
2020/03/02 日漫
PHP+FLASH实现上传文件进度条相关文件 下载
2007/07/21 PHP
PHP实现验证码校验功能
2017/11/16 PHP
laravel实现登录时监听事件,添加登录用户的记录方法
2019/09/30 PHP
jQuery版Tab标签切换
2011/03/16 Javascript
用jquery实现输入框获取焦点消失文字
2013/04/27 Javascript
JS获取网页属性包括宽、高等等
2014/04/03 Javascript
angular.element方法汇总
2015/01/07 Javascript
JS获取图片lowsrc属性的方法
2015/04/01 Javascript
JavaScript中常见的字符串操作函数及用法汇总
2015/05/04 Javascript
使用requestAnimationFrame实现js动画性能好
2015/08/06 Javascript
JavaScript识别网页关键字并进行描红的方法
2015/11/09 Javascript
jquery实现的判断倒计时是否结束代码
2016/02/05 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
2016/03/07 Javascript
location.hash保存页面状态的技巧
2016/04/28 Javascript
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
详解vue组件化开发-vuex状态管理库
2017/04/10 Javascript
史上最全JavaScript常用的简写技巧(推荐)
2017/08/17 Javascript
详解vue-router 初始化时做了什么
2018/06/11 Javascript
一次Webpack配置文件的分离实战记录
2018/11/30 Javascript
pycharm 使用心得(五)断点调试
2014/06/06 Python
使用Python的package机制如何简化utils包设计详解
2017/12/11 Python
PyQt5每天必学之组合框
2018/04/20 Python
Python面向对象之接口、抽象类与多态详解
2018/08/27 Python
Python CVXOPT模块安装及使用解析
2019/08/01 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
用Python做一个久坐提醒小助手的示例代码
2020/02/10 Python
html5给汉字加拼音加进度条的实现代码
2020/04/07 HTML / CSS
Whittard官方海外旗舰店:英国百年茶叶品牌
2018/02/22 全球购物
《盲人摸象》教学反思
2014/02/16 职场文书
知识竞赛活动方案
2014/02/18 职场文书
学校领导班子对照检查材料
2014/08/28 职场文书
党的群众路线教育实践活动对照检查剖析材料
2014/10/09 职场文书
党员干部公开承诺书范文
2015/04/27 职场文书
运动会通讯稿200字
2015/07/20 职场文书
MySQL令人咋舌的隐式转换
2021/04/05 MySQL