欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

行使HTML5做个绘图板的要领先容

发布时间:2016-11-28  编辑:杨雨个人博客网站   点击:   

起主要声名的是这里不是用鼠标画画,而是在触摸装备上用手指,好比ipad。

做绘图板,天然行使Html5的canvas来实现了。在canvas中我们可以画圆,画矩形,画自界说的线条等等。这次首要行使的画圆跟画线条来实现。Html中支持对触摸变乱的相应。

onTouchStart 触摸开始

onTouchMove 触摸滑动

onTouchEnd 触摸竣事

有了这些变乱,我们实现用手指在赏识器里画画就很简朴了。

IPAD上的结果:

image

思绪:当手指触摸到屏幕的时辰在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"; 配置所画线条竣事的样式帽为圆形。这个很要害,否则在线条角度变革大的处所会呈现断带。

image

event.preventDefault();打消变乱的默认举措。在滑动变乱中必然要调这个要领。否则滑动时就会触发赏识器默认的滑动变乱,就会产生页面下拉的结果,你就画不了画喽。

本文地址:http://itbyc.com/web/html5/13658.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1