Skip to content

Instantly share code, notes, and snippets.

@jasl

jasl/1.php

Created April 13, 2014 08:33
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jasl/10574706 to your computer and use it in GitHub Desktop.
Save jasl/10574706 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
1.php
<script>
// function doNothing(e){
// e = e || window.event; //window.event, IE的写法
// if(e.stopPropagation){
// e.stopPropagation();
// e.preventDefault();
// }else{ //IE
// e.cancelBubble = true;
// e.returnValue = false;
// };
// }
</script>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>用HTML5 Canvas做一个画图板</title>
<style type="text/css">
body{
margin: 0px;
}
</style>
</head>
<body id="body_0">
<div id="div_0" style="position:relative;
width:600;height:450;">
<canvas id="canvas_0"
width="600"
height="450"
style="border: 1px solid #999;position:absolute;">
</canvas>
<div id="canvas_div"
style="width:600;height:450;
border: 1px solid red;
position:absolute;
background:;
display:;">
</div>
<canvas id="canvas_student"
width="600"
height="450"
style="border: 1px solid #999;position:absolute;display:none;">
</canvas>
<div id="canvas_div_student"
style="width:600;height:450;
border: 1px solid red;
position:absolute;
background:;
display:none;">
</div>
<div id="canvas_get"
style="width:600;height:450;
border: 1px solid red;
position:absolute;
background:;
display:none;">
</div>
</div><br/>
<div>
<input id="x_now">*
<input id="y_now"><br/>
<div id="arry0" style="display:none;">aaa</div>
<div id="arry1" style="display:none;">aaa</div>
</div>
<button onclick="colorit()" style="width:200;height:50;font-size:20">GetColor</button>
<input id="color_chinese" type="text" readonly="true" value="非提取状态">
<input id="color" type="text" readonly="true" value="0"><br/>
<button onclick="changeOne()" style="width:200;height:50;font-size:20">Student's Turn</button>&nbsp;
<button onclick="pingfen()" style="width:60;height:50;font-size:20;background:red;color:white;">评分</button>
<script type="text/javascript">
function changeOne () {
document.getElementById('canvas_div_student').style.display="";
document.getElementById('canvas_div').style.display="none";
document.getElementById('canvas_student').style.display="";
alert("It's student's Turn");
}
</script>
</body>
</html>
<script type="text/javascript">
canvas=document.getElementById('canvas_0');
canvas_div=document.getElementById('canvas_div');
canvas_student=document.getElementById('canvas_student');
canvas_div_student=document.getElementById('canvas_div_student');
var arry_0 = new Array();
var arry_show="";
//鼠标事件
canvas_down=0;
canvas_over=0;
var context_2=canvas.getContext('2d');;
canvas_div.onmousedown=function (e) {
canvas_down=1;
x0=e.clientX;
y0=e.clientY;
x1=x0;
y1=y0;
// draw(x0,y0);
context_2.beginPath();
context_2.fillStyle='red';
context_2.strokeStyle='red';
context_2.moveTo(x0,y0);
document.getElementById('x_now').value=x0;
document.getElementById('y_now').value=y0;
arry_0.push([x0,y0]);
}
a=0;
canvas_div.onmousemove=function (e){
if (canvas_down==1&&canvas_over==1) {
if (a==0) {
x0=x1;
y0=y1;
x1=e.clientX;
y1=e.clientY;
a=1;
}else{
x0=x1;
y0=y1;
x1=e.clientX;
y1=e.clientY;
}
document.getElementById('x_now').value=x1;
document.getElementById('y_now').value=y1;
arry_0.push([x1,y1]);
context_2.lineTo(x1,y1);
context_2.lineTo(x1-10,y1+10);
context_2.lineTo(x0-10,y0+10);
context_2.lineTo(x0,y0);
// context_2.bezierCurveTo(x0,y0-50,x0+100,y0,x1,y1);
// context_2.fill();
context_2.stroke();
context_2.closePath();
context_2.beginPath();
context_2.moveTo(x1,y1);
};
}
canvas_div.onmouseup=function (e){
canvas_down=0;
if(canvas_down==0){
context_2.closePath();
for(var i=0;i<arry_0.length;i++){
arry_show=arry_show+"("+arry_0[i]+")";
}
document.getElementById('arry0').innerHTML=arry_show;
context_2.save();
}
}
canvas_div.onmouseover=function(e){
canvas_over=1;
if(canvas_down==0&&canvas_over==0){
context_2.closePath();
}
}
canvas_div.onmouseout=function(e){
canvas_over=0;
if(canvas_down==0&&canvas_over==0){
context_2.closePath();
}
}
document.getElementById('body_0').onmouseover=function (e){
canvas_down=0;
if(canvas_down==0&&canvas_over==0){
context_2.closePath();
}
// doNothing(e);
}
canvas_div.ontouchstart=function (e) {
canvas_down=1;
// x0=e.pageX;
x0=e.targetTouches[0].pageX;
// y0=e.clientY;
y0=e.targetTouches[0].pageY;
// draw(x0,y0);
x1=x0;
y1=y0;
context_2.beginPath();
context_2.fillStyle='red';
context_2.strokeStyle='red';
context_2.moveTo(x0,y0);
// alert(x0+","+y0);
document.getElementById('x_now').value=x0;
document.getElementById('y_now').value=y0;
arry_0.push([x0,y0]);
doNothing(e);
}
canvas_div.ontouchmove=function (e) {
if (canvas_down==1) {
if (a==0) {
x0=x1;
y0=y1;
x1=e.targetTouches[0].pageX;
y1=e.targetTouches[0].pageY;
a=1;
}else{
x0=x1;
y0=y1;
x1=e.targetTouches[0].pageX;
y1=e.targetTouches[0].pageY;
}
document.getElementById('x_now').value=x1;
document.getElementById('y_now').value=y1;
arry_0.push([x1,y1]);
context_2.lineTo(x1,y1);
context_2.lineTo(x1-10,y1+10);
context_2.lineTo(x0-10,y0+10);
context_2.lineTo(x0,y0);
// context_2.bezierCurveTo(x0,y0-50,x0+100,y0,x1,y1);
context_2.fill();
context_2.stroke();
context_2.closePath();
context_2.beginPath();
context_2.moveTo(x1,y1);
};
doNothing(e);
}
canvas_div.ontouchend=function (e){
canvas_down=0;
if(canvas_down==0&&canvas_over==0){
context_2.closePath();
for(var i=0;i<arry_0.length;i++){
arry_show=arry_show+"("+arry_0[i]+")";
}
document.getElementById('arry0').innerHTML=arry_show;
context_2.save();
}
doNothing(e);
}
function doNothing(e){
e = e || window.event; //window.event, IE的写法
if(e.stopPropagation){
e.stopPropagation();
e.preventDefault();
}else{ //IE
e.cancelBubble = true;
e.returnValue = false;
};
}
function colorit () {
if(document.getElementById('color').value==0){
document.getElementById('color').value=1;
document.getElementById('color_chinese').value="提取中";
document.getElementById('canvas_get').style.display="";
document.getElementById('canvas_div').style.display="none";
canvas_get.onclick=function (e) {
get_x=e.clientX;
get_y=e.clientY;
// alert(get_x+"-"+get_y);
canvas_new=document.getElementById('canvas_0');
context_3=canvas_new.getContext('2d');
var imagedata = context_3.getImageData(get_x,get_y,1,1);
for(var i=0,dl = imagedata.data.length;i<dl;i+=4) {
imagedata.data[i] = imagedata.data[i];
imagedata.data[i+1] = imagedata.data[i+1];
imagedata.data[i+2] = imagedata.data[i+2];
}
context_3.putImageData(imagedata,get_x,get_y);
// jg.innerHTML = data.data;
// console.log(imagedata);
alert("red:"+imagedata.data[0]+";green:"+imagedata.data[1]+";blue:"+imagedata.data[2]+";"+imagedata[3]);
}
}else{
document.getElementById('color').value=0;
document.getElementById('color_chinese').value="非提取状态";
document.getElementById('canvas_get').style.display="none";
document.getElementById('canvas_div').style.display="";
}
}
function pingfen () {
canvas_new11=document.getElementById('canvas_0');
context_311=canvas_new11.getContext('2d');
var imagedata11 = context_311.getImageData(0,0,600,450);
for(var i=0,dl = imagedata11.data.length;i<dl;i+=4) {
imagedata11.data[i] = imagedata11.data[i];
imagedata11.data[i+1] = imagedata11.data[i+1];
imagedata11.data[i+2] = imagedata11.data[i+2];
}
context_311.putImageData(imagedata11,0,0);
canvas_new1=document.getElementById('canvas_student');
context_second2=canvas_new1.getContext('2d');
var imagedata2 = context_second2.getImageData(0,0,600,450);
for(var i=0,dl = imagedata2.data.length;i<dl;i+=4) {
imagedata2.data[i] = imagedata2.data[i];
imagedata2.data[i+1] = imagedata2.data[i+1];
imagedata2.data[i+2] = imagedata2.data[i+2];
}
context_second2.putImageData(imagedata2,0,0);
different1=0
different2=0
different_base=0
for (var i=0,dl = imagedata2.data.length;i<dl;i+=4) {
if (imagedata11.data[i]==255) {different1++};
if (imagedata2.data[i+2]==255) {different2++};
// if (imagedata11.data[i+1]!=imagedata2.data[i+1]) {different++};
if (imagedata11.data[i]==imagedata2.data[i+2]&&imagedata11.data[i]==255) {different_base++};
// if (imagedata11.data[i+3]!=imagedata2.data[i+3]) {different++};
};
alert("Teacher:"+different1+"\t"+"Student:"+different2+"\t"+"Same:"+different_base);
}
// ================
// 学生用
// ================
var arry_1 = new Array();
var arry_show1="";
//鼠标事件
canvas_down1=0;
canvas_over1=0;
var context_second=canvas_student.getContext('2d');;
canvas_div_student.onmousedown=function (e) {
canvas_down1=1;
x0=e.clientX;
y0=e.clientY;
x1=x0;
y1=y0;
// draw(x0,y0);
context_second.beginPath();
context_second.fillStyle='blue';
context_second.strokeStyle='blue';
context_second.moveTo(x0,y0);
document.getElementById('x_now').value=x0;
document.getElementById('y_now').value=y0;
arry_1.push([x0,y0]);
}
a=0;
canvas_div_student.onmousemove=function (e){
if (canvas_down1==1&&canvas_over1==1) {
if (a==0) {
x0=x1;
y0=y1;
x1=e.clientX;
y1=e.clientY;
a=1;
}else{
x0=x1;
y0=y1;
x1=e.clientX;
y1=e.clientY;
}
document.getElementById('x_now').value=x1;
document.getElementById('y_now').value=y1;
arry_1.push([x1,y1]);
context_second.lineTo(x1,y1);
context_second.lineTo(x1-10,y1+10);
context_second.lineTo(x0-10,y0+10);
context_second.lineTo(x0,y0);
// context_2.bezierCurveTo(x0,y0-50,x0+100,y0,x1,y1);
// context_2.fill();
context_second.stroke();
context_second.closePath();
context_second.beginPath();
context_second.moveTo(x1,y1);
};
}
canvas_div_student.onmouseup=function (e){
canvas_down1=0;
if(canvas_down1==0){
context_second.closePath();
for(var i=0;i<arry_1.length;i++){
arry_show1=arry_show1+"("+arry_1[i]+")";
}
document.getElementById('arry1').innerHTML=arry_show1;
context_second.save();
}
}
canvas_div_student.onmouseover=function(e){
canvas_over1=1;
if(canvas_down1==0&&canvas_over1==0){
context_second.closePath();
}
}
canvas_div_student.onmouseout=function(e){
canvas_over1=0;
if(canvas_down1==0&&canvas_over1==0){
context_second.closePath();
}
}
document.getElementById('body_0').onmouseover=function (e){
canvas_down1=0;
if(canvas_down1==0&&canvas_over1==0){
context_second.closePath();
}
// doNothing(e);
}
canvas_div_student.ontouchstart=function (e) {
canvas_down1=1;
// x0=e.pageX;
x0=e.targetTouches[0].pageX;
// y0=e.clientY;
y0=e.targetTouches[0].pageY;
// draw(x0,y0);
x1=x0;
y1=y0;
context_second.beginPath();
context_second.fillStyle='blue';
context_second.strokeStyle='blue';
context_second.moveTo(x0,y0);
// alert(x0+","+y0);
document.getElementById('x_now').value=x0;
document.getElementById('y_now').value=y0;
arry_1.push([x0,y0]);
doNothing(e);
}
canvas_div_student.ontouchmove=function (e) {
if (canvas_down1==1) {
if (a==0) {
x0=x1;
y0=y1;
x1=e.targetTouches[0].pageX;
y1=e.targetTouches[0].pageY;
a=1;
}else{
x0=x1;
y0=y1;
x1=e.targetTouches[0].pageX;
y1=e.targetTouches[0].pageY;
}
document.getElementById('x_now').value=x1;
document.getElementById('y_now').value=y1;
arry_1.push([x1,y1]);
context_second.lineTo(x1,y1);
context_second.lineTo(x1-10,y1+10);
context_second.lineTo(x0-10,y0+10);
context_second.lineTo(x0,y0);
// context_2.bezierCurveTo(x0,y0-50,x0+100,y0,x1,y1);
context_second.fill();
context_second.stroke();
context_second.closePath();
context_second.beginPath();
context_second.moveTo(x1,y1);
};
doNothing(e);
}
canvas_div_student.ontouchend=function (e){
canvas_down1=0;
if(canvas_down1==0&&canvas_over1==0){
context_second.closePath();
for(var i=0;i<arry_1.length;i++){
arry_show1=arry_show1+"("+arry_1[i]+")";
}
document.getElementById('arry1').innerHTML=arry_show1;
context_second.save();
}
doNothing(e);
}
</script>
Raw
2.php
<script>
// function doNothing(e){
// e = e || window.event; //window.event, IE的写法
// if(e.stopPropagation){
// e.stopPropagation();
// e.preventDefault();
// }else{ //IE
// e.cancelBubble = true;
// e.returnValue = false;
// };
// }
</script>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>用HTML5 Canvas做一个画图板</title>
<style type="text/css">
body{
margin: 0px;
}
</style>
</head>
<body id="body_0">
<div id="div_0" style="position:relative;
width:600;height:450;">
<canvas id="canvas_0"
width="600"
height="450"
style="border: 1px solid #999;position:absolute;">
</canvas>
<div id="canvas_div"
style="width:600;height:450;
border: 1px solid red;
position:absolute;
background:;
display:;">
</div>
<canvas id="canvas_student"
width="600"
height="450"
style="border: 1px solid #999;position:absolute;display:none;">
</canvas>
<div id="canvas_div_student"
style="width:600;height:450;
border: 1px solid red;
position:absolute;
background:;
display:none;">
</div>
<div id="canvas_get"
style="width:600;height:450;
border: 1px solid red;
position:absolute;
background:;
display:none;">
</div>
</div><br/>
<div>
<input id="x_now">*
<input id="y_now"><br/>
<div id="arry0" style="display:none;">aaa</div>
<div id="arry1" style="display:none;">aaa</div>
</div>
<button onclick="colorit()" style="width:200;height:50;font-size:20">GetColor</button>
<input id="color_chinese" type="text" readonly="true" value="非提取状态">
<input id="color" type="text" readonly="true" value="0"><br/>
<button onclick="changeOne()" style="width:200;height:50;font-size:20">Student's Turn</button>&nbsp;
<button onclick="pingfen()" style="width:60;height:50;font-size:20;background:red;color:white;">评分</button>
<script type="text/javascript">
function changeOne () {
document.getElementById('canvas_div_student').style.display="";
document.getElementById('canvas_div').style.display="none";
document.getElementById('canvas_student').style.display="";
alert("It's student's Turn");
}
</script>
</body>
</html>
<script type="text/javascript">
canvas=document.getElementById('canvas_0');
canvas_div=document.getElementById('canvas_div');
canvas_student=document.getElementById('canvas_student');
canvas_div_student=document.getElementById('canvas_div_student');
var arry_0 = new Array();
var arry_show="";
//鼠标事件
canvas_down=0;
canvas_over=0;
var context_2=canvas.getContext('2d');;
canvas_div.onmousedown=function (e) {
canvas_down=1;
x0=e.clientX;
y0=e.clientY;
x1=x0;
y1=y0;
// draw(x0,y0);
context_2.beginPath();
context_2.fillStyle='red';
context_2.strokeStyle='red';
context_2.moveTo(x0,y0);
document.getElementById('x_now').value=x0;
document.getElementById('y_now').value=y0;
arry_0.push([x0,y0]);
}
a=0;
canvas_div.onmousemove=function (e){
if (canvas_down==1&&canvas_over==1) {
if (a==0) {
x0=x1;
y0=y1;
x1=e.clientX;
y1=e.clientY;
a=1;
}else{
x0=x1;
y0=y1;
x1=e.clientX;
y1=e.clientY;
}
document.getElementById('x_now').value=x1;
document.getElementById('y_now').value=y1;
arry_0.push([x1,y1]);
context_2.lineTo(x1,y1);
context_2.lineTo(x1-10,y1+10);
context_2.lineTo(x0-10,y0+10);
context_2.lineTo(x0,y0);
// context_2.bezierCurveTo(x0,y0-50,x0+100,y0,x1,y1);
// context_2.fill();
context_2.stroke();
context_2.closePath();
context_2.beginPath();
context_2.moveTo(x1,y1);
};
}
canvas_div.onmouseup=function (e){
canvas_down=0;
if(canvas_down==0){
context_2.closePath();
for(var i=0;i<arry_0.length;i++){
arry_show=arry_show+"("+arry_0[i]+")";
}
document.getElementById('arry0').innerHTML=arry_show;
context_2.save();
}
}
canvas_div.onmouseover=function(e){
canvas_over=1;
if(canvas_down==0&&canvas_over==0){
context_2.closePath();
}
}
canvas_div.onmouseout=function(e){
canvas_over=0;
if(canvas_down==0&&canvas_over==0){
context_2.closePath();
}
}
document.getElementById('body_0').onmouseover=function (e){
canvas_down=0;
if(canvas_down==0&&canvas_over==0){
context_2.closePath();
}
// doNothing(e);
}
canvas_div.ontouchstart=function (e) {
canvas_down=1;
// x0=e.pageX;
x0=e.targetTouches[0].pageX;
// y0=e.clientY;
y0=e.targetTouches[0].pageY;
// draw(x0,y0);
x1=x0;
y1=y0;
context_2.beginPath();
context_2.fillStyle='red';
context_2.strokeStyle='red';
context_2.moveTo(x0,y0);
// alert(x0+","+y0);
document.getElementById('x_now').value=x0;
document.getElementById('y_now').value=y0;
arry_0.push([x0,y0]);
doNothing(e);
}
canvas_div.ontouchmove=function (e) {
if (canvas_down==1) {
if (a==0) {
x0=x1;
y0=y1;
x1=e.targetTouches[0].pageX;
y1=e.targetTouches[0].pageY;
a=1;
}else{
x0=x1;
y0=y1;
x1=e.targetTouches[0].pageX;
y1=e.targetTouches[0].pageY;
}
document.getElementById('x_now').value=x1;
document.getElementById('y_now').value=y1;
arry_0.push([x1,y1]);
context_2.lineTo(x1,y1);
context_2.lineTo(x1-10,y1+10);
context_2.lineTo(x0-10,y0+10);
context_2.lineTo(x0,y0);
// context_2.bezierCurveTo(x0,y0-50,x0+100,y0,x1,y1);
context_2.fill();
context_2.stroke();
context_2.closePath();
context_2.beginPath();
context_2.moveTo(x1,y1);
};
doNothing(e);
}
canvas_div.ontouchend=function (e){
canvas_down=0;
if(canvas_down==0&&canvas_over==0){
context_2.closePath();
for(var i=0;i<arry_0.length;i++){
arry_show=arry_show+"("+arry_0[i]+")";
}
document.getElementById('arry0').innerHTML=arry_show;
context_2.save();
}
doNothing(e);
}
function doNothing(e){
e = e || window.event; //window.event, IE的写法
if(e.stopPropagation){
e.stopPropagation();
e.preventDefault();
}else{ //IE
e.cancelBubble = true;
e.returnValue = false;
};
}
function colorit () {
if(document.getElementById('color').value==0){
document.getElementById('color').value=1;
document.getElementById('color_chinese').value="提取中";
document.getElementById('canvas_get').style.display="";
document.getElementById('canvas_div').style.display="none";
canvas_get.onclick=function (e) {
get_x=e.clientX;
get_y=e.clientY;
// alert(get_x+"-"+get_y);
canvas_new=document.getElementById('canvas_0');
context_3=canvas_new.getContext('2d');
var imagedata = context_3.getImageData(get_x,get_y,1,1);
for(var i=0,dl = imagedata.data.length;i<dl;i+=4) {
imagedata.data[i] = imagedata.data[i];
imagedata.data[i+1] = imagedata.data[i+1];
imagedata.data[i+2] = imagedata.data[i+2];
}
context_3.putImageData(imagedata,get_x,get_y);
// jg.innerHTML = data.data;
// console.log(imagedata);
alert("red:"+imagedata.data[0]+";green:"+imagedata.data[1]+";blue:"+imagedata.data[2]+";"+imagedata[3]);
}
}else{
document.getElementById('color').value=0;
document.getElementById('color_chinese').value="非提取状态";
document.getElementById('canvas_get').style.display="none";
document.getElementById('canvas_div').style.display="";
}
}
function pingfen () {
canvas_new11=document.getElementById('canvas_0');
context_311=canvas_new11.getContext('2d');
var imagedata11 = context_311.getImageData(0,0,600,450);
for(var i=0,dl = imagedata11.data.length;i<dl;i+=4) {
imagedata11.data[i] = imagedata11.data[i];
imagedata11.data[i+1] = imagedata11.data[i+1];
imagedata11.data[i+2] = imagedata11.data[i+2];
}
context_311.putImageData(imagedata11,0,0);
canvas_new1=document.getElementById('canvas_student');
context_second2=canvas_new1.getContext('2d');
var imagedata2 = context_second2.getImageData(0,0,600,450);
for(var i=0,dl = imagedata2.data.length;i<dl;i+=4) {
imagedata2.data[i] = imagedata2.data[i];
imagedata2.data[i+1] = imagedata2.data[i+1];
imagedata2.data[i+2] = imagedata2.data[i+2];
}
context_second2.putImageData(imagedata2,0,0);
different1=0
different2=0
different_base=0
for (var i=0,dl = imagedata2.data.length;i<dl;i+=4) {
if (imagedata11.data[i]==255) {different1++};
if (imagedata2.data[i+2]==255) {different2++};
// if (imagedata11.data[i+1]!=imagedata2.data[i+1]) {different++};
if (imagedata11.data[i]==imagedata2.data[i+2]&&imagedata11.data[i]==255) {different_base++};
// if (imagedata11.data[i+3]!=imagedata2.data[i+3]) {different++};
};
alert("Teacher:"+different1+"\t"+"Student:"+different2+"\t"+"Same:"+different_base);
}
// ================
// 学生用
// ================
var arry_1 = new Array();
var arry_show1="";
//鼠标事件
canvas_down1=0;
canvas_over1=0;
var context_second=canvas_student.getContext('2d');;
canvas_div_student.onmousedown=function (e) {
canvas_down1=1;
x0=e.clientX;
y0=e.clientY;
x1=x0;
y1=y0;
// draw(x0,y0);
context_second.beginPath();
context_second.fillStyle='blue';
context_second.strokeStyle='blue';
context_second.moveTo(x0,y0);
document.getElementById('x_now').value=x0;
document.getElementById('y_now').value=y0;
arry_1.push([x0,y0]);
}
a=0;
canvas_div_student.onmousemove=function (e){
if (canvas_down1==1&&canvas_over1==1) {
if (a==0) {
x0=x1;
y0=y1;
x1=e.clientX;
y1=e.clientY;
a=1;
}else{
x0=x1;
y0=y1;
x1=e.clientX;
y1=e.clientY;
}
document.getElementById('x_now').value=x1;
document.getElementById('y_now').value=y1;
arry_1.push([x1,y1]);
context_second.lineTo(x1,y1);
context_second.lineTo(x1-10,y1+10);
context_second.lineTo(x0-10,y0+10);
context_second.lineTo(x0,y0);
// context_2.bezierCurveTo(x0,y0-50,x0+100,y0,x1,y1);
// context_2.fill();
context_second.stroke();
context_second.closePath();
context_second.beginPath();
context_second.moveTo(x1,y1);
};
}
canvas_div_student.onmouseup=function (e){
canvas_down1=0;
if(canvas_down1==0){
context_second.closePath();
for(var i=0;i<arry_1.length;i++){
arry_show1=arry_show1+"("+arry_1[i]+")";
}
document.getElementById('arry1').innerHTML=arry_show1;
context_second.save();
}
}
canvas_div_student.onmouseover=function(e){
canvas_over1=1;
if(canvas_down1==0&&canvas_over1==0){
context_second.closePath();
}
}
canvas_div_student.onmouseout=function(e){
canvas_over1=0;
if(canvas_down1==0&&canvas_over1==0){
context_second.closePath();
}
}
document.getElementById('body_0').onmouseover=function (e){
canvas_down1=0;
if(canvas_down1==0&&canvas_over1==0){
context_second.closePath();
}
// doNothing(e);
}
canvas_div_student.ontouchstart=function (e) {
canvas_down1=1;
// x0=e.pageX;
x0=e.targetTouches[0].pageX;
// y0=e.clientY;
y0=e.targetTouches[0].pageY;
// draw(x0,y0);
x1=x0;
y1=y0;
context_second.beginPath();
context_second.fillStyle='blue';
context_second.strokeStyle='blue';
context_second.moveTo(x0,y0);
// alert(x0+","+y0);
document.getElementById('x_now').value=x0;
document.getElementById('y_now').value=y0;
arry_1.push([x0,y0]);
doNothing(e);
}
canvas_div_student.ontouchmove=function (e) {
if (canvas_down1==1) {
if (a==0) {
x0=x1;
y0=y1;
x1=e.targetTouches[0].pageX;
y1=e.targetTouches[0].pageY;
a=1;
}else{
x0=x1;
y0=y1;
x1=e.targetTouches[0].pageX;
y1=e.targetTouches[0].pageY;
}
document.getElementById('x_now').value=x1;
document.getElementById('y_now').value=y1;
arry_1.push([x1,y1]);
context_second.lineTo(x1,y1);
context_second.lineTo(x1-10,y1+10);
context_second.lineTo(x0-10,y0+10);
context_second.lineTo(x0,y0);
// context_2.bezierCurveTo(x0,y0-50,x0+100,y0,x1,y1);
context_second.fill();
context_second.stroke();
context_second.closePath();
context_second.beginPath();
context_second.moveTo(x1,y1);
};
doNothing(e);
}
canvas_div_student.ontouchend=function (e){
canvas_down1=0;
if(canvas_down1==0&&canvas_over1==0){
context_second.closePath();
for(var i=0;i<arry_1.length;i++){
arry_show1=arry_show1+"("+arry_1[i]+")";
}
document.getElementById('arry1').innerHTML=arry_show1;
context_second.save();
}
doNothing(e);
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment