使用HTML5做個畫圖板的方法介紹

首先要說明的是這里不是用鼠標(biāo)畫畫,而是在觸摸設(shè)備上用手指,比如ipad。
做畫圖板,自然使用html5的canvas來實(shí)現(xiàn)了。在canvas中我們可以畫圓,畫矩形,畫自定義的線條等等。這次主要使用的畫圓跟畫線條來實(shí)現(xiàn)。html中支持對觸摸事件的響應(yīng)。
onTouchStart 觸摸開始
onTouchMove 觸摸滑動
onTouchEnd 觸摸結(jié)束
有了這些事件,我們實(shí)現(xiàn)用手指在瀏覽器里畫畫就很簡單了。
IPAD上的效果:
思路:當(dāng)手指觸摸到屏幕的時候在onTouchStart 事件中在手指觸摸的位置上添加一個圓;當(dāng)手指開始滑動的時候在onTouchMove中不斷的從上一個觸摸點(diǎn)到下一個點(diǎn)畫線條。
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 !");
}
//上一次觸摸坐標(biāo)
var lastX;
var lastY;</p> <p>var ctx =canvas.getContext("2d");
ctx.lineWidth=10;//畫筆粗細(xì)
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();
}
關(guān)鍵點(diǎn):
ctx.lineCap="round"; 設(shè)置所畫線條結(jié)束的樣式帽為圓形。這個很關(guān)鍵,不然在線條角度變化大的地方會出現(xiàn)斷帶。
event.preventDefault();取消事件的默認(rèn)動作。在滑動事件中一定要調(diào)這個方法。不然滑動時就會觸發(fā)瀏覽器默認(rèn)的滑動事件,就會發(fā)生頁面下拉的效果,你就畫不了畫嘍。
相關(guān)文章
- Microdata作為HTML5新增的一個特性,它允許開發(fā)者在HTML文檔中添加更多的語義信息,以便于搜索引擎和瀏覽器更好地理解頁面內(nèi)容,本文將探討HTML5中Microdata的使用方法以及2025-04-21
- 在HTML語法中,表格主要通過< table >、< tr >和< td >3個標(biāo)簽構(gòu)成,本文通過實(shí)例代碼講解HTML5表格語法格式,感興趣的朋友一起看看吧2025-04-21
- 這篇文章主要介紹了HTML5中使用媒體查詢和Flexbox進(jìn)行響應(yīng)式布局的方法,簡要介紹了CSS Grid布局的基礎(chǔ)知識和如何實(shí)現(xiàn)自動換行的網(wǎng)格布局,感興趣的朋友一起看看吧2025-04-21
基于Canvas的Html5多時區(qū)動態(tài)時鐘實(shí)戰(zhàn)代碼
本文介紹了如何使用Canvas在HTML5上實(shí)現(xiàn)一個多時區(qū)動態(tài)時鐘的web展示,通過Canvas的API,可以繪制出6個不同城市的時鐘,并且這些時鐘可以動態(tài)轉(zhuǎn)動,每個時鐘上都會標(biāo)注出對應(yīng)的2025-03-11HTML5 data-*自定義數(shù)據(jù)屬性的示例代碼
HTML5的自定義數(shù)據(jù)屬性(data-*)提供了一種標(biāo)準(zhǔn)化的方法在HTML元素上存儲額外信息,可以通過JavaScript訪問、修改和在CSS中使用,文章還介紹了高級用法,如存儲JSON數(shù)據(jù)、事2025-03-11HTML5中下拉框<select>標(biāo)簽的屬性和樣式詳解
在HTML5中,下拉框(<select>標(biāo)簽)作為表單的重要組成部分,為用戶提供了一個從預(yù)定義選項(xiàng)中選擇值的方式,本文將深入探討<select>標(biāo)簽的屬性、樣式,并重點(diǎn)介2025-02-27- 本文介紹了HTML5InputDatePicker對象表示HTML``元素,是HTML5中的新對象,介紹了日期、周、月份、時間、日期+時間、本地日期時間等不同類型的日期選擇器,感興趣的朋友一起看2025-02-17
- 本文介紹了HTML5中的超鏈接、相對路徑和圖片的使用方法,超鏈接可以創(chuàng)建指向另一個文檔或頁面內(nèi)部書簽的鏈接,相對路徑用于在同一服務(wù)器內(nèi)部跳轉(zhuǎn)頁面,圖片標(biāo)簽用于引入外部圖2025-02-17
- 本文介紹了HTML5超鏈接的創(chuàng)建方法,包括基本語法、創(chuàng)建圖像超鏈接的邊框去除方法以及錨點(diǎn)鏈接的使用,還討論了超鏈接的四種不同狀態(tài)(link、visited、hover、active)的CSS樣2025-02-17
HTML5使用details標(biāo)簽:展開/收縮信息
最近看一些技術(shù)網(wǎng)站發(fā)現(xiàn)了details 標(biāo)簽的妙用,這個不用js即可實(shí)現(xiàn)展開/收縮信息,很方便用來讓用戶先才答案,然后下面點(diǎn)擊再給出答案的效果,這里就為大家簡單介紹一下,2024-11-03