コメント：HTML5簡単な図面ボードコード共有、それを参照してください
HTML5単純な図面
<！doctype html>
<html lang = "en-us">
<head>
<title> </title>
<メタcharset = "utf-8">
<スクリプト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>
<body>
<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 = false;
}）
//マウスを移動します
$（ "＃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>
複製図