简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  使用HTML5做个画图板的方法介绍

使用HTML5做个画图板的方法介绍

PHP中文网
PHP中文网Original
2018-05-12 09:41:264285Durchsuche

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

首先要说明的是这里不是用鼠标画画，而是在触摸设备上用手指，比如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 = &#39;createTouch&#39; in document;
if (touchable) {
    canvas.addEventListener(&#39;touchstart&#39;, onTouchStart, false);
    canvas.addEventListener(&#39;touchmove&#39;, 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();取消事件的默认动作。在滑动事件中一定要调这个方法。不然滑动时就会触发浏览器默认的滑动事件，就会发生页面下拉的效果，你就画不了画喽。

以上就是使用HTML5做个画图板的方法介绍的内容，更多相关内容请关注PHP中文网（www.php.cn）！

php html5 html Event JS 事件 canvas ipad
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：利用 HTML5 实现带有进度条的文件上传功能Nächster Artikel：HTML5组件Canvas实现图像灰度化(步骤+实例效果)

In Verbindung stehende Artikel

Mehr sehen