Komentar: Saat membuat papan gambar, kami secara alami menggunakan kanvas HTML5 untuk mencapainya. Di kanvas kita dapat menggambar lingkaran, persegi panjang, garis khusus, dll. Kali ini kita terutama menggunakan lingkaran dan garis untuk mencapainya. Dukungan Respons terhadap Acara Sentuh di HTML
Hal pertama yang perlu diperhatikan adalah bahwa kami tidak menggambar dengan mouse, tetapi menggunakan jari kami pada perangkat sentuh, seperti iPad.
Untuk membuat papan gambar, kami secara alami menggunakan kanvas HTML5 untuk mencapainya. Di kanvas kita dapat menggambar lingkaran, persegi panjang, garis khusus, dll. Kali ini kita terutama menggunakan lingkaran dan garis untuk mencapainya. Respons terhadap acara sentuh didukung dalam HTML.
OnTouchstart Touch Start
OnTouchmove Touch Swipe
OnTouchend Touch End
Dengan peristiwa ini, sangat mudah bagi kita untuk menggambar di browser dengan jari -jari kita.
Efek pada iPad:
Ide: Ketika jari Anda menyentuh layar, tambahkan lingkaran ke posisi sentuh jari di acara OnTouchStart; Ketika jari Anda mulai meluncur, terus -menerus menggambar garis dari titik sentuh sebelumnya ke titik berikutnya di Ontouchmove.
Html:
<! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"></p> <p> <html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> Canvas </iteme>
<meta name = "viewport" content = "width = device-width, user-scalable = no">
</head>
<body>
<selvas>/canvas>
<type script = "Text/Javascript" src = "canvasscript.js" charset = "utf-8"> </script>
</body>
</html>
JS:
// Dapatkan kanvas
var canvas = document.getElementById ("canvas");
// layar penuh
canvas.width = window.innerwidth;
canvas.height = window.innerheight;
// apakah itu mendukung sentuhan
var touchable = 'createTouch' dalam dokumen;
if (disentuh) {
canvas.addeventListener ('touchstart', ontouchstart, false);
canvas.addeventListener ('touchmove', ontouchmove, false);
}
kalau tidak
{
waspada ("Tersentuh adalah salah!");
}
// koordinat sentuhan terakhir
var lastx;
var lasty; </p> <p> var ctx = canvas.getContext ("2d");
ctx.linewidth = 10; // ketebalan sikat
ctx.strokestyle = "#ff0000"; // sikat warna </p> <p> // sentuh mulai acara
fungsi ontouchstart (event) {
event.preventdefault ();
lastx = event.touches [0] .clientx;
lasty = event.touches [0] .clienty;
drawround (lastx, lasty); </p> <p>}
// Sentuh acara geser
function ontouchmove (event) {
mencoba
{
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) {
peringatan (err.description);
} </p> <p>} </p> <p> // gambar lingkaran
function drawround (x, y)
{
ctx.fillstyle = "#ff0000";
ctx.beginpath ();
ctx.arc (x, y, 5,0, math.pi*2, true);
ctx.closepath ();
ctx.fill ();
}
// Gambarlah garis
Function Drawline (StartX, Starty, EndX, Endy)
{
ctx.beginpath ();
ctx.linecap = "bulat";
ctx.moveto (startx, starty);
ctx.lineto (endx, endy);
ctx.stroke ();
}
Poin -Poin Kunci:
ctx.linecap = round; Mengatur tutup gaya di ujung garis yang ditarik ke lingkaran. Ini sangat penting, jika tidak, akan ada pita rusak di tempat -tempat di mana sudut garis berubah sangat.
event.preventdefault (); membatalkan tindakan default dari acara tersebut. Metode ini harus disesuaikan selama acara geser. Kalau tidak, peristiwa geser default browser akan dipicu saat meluncur, dan efek drop-down halaman akan terjadi, dan Anda tidak akan dapat menggambarnya.