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

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

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

onTouchStart 触摸开始

onTouchMove 触摸

onTouchEnd 触摸结束

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

IPAD上的效果:

思路:当手指触屏幕的时候在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"; 设置所画线条结束的样式帽为圆形。这个很关键,不然在线条角度变化大的地方会出现断带。

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

最新资讯
蔚来盘中股价一度下挫6%再创历史新低 股价现跌约4%

蔚来盘中股价一度下挫

蔚来汽车(NYSE:NIO)盘中股价一度下挫6%再创历史新低,截止
涨!涨!涨!“外卖自由”正离我们远去

涨!涨!涨!“外卖自由”正

“最近这一段时间,外卖变贵了,之前20块可以吃到饱,现在25
宜人贷宣布业务重组计划 唐宁出任宜人贷CEO

宜人贷宣布业务重组计

宜人贷(NYSE:YRD)今日宣布,已针对一项业务重组计划与公
猫眼娱乐高管解读财报:高质量内容需求越来越大

猫眼娱乐高管解读财报

报告显示,2018年猫眼娱乐实现收入37.55亿元,较2017年同
传华为将进军智能显示屏市场 不同于传统电视机

传华为将进军智能显示

华为不再宣称自己将进军电视市场,而是表示自己将推出智
第九城市开盘一度涨超20% FF消息刺激消退

第九城市开盘一度涨超

第九城市开盘大涨,其后涨幅迅速缩减至不到20% ,截至21:4
最新文章
html5 canvas-1.canvas介绍(hello canvas)

html5 canvas-1.canva

大家都知道,目前并不是所有的浏览器中支持html5,就算是
canvas烟花特效锦集

canvas烟花特效锦集

这篇文章主要介绍了canvas烟花特效锦集,小编觉得挺不错
使用Html5、CSS实现文字阴影效果

使用Html5、CSS实现文

这篇文章主要介绍了使用Html5、CSS实现文字阴影效果的
html5 canvas绘制放射性渐变色效果

html5 canvas绘制放射

这篇文章主要介绍了html5 canvas绘制放射性渐变色效果
canvas基础之图形验证码的示例

canvas基础之图形验证

这篇文章主要介绍了canvas基础之图形验证码的示例的相
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能

利用HTML5+css3+jquer

这篇文章主要介绍了利用HTML5+css3+jquery+weui实现仿