使用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 08 HTML / CSS
纯CSS3实现绘制各种图形实现代码详细整理
Dec 26 HTML / CSS
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
Dec 30 HTML / CSS
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
Feb 07 HTML / CSS
IE浏览器单独写CSS样式的几种方法
Oct 14 HTML / CSS
使用CSS Grid布局实现网格的流动
Dec 30 HTML / CSS
css3类选择器之结合元素选择器和多类选择器用法
Mar 09 HTML / CSS
利用css3如何设置没有上下边的列表间隔线
Jul 03 HTML / CSS
HTML5新控件之日期和时间选择输入的实现代码
Sep 13 HTML / CSS
HTML5几个设计和修改的页面范例分享
Sep 29 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
Jul 20 HTML / CSS
HTML5拍照和摄像机功能实战详解
Jan 24 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中inlcude()性能对比详解
2012/09/16 PHP
PHP5.4中json_encode中文转码的变化小结
2013/01/30 PHP
Yii学习总结之数据访问对象 (DAO)
2015/02/22 PHP
php实现的通用图片处理类
2015/03/24 PHP
PHP中的一些常用函数收集
2015/05/26 PHP
老生常谈PHP面向对象之注册表模式
2017/05/26 PHP
php实现姓名根据首字母排序的类与方法(实例代码)
2018/05/16 PHP
javascript学习之闭包分析
2010/12/02 Javascript
JavaScript之appendChild、insertBefore和insertAfter使用说明
2010/12/30 Javascript
javascript基础知识大全 便于大家学习,也便于我自己查看
2012/08/17 Javascript
jquery Mobile入门—外部链接切换示例代码
2013/01/08 Javascript
js用Date对象处理时间实现思路及代码
2013/01/31 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
2014/09/25 Javascript
jQuery编程中的一些核心方法简介
2015/08/14 Javascript
在Mac OS上安装使用Node.js的项目自动化构建工具Gulp
2016/06/18 Javascript
字太多用...代替的方法(两种)
2017/03/15 Javascript
layui前段框架日期控件使用方法详解
2017/05/19 Javascript
jQuery实现页码跳转式动态数据分页
2017/12/31 jQuery
vue嵌套路由与404重定向实现方法分析
2018/05/04 Javascript
详解React native fetch遇到的坑
2018/08/30 Javascript
详解mpvue开发微信小程序基础知识
2019/09/23 Javascript
Vue使用Ref跨层级获取组件的步骤
2021/01/25 Vue.js
在Linux中通过Python脚本访问mdb数据库的方法
2015/05/06 Python
python使用KNN算法手写体识别
2018/02/01 Python
python输入错误后删除的方法
2019/10/12 Python
Python爬虫工具requests-html使用解析
2020/04/29 Python
Python实现疫情地图可视化
2021/02/05 Python
CSS3属性background-size使用指南
2014/12/09 HTML / CSS
乐天旅游香港网站:日本饭店预订
2017/11/29 全球购物
三维科技面试题
2013/07/27 面试题
UNIX文件系统常用命令
2012/05/25 面试题
酒店值班经理的工作职责范本
2014/02/18 职场文书
军训教官感言
2014/03/02 职场文书
国庆节新闻稿
2015/07/17 职场文书
公司会议开幕词
2016/03/03 职场文书
python实现简单的名片管理系统
2021/04/26 Python