Комментарий: html5 простой обмен кодом платы чертежей, пожалуйста, обратитесь к нему
HTML5 простая чертежная доска
<! Doctype html>
<html lang = "en-us">
<голова>
<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 Solid #000;}
</style>
<тело>
<Canvas> </canvas>
<script type = "text/javascript">
$ (document) .ready (function () {
var canvas = document.getElementById ("Draw");
var draw = canvas.getContext ("2d");
Draw.linewidth = 5; // Толщина линии
draw.strokestyle = "red"; //Цвет
var Godraw = false;
// нажмите мышь
$ ("#Draw"). Mousedown (function (e) {
// Точные координаты
var mousex = e.pagex-this.offsetleft;
var mousey = e.pagey-this.offsettop;
Draw.moveto (Mousex, Mousey);
Godraw = true; </p> <p>})
// Пусть мышь
$ ("#Draw"). MouseUp (function (e) {
Godraw = ложь;
})
// переместить мышь
$ ("#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>
Диаграмма воспроизведения