Commentaire: Partage de code de carte de dessin simple HTML5, veuillez y consulter
Carte de dessin simple HTML5
<! Doctype html>
<html lang = "en-us">
<adal>
<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>
<style>
Canvas {Border: 2px solide # 000;}
</ style>
<body>
<lebvas> </ canvas>
<script type = "text / javascript">
$ (document) .ready (function () {
var canvas = document.getElementById ("Draw");
var draw = canvas.getContext ("2d");
draw.Width = 5; // épaisseur de ligne
draw.strokestyle = "red"; //Couleur
var godraw = false;
// Appuyez sur la souris
$ ("# draw"). Mousedown (fonction (e) {
// coordonnées précises
var muousex = e.pagex-this.offsetLeft;
var mousey = e.pagey-this.offsetTop;
Draw.moveto (Mousex, Mousey);
GODRAW = true; </p> <p>})
// Laissez la souris
$ ("# draw"). MouseUp (fonction (e) {
GoTraw = false;
})
// déplace la souris
$ ("# draw"). MouseMove (fonction (e) {
if (Dieu) {
var muousex = e.pagex-this.offsetLeft;
var mousey = e.pagey-this.offsetTop;
Draw.lineto (Mousex + 4, Mousey + 4);
draw.stroke ();
} </p> <p>})
})
</cript>
</docy>
</html>
Diagramme de reproduction