Kommentar: HTML5 Simple Drawing Board Code Code Sharing, bitte lesen Sie es
HTML5 Einfache Zeichenbrett
<! DocType html>
<html lang = "en-us">
<kopf>
<title> </title>
<meta charset = "utf-8">
<script src = "<a href =" http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js "> </script"> "> </script </a >>
</head>
<Styles>
Canvas {Grenze: 2PX Solid #000;}
</style>
<body>
<Canvas> </canvas>
<script type = "text/javaScript">
$ (Dokument) .Ready (function () {
var canvas = document.getElementById ("zeichnen");
var draw = canvas.getContext ("2d");
Draw.lineWidth = 5; // Liniendicke
Draw.strokestyle = "rot"; //Farbe
var Godraw = falsch;
// Drücken Sie die Maus
$ ("#Draw"). MouseDown (Funktion (e) {
// Genaue Koordinaten
var mousex = e.Pagex-this.offsetLeft;
var mausy = e.pagey-this.offsettop;
Draw.Moveto (Mousex, Mousey);
Godraw = true; </p> <p>})
// die Maus lassen
$ ("#Draw"). MouseUp (Funktion (e) {
Godraw = falsch;
})
// Bewegen Sie die Maus
$ ("#Draw"). Mousemove (Funktion (e) {
if (Godraw) {
var mousex = e.Pagex-this.offsetLeft;
var mausy = e.pagey-this.offsettop;
Draw.lineto (Mousex+4, Mousey+4);
Draw.stroke ();
} </p> <p>})
})
</script>
</body>
</html>
Reproduktionsdiagramm