如何使用HTML5做畫圖板

發(fā)布時(shí)間：2022-03-01 15:33:52 來源：億速云閱讀：132 作者：iii 欄目：web開發(fā)

今天小編給大家分享一下如何使用HTML5做畫圖板的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

首先要說明的是這里不是用鼠標(biāo)畫畫，而是在觸摸設(shè)備上用手指，比如ipad。

做畫圖板，自然使用html5的canvas來實(shí)現(xiàn)了。在canvas中我們可以畫圓，畫矩形，畫自定義的線條等等。這次主要使用的畫圓跟畫線條來實(shí)現(xiàn)。html中支持對(duì)觸摸事件的響應(yīng)。

onTouchStart 觸摸開始

onTouchMove 觸摸滑動(dòng)

onTouchEnd 觸摸結(jié)束

有了這些事件，我們實(shí)現(xiàn)用手指在瀏覽器里畫畫就很簡(jiǎn)單了。

IPAD上的效果：

image

思路：當(dāng)手指觸摸到屏幕的時(shí)候在onTouchStart 事件中在手指觸摸的位置上添加一個(gè)圓；當(dāng)手指開始滑動(dòng)的時(shí)候在onTouchMove中不斷的從上一個(gè)觸摸點(diǎn)到下一個(gè)點(diǎn)畫線條。

HTML：

復(fù)制代碼

代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">

<head>

<title>Canvas</title>

</head>

<body>

</body>

</html>

JS：

復(fù)制代碼

代碼如下:

//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 !");

}

//上一次觸摸坐標(biāo)

var lastX;

var lastY;var ctx =canvas.getContext("2d");

ctx.lineWidth=10;//畫筆粗細(xì)

ctx.strokeStyle="#FF0000";//畫筆顏色//觸摸開始事件

function onTouchStart(event) {

event.preventDefault();

lastX=event.touches[0].clientX;

lastY=event.touches[0].clientY;

drawRound(lastX,lastY);}

//觸摸滑動(dòng)事件

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);

}}//畫圓

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();

}

關(guān)鍵點(diǎn)：

ctx.lineCap="round"; 設(shè)置所畫線條結(jié)束的樣式帽為圓形。這個(gè)很關(guān)鍵，不然在線條角度變化大的地方會(huì)出現(xiàn)斷帶。

image

event.preventDefault();取消事件的默認(rèn)動(dòng)作。在滑動(dòng)事件中一定要調(diào)這個(gè)方法。不然滑動(dòng)時(shí)就會(huì)觸發(fā)瀏覽器默認(rèn)的滑動(dòng)事件，就會(huì)發(fā)生頁(yè)面下拉的效果，你就畫不了畫嘍。

以上就是“如何使用HTML5做畫圖板”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細(xì)節(jié)

如何使用HTML5做畫圖板

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽