Pengenalan kepada cara menggunakan HTML5 untuk membuat kemahiran tutorial papan lukisan_html5

Perkara pertama yang perlu diperhatikan ialah anda tidak melukis menggunakan tetikus, tetapi menggunakan jari anda pada peranti sentuh, seperti iPad.

Untuk membuat papan lukisan, gunakan kanvas HTML5 secara semulajadi untuk mencapainya. Dalam kanvas kita boleh melukis bulatan, segi empat tepat, garis tersuai, dsb. Kali ini saya terutamanya menggunakan lukisan bulatan dan garisan untuk mencapainya. Respons kepada peristiwa sentuhan disokong dalam html.

onTouchStart Touch mulakan

onTouchMove sentuh slaid

onTouchEnd Touch tamat

Dengan acara ini, sangat mudah untuk kami melukis menggunakan jari dalam pelayar.

Kesan pada IPAD:

Idea: Apabila jari menyentuh skrin, tambahkan bulatan pada kedudukan di mana jari menyentuh dalam acara onTouchStart apabila jari mula meluncur, teruskan bergerak dari titik sentuh sebelumnya ke seterusnya dalam onTouchMove Garis putus-putus.

HTML:

Salin kod

Kodnya adalah seperti berikut:

gt ;

JS:

Salin kod

Kodnya adalah seperti berikut:

//dapatkan kanvas
var canvas = document.getElementById("canvas");
//skrin penuh
canvas.width= window.innerWidth ;
canvas.height=window.innerHeight;
//Sama ada sentuhan disokong
var touchable = 'createTouch' dalam dokumen;
jika (boleh disentuh) {
canvas.addEventListener ('touchstart' , onTouchStart, false);
canvas.addEventListener('touchmove', onTouchMove, false);
}
lain
{
alert("touchable is false !") ;
}
//Koordinat sentuhan terakhir
var lastX;
var lastY;

var ctx =canvas.getContext("2d");
ctx.lineWidth=10;//Ketebalan berus
ctx.strokeStyle="#FF0000";//Warna berus

//Acara permulaan sentuh
fungsi padaTouchStart(event) {
event.preventDefault();
lastX=event.touches[0].clientX;
lastY=event.touches[ 0].klienY;
drawRound(lastX,lastY);

}
//Acara gelongsor sentuh
fungsi padaTouchMove(acara) {
cuba
{
event.preventDefault();
drawLine(lastX,lastY,event. touches[0].clientX,event.touches[0].clientY);
lastX=event.touches[0].clientX;
lastY=event.touches[0].clientY;
}
tangkap(err){
alert( err.description);
}

}

//Lukis bulatan
fungsi drawRound(x,y)
{
ctx.fillStyle="#FF0000";
ctx.beginPath();
ctx.arc ( x,y,5,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
}
//Draw line
function drawLine(startX,startY,endX,endY)
{
ctx.beginPath();
ctx.lineCap="round";
ctx.moveTo(startX,startY);
ctx .lineTo(endX,endY);
ctx.stroke();
}

Isi penting:

ctx.lineCap="bulat"; Tetapkan topi gaya di hujung garisan yang dilukis menjadi bulat. Ini sangat kritikal, jika tidak, akan berlaku rehat di tempat-tempat di mana sudut garisan berubah dengan ketara.

event.preventDefault(); Batalkan tindakan lalai acara tersebut. Kaedah ini mesti dipanggil dalam acara gelongsor. Jika tidak, acara gelongsor lalai penyemak imbas akan dicetuskan apabila meluncur, dan halaman akan ditarik ke bawah dan anda tidak akan dapat melukis.