使用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背景_动力节点Java学院整理
Jul 11 HTML / CSS
一款纯css3实现的漂亮的404页面的实例教程
Nov 27 HTML / CSS
CSS3媒体查询Media Queries基础学习教程
Feb 29 HTML / CSS
css3新单位vw、vh的使用教程
Mar 23 HTML / CSS
css3 利用transform打造走动的2D时钟
Oct 20 HTML / CSS
基于HTML5 Canvas 实现商场监控实例详解
Nov 20 HTML / CSS
使用HTML5 Canvas为图片填充颜色和纹理的教程
Mar 21 HTML / CSS
Adobe Html5 Extension开发初体验图文教程
Nov 14 HTML / CSS
怎样实现H5+CSS3手指滑动切换图片的示例代码
May 05 HTML / CSS
详解HTML5.2版本带来的修改
May 06 HTML / CSS
HTML5 video循环播放多个视频的方法步骤
Aug 06 HTML / CSS
html+css 实现简易导航栏功能
Apr 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
php 图像函数大举例(非原创)
2009/06/20 PHP
PHP5中Cookie与 Session使用详解
2013/04/30 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
js 省地市级联选择
2010/02/07 Javascript
高性能web开发 如何加载JS,JS应该放在什么位置?
2010/05/14 Javascript
js 函数调用模式小结
2011/12/26 Javascript
随鼠标上下滚动的jquery代码
2013/12/05 Javascript
js中创建对象的几种方式示例介绍
2014/01/26 Javascript
js创建表单元素并使用submit进行提交
2014/08/14 Javascript
javascript学习笔记(三)BOM和DOM详解
2014/09/30 Javascript
JavaScript通过事件代理高亮显示表格行的方法
2015/05/27 Javascript
jquery获取css的color值返回RGB的方法
2015/12/18 Javascript
AngularJs bootstrap详解及示例代码
2016/09/01 Javascript
利用Angularjs实现幻灯片效果
2016/09/07 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
2017/07/11 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
2018/01/24 Javascript
element-ui 表格数据时间格式化的方法
2018/08/24 Javascript
vue axios post发送复杂对象问题
2019/06/04 Javascript
自己编程中遇到的Python错误和解决方法汇总整理
2015/06/03 Python
Python编程中对super函数的正确理解和用法解析
2016/07/02 Python
Python json 错误xx is not JSON serializable解决办法
2017/03/15 Python
python看某个模块的版本方法
2018/10/16 Python
python实现维吉尼亚加密法
2019/03/20 Python
Windows下Anaconda和PyCharm的安装与使用详解
2020/04/23 Python
Python网页解析器使用实例详解
2020/05/30 Python
python批量处理多DNS多域名的nslookup解析实现
2020/06/28 Python
python 中 .py文件 转 .pyd文件的操作
2021/03/04 Python
html5的websockets全双工通信详解学习示例
2014/02/26 HTML / CSS
Holiday Inn中国官网:IHG旗下假日酒店预订
2018/04/08 全球购物
留学推荐信写作指南
2014/01/25 职场文书
心理咨询承诺书
2014/05/20 职场文书
2014老师三严三实对照检查材料思想汇报
2014/09/18 职场文书
幼儿园万圣节活动总结
2015/05/05 职场文书
一次SQL如何查重及去重的实战记录
2022/03/13 MySQL
正则表达式基础与常用验证表达式
2022/06/16 Javascript