Komentar: html5 berbagi kode papan gambar sederhana, silakan merujuknya
Papan gambar sederhana html5
<! Doctype html>
<html lang = "en-us">
<head>
<title> </title>
<meta charset = "UTF-8">
<skrip src = "<a href =" http://ajax.googleapis.com/ajax/libs/jQuery/1.7.1/jquery.min.js "> </skrip"> "> </skrip </a>>
</head>
<tyle>
Canvas {border: 2px solid #000;}
</tyle>
<body>
<Canvas> </an Canvas>
<type skrip = "Teks/JavaScript">
$ (dokumen) .ready (function () {
var canvas = document.geteLementById ("draw");
var draw = canvas.getContext ("2d");
draw.linewidth = 5; // Ketebalan garis
draw.strokestyle = "merah"; //Warna
var godraw = false;
// tekan mouse
$ ("#draw"). mousedown (function (e) {
// Koordinat yang akurat
var mousex = e.pagex-this.offsetleft;
var mousey = e.pagey-this.offsettop;
draw.moveto (mousex, mousey);
godraw = true; </p> <p>})
// Biarkan mouse
$ ("#draw"). MouseUp (function (e) {
godraw = false;
})
// Pindahkan mouse
$ ("#draw"). mousemove (function (e) {
if (godraw) {
var mousex = e.pagex-this.offsetleft;
var mousey = e.pagey-this.offsettop;
draw.lineto (mousex+4, mousey+4);
draw.stroke ();
} </p> <p>})
})
</script>
</body>
</html>
Diagram reproduksi