怎么使用HTML5做個(gè)畫(huà)圖板

這篇文章主要為大家展示了“怎么使用HTML5做個(gè)畫(huà)圖板”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“怎么使用HTML5做個(gè)畫(huà)圖板”這篇文章吧。

新?lián)醩sl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書(shū)未來(lái)市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)建站的ssl證書(shū)銷(xiāo)售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：18980820575（備注：SSL證書(shū)合作）期待與您的合作！

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

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

onTouchStart 觸摸開(kāi)始

onTouchMove 觸摸滑動(dòng)

onTouchEnd 觸摸結(jié)束

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

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

HTML：

代碼如下:

<!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>
<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 !");
}
//上一次觸摸坐標(biāo)
var lastX;
var lastY; var ctx =canvas.getContext("2d");
ctx.lineWidth=10;//畫(huà)筆粗細(xì)
ctx.strokeStyle="#FF0000";//畫(huà)筆顏色 //觸摸開(kāi)始事件
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);
} } //畫(huà)圓
function drawRound(x,y)
{
ctx.fillStyle="#FF0000";
ctx.beginPath();
ctx.arc(x,y,5,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
}
//畫(huà)線
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è)置所畫(huà)線條結(jié)束的樣式帽為圓形。這個(gè)很關(guān)鍵，不然在線條角度變化大的地方會(huì)出現(xiàn)斷帶。

怎么使用HTML5做個(gè)畫(huà)圖板

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

以上是“怎么使用HTML5做個(gè)畫(huà)圖板”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

分享名稱：怎么使用HTML5做個(gè)畫(huà)圖板
文章地址：http://bm7419.com/article26/jjejjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、電子商務(wù)、定制網(wǎng)站、關(guān)鍵詞優(yōu)化、靜態(tài)網(wǎng)站、品牌網(wǎng)站設(shè)計(jì)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容