HTML5 canvas画图 示例
-------
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<script src="jquery-3.1.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Backpropagation</title>
</head>
<body>
<div>
<div style="float:right;margin-right:400px;margin-top:100px;width:300px;height:500px">
<span id="NN"></span>
<span id="xyText"></span><br>
<input id="Text"></input><br>
<button id="clear" type="button" onclick="Clear()">清空</button><br>
<button id="submit" type="button" onclick="Tell()">识别</button><br>
<button id="train" type="button" onclick="Train()">训练</button><br>
</div>
<br>
<div style="margin-left:200px">
<canvas id="canvas" width="400" height="400">浏览器不支持canvas</canvas>
</div>
</div>
</body> <script type="text/javascript">
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.fillStyle = "#28ff28";
context.lineCap="square";
context.lineWidth = 1;
context.strokeStyle = "#aaaaaa";
var isDown = false;
var RECT = new Array(); var N = 16;
var W = 400/N; $(function(){
$("#NN").text(N+"X"+N);
canvas.addEventListener("mousedown",mouseDown,false);
canvas.addEventListener('mousemove', mouseMove,false);
canvas.addEventListener('mouseup', mouseUp, false);
canvas.addEventListener('mouseleave', mouseLeave, false);
canvas.addEventListener('mouseover', mouseOver, false);
init();
drawlines();
}); function init(){
for(var y=0; y< N;y++){
for(var x=0; x<N;x++){
var rect = new Rect(x,y);
RECT.push(rect);
}
}
} function Rect(x,y){
this.sx=x*W;
this.sy=y*W;
this.done=false;
this.ix=x+1;
this.iy=y+1;
//this.index=x*N+this.iy;
}
Rect.prototype.drawRect=function(){
if(this.done==false){
context.fillRect(this.sx,this.sy,W-1,W-1);
this.done = true;
}
};
Rect.prototype.reset=function(){
this.done=false;
}; function DrawRectByXY(i,j){
var index = j*N+i;
if(i>=N || j>=N || index>=N*N){
return;
}
RECT[index].drawRect();
} function drawlines(){
var width=N*W;
var height=N*W;
for(var i=0; i<= N;i++){
context.moveTo(0,i*W);
context.lineTo(width,i*W);
context.moveTo(i*W,0);
context.lineTo(i*W,height);
}
context.stroke();
} function mouseDown(){
isDown=true;
}
function mouseUp(e){
isDown = false;
var x=e.clientX - this.offsetLeft;
var y=e.clientY - this.offsetTop;
var i=Math.floor((x+W)/W)-1;
var j=Math.floor((y+W)/W)-1;
DrawRectByXY(i,j);
}
function mouseOver(e){
if(e.which==1){
isDown=true;
}
}
function mouseLeave(e){
isDown=false;
}
function mouseMove(e){
var x=e.clientX - this.offsetLeft;
var y=e.clientY - this.offsetTop;
var i=Math.floor((x+W)/W)-1;
var j=Math.floor((y+W)/W)-1;
$("#xyText").text("x:"+(i+1) + " " + "y:"+(j+1));
if(isDown){
DrawRectByXY(i,j);
}
} function Clear(){
context.clearRect(0,0,N*W,N*W);
drawlines();
isDown=false;
for (i in RECT){
RECT[i].reset();
}
} function Tell(){
var vv = new Array();
for (i in RECT){
if(RECT[i].done==true){
vv.push(i);
}
}
$.ajax({
url:"bp/tell.action",
dataType:"json",
data:{
value:vv
}
}).done(function(data){ });
} function Train(){
var v = $("#Text").val();
$.ajax({
url:"bp/train.action",
dataType:"json",
data:{
value:v
}
}).done(function(data){
});
} </script>
</html>
-------
canvas{
border: 0px;
display: block;
margin: 10px;
cursor: pointer;
}
span{
margin:10px;
}
input{
height:25px;
width:120px;
margin:10px;
}
button{
margin:10px;
border:1px Solid #357AE8;
color:#fff;
font-size:18px;
background:#357AE8;
width:120px;
height:30px;
}
body{
background-image:url(p3.jpg);
background-repeat:repeat;
background-attachment:fixed;
background-position: 50% 10%;
color:rgb(200,200,200);
font-family:Arial,Verdana,Sans-serif;
font-size: 150%
}
-------