Javascript HTML5绘图应用程序中的拖动功能
我使用HTML5画布和java脚本创建了简单的绘画应用程序。我想在我的应用程序中添加拖动功能。ie圆可以从一个地方拖动到另一个地方，就像我们在ms paint中看到的那样 为了拖动特性工作，我的代码中需要做的所有更改。请帮忙 我的代码如下Javascript HTML5绘图应用程序中的拖动功能,javascript,html,html5-canvas,paint,Javascript,Html,Html5 Canvas,Paint,我使用HTML5画布和java脚本创建了简单的绘画应用程序。我想在我的应用程序中添加拖动功能。ie圆可以从一个地方拖动到另一个地方，就像我们在ms paint中看到的那样 为了拖动特性工作，我的代码中需要做的所有更改。请帮忙 我的代码如下 <!doctype html> <html> <head> <title>Paint</title> <style type="text/css"> #paintbg { ba
<!doctype html>
<html>
<head>
<title>Paint</title>
<style type="text/css">
#paintbg {
background-color: #333333;
}
#realCanvas, #tempCanvas {
position: absolute;
left:350px;
top:55px;
border: 5px double gray;
cursor: crosshair;
}
#toolset {
width: 80px;
position: absolute;
left:240px;
top:50px;
background:#35d128;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
#colorset{
background:#aaaaaa;
position: absolute;
left:350px;
top:520px;
border:1px solid #888888;
}
#tools{
background:#358128;
color:#f3f3f3;
width:80px;
height:25px;
border:1px solid #33842a;
-webkit-border-radius: 0 15px 15px 0;
-moz-border-radius: 0 15px 15px 0;
box-shadow: rgba(0, 0, 0, .75) 0 2px 6px;
}
#tools:hover{
color:#edebda;
-webkit-box-shadow: rgba(0, 0, 0, .25) 0 1px 0px;
-moz-box-shadow: rgba(0, 0, 0, .25) 0 1px 0px;
box-shadow: rgba(0, 0, 0, .25) 0 1px 0px;
}
#tools:active{
background:#014400;
width:75px
}
</style>
</head>
<body id="paintbg">
<form>
<fieldset id="toolset">
<br><button id="tools" type="button" onclick="curr_tool('circle')">Circle</button></br>
<br><button id="tools" type="button" onclick="clears()">Clear</button></br>
</fieldset>
</form>
<div>
<canvas id="realCanvas" width="700" height="450" style=" background-color: #ffffff; z-index: 0" ></canvas>
<canvas id="tempCanvas" width="700" height="450" style="z-index: 1"></canvas>
</div>
<fieldset id="colorset">
<table >
<tr>
<td><input type="checkbox" id="fill"/>Fill</td>
<td><button onclick="fillcolor('#000000')" style="background-color: #000000; height: 20px; width: 20px;"></button></td>
<td><button onclick="fillcolor('#ff0000')" style="background-color: #ff0000; height: 20px; width: 20px;"></button></td>
<td><button onclick="fillcolor('#ff7f00')" style="background-color: #ff7f00; height: 20px; width: 20px;"></button></td>
<td><button onclick="fillcolor('#ffff00')" style="background-color: #ffff00; height: 20px; width: 20px;"></button></td>
<td><button onclick="fillcolor('#ffffff')" style="background-color: #ffffff; height: 20px; width: 20px;"></button></td>
<td><button onclick="fillcolor('#00ff00')" style="background-color: #00ff00; height: 20px; width: 20px;"></button></td>
<td><button onclick="fillcolor('#008800')" style="background-color: #008800; height: 20px; width: 20px;"></button></td>
<td><button onclick="fillcolor('#00ffff')" style="background-color: #00ffff; height: 20px; width: 20px;"></button></td>
<td><button onclick="fillcolor('#0000ff')" style="background-color: #0000ff; height: 20px; width: 20px;"></button></td>
<td><button onclick="fillcolor('#8b00ff')" style="background-color: #8b00ff; height: 20px; width: 20px;"></button></td>
</tr>
<tr>
<td><input type="checkbox" id="outline" checked="checked"/>Outline</td>
<td><button onclick="linecolor('#000000')" style="background-color: #000000; height: 20px; width: 20px;"></button></td>
<td><button onclick="linecolor('#ff0000')" style="background-color: #ff0000; height: 20px; width: 20px;"></button></td>
<td><button onclick="linecolor('#ff7f00')" style="background-color: #ff7f00; height: 20px; width: 20px;"></button></td>
<td><button onclick="linecolor('#ffff00')" style="background-color: #ffff00; height: 20px; width: 20px;"></button></td>
<td><button onclick="linecolor('#ffffff')" style="background-color: #ffffff; height: 20px; width: 20px;"></button></td>
<td><button onclick="linecolor('#00ff00')" style="background-color: #00ff00; height: 20px; width: 20px;"></button></td>
<td><button onclick="linecolor('#008800')" style="background-color: #008800; height: 20px; width: 20px;"></button></td>
<td><button onclick="linecolor('#00ffff')" style="background-color: #00ffff; height: 20px; width: 20px;"></button></td>
<td><button onclick="linecolor('#0000ff')" style="background-color: #0000ff; height: 20px; width: 20px;"></button></td>
<td><button onclick="linecolor('#8b00ff')" style="background-color: #8b00ff; height: 20px; width: 20px;"></button></td>
</table>
</fieldset>
<script>
var board = document.getElementById("realCanvas");
var tmp_board = document.getElementById("tempCanvas");
b_width = board.width;
b_height = board.height;
var ctx = board.getContext("2d");
var tmp_ctx = tmp_board.getContext("2d");
var x ;
var y ;
var hold = false;
var fill = false;
var stroke = true;
var tool = 'pencil';
tmp_ctx.lineJoin = 'round';
tmp_ctx.lineCap = 'round';
function curr_tool(selected){tool = selected;}
function attributes(){
if (document.getElementById("fill").checked)
fill = true;
else
fill = false;
if (document.getElementById("outline").checked)
stroke = true;
else
stroke = false;
}
function clears(){
ctx.clearRect(0, 0, b_width, b_height);
}
function linecolor(scolor){
if (document.getElementById("outline").checked)
tmp_ctx.strokeStyle = scolor;
}
function fillcolor(fcolor){
if (document.getElementById("fill").checked)
tmp_ctx.fillStyle = fcolor;
}
tmp_board.onmousedown = function(e) {
attributes();
x = e.pageX - this.offsetLeft;
y = e.pageY -this.offsetTop;
hold = true;
begin_x = x;
begin_y = y;
tmp_ctx.beginPath();
tmp_ctx.moveTo(begin_x, begin_y);
}
tmp_board.onmousemove = function(e) {
if (x == null || y == null) {
return;
}
if(hold){
x = e.pageX - this.offsetLeft;
y = e.pageY - this.offsetTop;
goDraw();
}
}
tmp_board.onmouseup = function(e) {
ctx.drawImage(tmp_board,0, 0);
tmp_ctx.clearRect(0, 0, tmp_board.width, tmp_board.height);
x = null;
y = null;
hold = false;
}
tmp_board.ondblclick=function(e) {
goDraws();
}
function goDraw(){
if (tool == 'circle'){
tmp_ctx.clearRect(0, 0, b_width, b_height);
tmp_ctx.beginPath();
tmp_ctx.arc(begin_x, begin_y, Math.abs(y - begin_y), 0 , 2 * Math.PI, false);
if(stroke)
tmp_ctx.stroke();
if(fill)
tmp_ctx.fill();
}
}
function goDraws(){
tmp_ctx.beginPath();
tmp_ctx.arc(begin_x, begin_y, 100, 0 , 2 * Math.PI, false);
tmp_ctx.fillStyle = 'white';
tmp_ctx.fill()
ctx.drawImage(tmp_board,0, 0);
tmp_ctx.clearRect(0, 0, tmp_board.width, tmp_board.height);
x = null;
y = null;
hold = false;
}
</script>
</body>
</html>