コメント: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>
複製図