|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html>
|
|
|
|
|
|
<head lang="en">
|
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
|
<title>流程图绘制考试练习工具（v1.0 作者：liugw@mail.imut.edu.cn)</title>
|
|
|
|
|
|
<link rel="stylesheet" href="flowchart.css">
|
|
|
|
|
|
<script type="text/javascript" src="flowchart.js"></script>
|
|
|
|
|
|
<style type="text/css">
|
|
|
|
|
|
#canvas{
|
|
|
|
|
|
border: 1px solid #333;
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
margin:20px 20px;
|
|
|
|
|
|
}
|
|
|
|
|
|
#title2{
|
|
|
|
|
|
background: gray;
|
|
|
|
|
|
color: white;
|
|
|
|
|
|
width:auto;
|
|
|
|
|
|
height:20px;
|
|
|
|
|
|
position:absolute;
|
|
|
|
|
|
top:8px;
|
|
|
|
|
|
left:50px;
|
|
|
|
|
|
}
|
|
|
|
|
|
#test{
|
|
|
|
|
|
border: 1px solid #333;
|
|
|
|
|
|
width:200px;
|
|
|
|
|
|
height:150px;
|
|
|
|
|
|
position:absolute;
|
|
|
|
|
|
bottom:5px;
|
|
|
|
|
|
left: 28px;
|
|
|
|
|
|
}
|
|
|
|
|
|
#title1{
|
|
|
|
|
|
background: gray;
|
|
|
|
|
|
color: white;
|
|
|
|
|
|
width:auto;
|
|
|
|
|
|
height:20px;
|
|
|
|
|
|
position:absolute;
|
|
|
|
|
|
left:50px;
|
|
|
|
|
|
bottom:150px;
|
|
|
|
|
|
}
|
|
|
|
|
|
#back{
|
|
|
|
|
|
border: 1px solid #333;
|
|
|
|
|
|
width:200px;
|
|
|
|
|
|
height:600px;
|
|
|
|
|
|
position:absolute;
|
|
|
|
|
|
right:0px;
|
|
|
|
|
|
top:20px;
|
|
|
|
|
|
}
|
|
|
|
|
|
#title{
|
|
|
|
|
|
background: gray;
|
|
|
|
|
|
color: white;
|
|
|
|
|
|
width:auto;
|
|
|
|
|
|
height:20px;
|
|
|
|
|
|
position:absolute;
|
|
|
|
|
|
right:130px;
|
|
|
|
|
|
top:8px;
|
|
|
|
|
|
}
|
|
|
|
|
|
#color{
|
|
|
|
|
|
width: 32px;
|
|
|
|
|
|
height:32px;
|
|
|
|
|
|
position:absolute;
|
|
|
|
|
|
right:150px;
|
|
|
|
|
|
top:106px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
#bcolor{
|
|
|
|
|
|
width: 32px;
|
|
|
|
|
|
height:32px;
|
|
|
|
|
|
position:absolute;
|
|
|
|
|
|
right:100px;
|
|
|
|
|
|
top:106px;
|
|
|
|
|
|
}
|
|
|
|
|
|
#range{
|
|
|
|
|
|
width:80px;
|
|
|
|
|
|
height:32px;
|
|
|
|
|
|
position:absolute;
|
|
|
|
|
|
right:10px;
|
|
|
|
|
|
top:106px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
#undo{
|
|
|
|
|
|
width:50px;
|
|
|
|
|
|
height:25px;
|
|
|
|
|
|
position:absolute;
|
|
|
|
|
|
right:130px;
|
|
|
|
|
|
top:56px;
|
|
|
|
|
|
cursor:pointer;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
#redo{
|
|
|
|
|
|
width:50px;
|
|
|
|
|
|
height:25px;
|
|
|
|
|
|
position:absolute;
|
|
|
|
|
|
right:70px;
|
|
|
|
|
|
top:56px;
|
|
|
|
|
|
cursor:pointer;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
#save{
|
|
|
|
|
|
width:50px;
|
|
|
|
|
|
height:25px;
|
|
|
|
|
|
position:absolute;
|
|
|
|
|
|
right:10px;
|
|
|
|
|
|
top:56px;
|
|
|
|
|
|
cursor:pointer;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
#text{
|
|
|
|
|
|
width: 180px;
|
|
|
|
|
|
height:25px;
|
|
|
|
|
|
position:absolute;
|
|
|
|
|
|
bottom:10px;
|
|
|
|
|
|
right:10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body background-color="rgba(0,0,0,0.5)">
|
|
|
|
|
|
<div class="box">
|
|
|
|
|
|
<canvas id="canvas" width="1000" height="600"></canvas>
|
|
|
|
|
|
<div id="title2">绘图区</div>
|
|
|
|
|
|
<div id="back"></div>
|
|
|
|
|
|
<div id="title">工具箱</div>
|
|
|
|
|
|
<input type="color" id="color" title="前景色" value="#000000"/>
|
|
|
|
|
|
<input type="color" id="bcolor" title="背景色" value="#FFFFFF"/>
|
|
|
|
|
|
<input type="range" id="range" min="1" max="10" title="画笔粗细" value="1"/>
|
|
|
|
|
|
<input type="button" id="undo" onclick="undo();" title="撤销上一步操作" value="撤销" disabled/>
|
|
|
|
|
|
<input type="button" id="redo" onclick="redo();" title="恢复上一步操作" value="重做" disabled/>
|
|
|
|
|
|
<input type="button" id="save" onclick="save();" title="保存绘制结果" value="保存" disabled/>
|
|
|
|
|
|
<div id="tools">
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<input type="text" id="text" value="开始" title="输入文本" hidden/>
|
|
|
|
|
|
<div id="test">
|
|
|
|
|
|
<br/>
|
|
|
|
|
|
1<br/>
|
|
|
|
|
|
2<br/>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div id="title1">题目要求</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
//画布对象
|
|
|
|
|
|
var canvas=document.getElementById("canvas");
|
|
|
|
|
|
//工具箱对象
|
|
|
|
|
|
var back=document.getElementById("back");
|
|
|
|
|
|
//题目对象
|
|
|
|
|
|
var test=document.getElementById("test");
|
|
|
|
|
|
//绘画操作对象
|
|
|
|
|
|
var cxt=canvas.getContext("2d");
|
|
|
|
|
|
//前景色对象
|
|
|
|
|
|
var color=document.getElementById("color");
|
|
|
|
|
|
//背景色对象
|
|
|
|
|
|
var bcolor = document.getElementById("bcolor");
|
|
|
|
|
|
//画笔大小对象
|
|
|
|
|
|
var size=document.getElementById("range");
|
|
|
|
|
|
//加载工具
|
|
|
|
|
|
var tools = document.getElementById("tools");
|
|
|
|
|
|
loadTools(tools);
|
|
|
|
|
|
//文本对象
|
|
|
|
|
|
var text = document.getElementById("text");
|
|
|
|
|
|
text.hidden = false;
|
|
|
|
|
|
//界面自适应处理
|
|
|
|
|
|
function resize(){
|
|
|
|
|
|
canvas.width = window.innerWidth - 250;
|
|
|
|
|
|
canvas.height = window.innerHeight - 200;
|
|
|
|
|
|
back.style.height = (window.innerHeight - 28) + "px";
|
|
|
|
|
|
test.style.width = (window.innerWidth - 250) + "px";
|
|
|
|
|
|
}
|
|
|
|
|
|
resize();
|
|
|
|
|
|
//窗口自适应事件
|
|
|
|
|
|
window.onresize = function(e){
|
|
|
|
|
|
resize();
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
//鼠标按下
|
|
|
|
|
|
canvas.onmousedown= function (e) {
|
|
|
|
|
|
myMouseDown(e, this);
|
|
|
|
|
|
};
|
|
|
|
|
|
//鼠标移动
|
|
|
|
|
|
canvas.onmousemove= function (e) {
|
|
|
|
|
|
myMouseMove(e, this);
|
|
|
|
|
|
}
|
|
|
|
|
|
//鼠标松开
|
|
|
|
|
|
canvas.onmouseup= function (e) {
|
|
|
|
|
|
myMouseUp(e, this);
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
