由于偶然因素，制作了一个简陋的网页画板，本来只是想做一个在不同div之间画连线的功能，后来便想做个网页画板，配合服务器的话，还可以将画的画直接转换成图片下载到本地。至于其他扩展，完全在于发挥想象空间了，技术很基础，js，css,java而已，但重要的是想法和思路。和大家分享一下，抛砖引玉而已罢了。
这里给出的源文件，直接到本地用IE6打开GrapDrawLine.html即可，由于在制作的时候并没有考虑支持多浏览器，所以不方便的请大家原谅。
可运行的完成代码（附带js，css，资源文件等），打包在附件里。
先截个图：
![]()
![]()
![]()
<!--GrapDrawLine.html-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>画布,网页线条绘制</title>
<link rel="stylesheet" href="../css/olas-sv.css" type="text/css"/>
<script type="text/javascript" src="../js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="../js/ui.core.js"></script>
<script type="text/javascript" src="../js/ui.draggable.js"></script>
<script type="text/javascript">
<!--
var bIsMouseDown = false;
var dotNode = null;
$(function(){
dotNode = $('#dotDiv');
$('.canvas_top').mousedown(startDraw).mouseup(stopDraw).mousemove(draw);
setColorer();
});
}
function drawDot(x,y){
dotNode.clone(false).css({left:x,top:y}).appendTo('body').show();
}
function draw(el){
var x = event.clientX;
var y = event.clientY;
$('.status_bar').text('鼠标位置：(' + x + ',' + y + ')');
if(event.button != 1){
bIsMouseDown = false;
return;
}
if(bIsMouseDown){
drawDot(x,y);
}
}
function startDraw(){
if(event.button == 1){
bIsMouseDown = true;
setDrawCursor(null,true);
}
}
function stopDraw(){
bIsMouseDown=false;
setDrawCursor(null,false);
$('#memberInfoDiv').hide();
}
function setDrawCursor(drawTye,isDrawing){
if(isDrawing){
$('.canvas_top').css({cursor:'../images/pen/drawPen.CUR'});
}else{
$('.canvas_top').css({cursor:'../images/pen/waitingDraw.CUR'});
}
}
function setColorer(){
$('.tool_item_colorer').click(function(){
var color = $(this).css('background-color');
dotNode.css({background:color});
});
}
function showDom(){
alert(body.innerHTML);
}
//-->
</script>
<body>
<div class="tool_bar">
<div class="tool_item_colorer" style="background-color:#00ff00;left:10">绿色</div>
<div class="tool_item_colorer" style="background-color:#ff0000;left:110">红色</div>
<div class="tool_item_colorer" style="background-color:#0000ff;left:210">蓝色</div>
<div class="tool_item_colorer" style="background-color:#ffffff;left:310">白色</div>
<div class="tool_item_colorer" style="background-color:#ff00ff;left:410">洋红</div>
<div class="tool_item_colorer" style="background-color:#00ffff;left:510">墨绿</div>
<div class="tool_item_colorer" style="background-color:#ffff00;left:610">黄色</div>
<div class="tool_item_colorer" style="background-color:#000000;left:710">黑色</div>
<div class="tool_item_colorer" style="background-color:#32cd32;left:810">浅绿</div>
<div class="tool_item_colorer" style="background-color:#70db93;left:910">碧绿</div>
<div class="tool_item_colorer" style="background-color:#9932cd;left:1010">紫色</div>
<div class="tool_item_colorer" style="background-color:#ff7f00;left:1110">橘色</div>
</div>
<div class="canvas_top">
</div>
<div id= 'dotDiv' style="left:100;top:300;display:none" class="drawUnit"></div>
<div class="status_bar"></div>
![]()
![]()
olas_sv
a.member_anchor{
background:url(../images/titlebg.gif);
margin-left:5;
margin-right:5;
text-decoration:underline
}
div.member_info{
position:absolute;
width:200;
height:170;
border: #FFFFFF 3px solid;
position:absolute;
z-index:400;
display:none;
background-color:#aaccff
}
div.text_container{
background-color:#ffffff;
width:460;
height:22;
border:1px;
margin-left:8px;
border-style:groove;
margin-bottom:2px
}
div.textarea_container{
background-color:#ffffff;
width:575;
height:60;
border:1px;
margin-left:7px;
border-style:groove;
overflow:auto
}
div.group_box{
cursor:crosshair;
background-color:#aaccff;
width:80;
height:200;
border:3px;
border-style:outset;
border-color:#ffffff;
position:absolute;
overflow:hidden;
padding:15px;
z-index:100;
}
div.canvas{
background-color:#ffffff;
width:100%;
height:100%;
border:3px;
border-style:groove;
border-color:#ffffff;
position:absolute;
overflow:auto;
z-index:10;
}
div.canvas_top{
background-color:#ffffff;
width:100%;
height:100%;
border:3px;
border-style:groove;
border-color:#ffffff;
position:absolute;
overflow:auto;
z-index:500;
filter:alpha(opacity=20);
-moz-opacity:0.2;
cursor:url('../images/pen/waitingDraw.CUR')
}
div.drawUnit{
border-color:#00ff00;
background-color:#00ff00;
position:absolute;
z-index:100;
width:1em;
height:1em;
}
div.status_bar{
width:100%;
height:30;
background-color:#ffffff;
border-style:outset;
position:absolute;
z-index:200;
top:800;
}
div.tool_bar{
width:100%;
height:30;
background-color:#aaccff;
border-style:outset;
position:absolute;
z-index:600;
top:0;
}
div.tool_item_colorer{
width:60;
height:20;
border-style:outset;
z-index:600;
top:0;
position:absolute;
margin-left:10px;
cursor:url('../images/pen/GetColor.CUR');
}
div.tool_item_dom{
width:100;
height:20;
border-style:outset;
z-index:600;
top:750;
left:1100;
position:absolute;
margin-right:10px;
background-color:#aaaaaa;
cursor:url('../images/cursor/Hand.ani');
}
![]()
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title>画布,网页线条绘制</title>
<link rel="stylesheet" href="../css/ct-style.css" type="text/css"/>
<link rel="stylesheet" href="../css/olas-sv.css" type="text/css"/>
<script type="text/javascript" src="../js/jquery-1.3.2.js"></script>
<script type="text/javascript" src="../js/ui.core.js"></script>
<script type="text/javascript" src="../js/ui.draggable.js"></script>
<script type="text/javascript">
<!--
var bIsMouseDown = false;
var dotNode = null;
$(function(){
dotNode = $('#dotDiv');
$('.canvas_top').mousedown(startDraw).mouseup(stopDraw).mousemove(draw);
setColorer();
});
}
function drawDot(x,y){
dotNode.clone(false).css({left:x,top:y}).appendTo('body').show();
}
function draw(el){
var x = event.clientX;
var y = event.clientY;
$('.status_bar').text('鼠标位置：(' + x + ',' + y + ')');
if(event.button != 1){
bIsMouseDown = false;
return;
}
if(bIsMouseDown){
drawDot(x,y);
}
}
function startDraw(){
if(event.button == 1){
bIsMouseDown = true;
setDrawCursor(null,true);
}
}
function stopDraw(){
bIsMouseDown=false;
setDrawCursor(null,false);
$('#memberInfoDiv').hide();
}
function setDrawCursor(drawTye,isDrawing){
if(isDrawing){
$('.canvas_top').css({cursor:'../images/pen/drawPen.CUR'});
}else{
$('.canvas_top').css({cursor:'../images/pen/waitingDraw.CUR'});
}
}
function setColorer(){
$('.tool_item_colorer').click(function(){
var color = $(this).css('background-color');
dotNode.css({background:color});
});
}
function showDom(){
alert(body.innerHTML);
}
//-->
</script>
<body>
<div class="tool_bar">
<div class="tool_item_colorer" style="background-color:#00ff00;left:10">绿色</div>
<div class="tool_item_colorer" style="background-color:#ff0000;left:110">红色</div>
<div class="tool_item_colorer" style="background-color:#0000ff;left:210">蓝色</div>
<div class="tool_item_colorer" style="background-color:#ffffff;left:310">白色</div>
<div class="tool_item_colorer" style="background-color:#ff00ff;left:410">洋红</div>
<div class="tool_item_colorer" style="background-color:#00ffff;left:510">墨绿</div>
<div class="tool_item_colorer" style="background-color:#ffff00;left:610">黄色</div>
<div class="tool_item_colorer" style="background-color:#000000;left:710">黑色</div>
<div class="tool_item_colorer" style="background-color:#32cd32;left:810">浅绿</div>
<div class="tool_item_colorer" style="background-color:#70db93;left:910">碧绿</div>
<div class="tool_item_colorer" style="background-color:#9932cd;left:1010">紫色</div>
<div class="tool_item_colorer" style="background-color:#ff7f00;left:1110">橘色</div>
</div>
<div class="canvas_top">
</div>
<div id= 'dotDiv' style="left:100;top:300;display:none" class="drawUnit"></div>
<div class="status_bar"></div>
浙公网安备 33010602011771号