1. 首页
  2. 问答
  3. 我想绘制一个平行四边形在我的绘画应用程序。我有一个帆布

我想绘制一个平行四边形在我的绘画应用程序。我有一个帆布

2014-01-08 55 views
-1

我最初和最后的坐标（点击鼠标上并onmouse离开）。如何才能找到剩下的坐标，并在画布上画出一个平行四边形我想绘制一个平行四边形在我的绘画应用程序。我有一个帆布

来源

2014-01-08 user2981823

+0

你如何使用坐标绘制平行四边形？你在使用某种图形库吗？ –

+0

我正在使用LineTo（）方法绘制平行四边形。我没有使用任何graphis。我想找出剩下的两个坐标来绘制平行四边形。我怎样才能从第一个和最后一个坐标获得剩余的坐标？ – user2981823

+1

等等...那么问题是什么？ –

回答

0

，如果你已经有了X0/Y0和X3/Y3 ，你可以找到与其他坐标：

var width = 10; //choose your parallelogram width 

x1 = x0 + width; 
y1 = y0; 

x2 = x3 + width; 
y2 = y3;

然后得出：

var c=document.getElementById("myCanvas"); 
var ctx=c.getContext("2d"); 
ctx.beginPath(); 
ctx.moveTo(x0,y0); 
ctx.lineTo(x1,y1); 
ctx.lineTo(x2,y2); 
ctx.lineTo(x3,y3); 
ctx.closePath(); 
ctx.stroke();

来源

2014-01-08 07:25:39 ylerjen

+0

谢谢..它帮助我.. – user2981823

0 
<!DOCTYPE html> 
<html> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> 
</script> 
<script> 
$(document).ready(function(){ 
$("#tools").hide(); 
$("#shapes").click(function(){ 
$("#tools").toggle(); 
}); 
$("#draw").hide(); 
$("#cancel").hide(); 
$("#rows").hide(); 
$("#tableoptions").hide(); 

$("#textoptions").hide(); 

    $("#table").click(function(){ 
    $("#draw").show(); 
    $("#cancel").show(); 
    $("#rows").show(); 
    $("#col").show(); 
    $("#tableoptions").show(); 
    }); 


    $("#draw").click(function(){ 
    //table(); 
    }); 

    $("#cancel").click(function(){ 

    $("#rows").hide(); 

    $("#col").hide(); 
    $("#draw").hide(); 
    $("#cancel").hide(); 
    $("#tableoptions").hide(); 
    }); 
    $("#text").click(function() { 
    $("#textoptions").show(); 
    }); 
        $("#canceltext").click(function(){ 
    $("#textoptions").hide(); 
    }); 

}); 

</script> 
<style> 
body 
{ 
background: Skyblue; 
} 
#shapes 
{ 
top:200px; 
} 
#buttons 
{ 
display:block; 
} 
#container 
{ 
overflow:hidden; 
} 
#tools 
{ 
background:Aqua; 
float:left; 
} 

    #sketch { 
float:left; 
border: 10px solid black; 
     margin-left: 50px; 
     width: 700px; 
     height: 500px; 
     position: relative; 
background:white; 
    } 

    #tmp_canvas { 
     position: absolute; 
     left: 0; right: 0; 
     bottom: 0; top: 0; 
     cursor: crosshair; 
    } 
</style> 
</head> 
<body> 

<b>TITLE</b><input type="text" id="title" > 
<br> 
<br> 
<input type="file" id="f" name="fname"><br><br> 
Stroke color: <select id='strokeStyleSelect'> 
<option value='red'>red</option> 
<option value='green'>green</option> 
<option value='blue'>blue</option> 
<option value='orange'>orange</option> 
<option value='cornflowerblue'>cornflowerblue</option> 
<option value='goldenrod'>goldenrod</option> 
<option value='navy' >navy</option> 
<option value='purple'>purple</option> 
<option value='purple'>purple</option> 
</select> 
Fill color: <select id='fillStyleSelect'> 
<option value='rgba(255,0,0,0.5)'>semi-transparent red</option> 
<option value='green'>green</option> 
<option value='rgba(0,0,255,0.5)'>semi-transparent blue</option> 
<option value='orange'>orange</option> 
<option value='rgba(100,140,230,0.5)'>semi-transparent cornflowerblue</option> 
<option value='goldenrod' >goldenrod</option> 
<option value='navy'>navy</option> 
<option value='purple'>purple</option> 
</select> 
Line width: <select id='lineWidthSelect'> 
<option value='1.0'>1.0</option> 
<option value='2.0'>2.0</option> 
<option value='3.0'>3.0</option> 
<option value='4.0'>4.0</option> 
<option value='5.0'>5.0</option> 
<option value='6.0'>6.0</option> 
</select> 
Opacity: <select id='op'> 

     <option value='100'>0</option> 
         <option value='0.2'>1</option> 
         <option value='0.4'>2</option> 
         <option value='0.6'>3</option> 
         <option value='6'>4</option> 
         <option value='8'>5</option> 
         <option value='10'>6</option> 
        </select> 
Fill <input id='fillCheckbox' type='checkbox' checked/> 
<div id="container" > 
<button id="shapes" type="button" ><img src="shapes.jpg" width="40" height="40" style="border:1px solid black;"/></button>&nbsp; &nbsp;<br> 
<div id="tools" style="border:1px solid black;" align="center">&nbsp; &nbsp; 
<button id="brush" type="button" ><img src = "scribble.jpg" width="40" height="40" style="border: 1px solid black;"/></button>&nbsp; &nbsp;<br> 
<button id = "rectangle" type = "button"><img src="rect.jpg" width="40" height="40" /></button><br> 
<button id = "line" type="button" ><img src="line.jpg" width="40" height="40" ></button><br> 
<button id = "circle" type="button"><img src="circle.jpg"/ width="40" height="40"></button><br> 
<button id="parallel" type="button"><img src="parallel.jpg" width="40" height="40"/></button><br> 
<button id="ellipse" type="button"><img src="ellipse.jpg" width="40" height="40"/></button><br> 
<button id="arrow" type="button"><img src="arrow.jpg" width="40" height="40"/></button><br> 
<button id="table" type="button"><img src="table.jpg" width="40" height="40"/></button><br> 
<button id = "text" type="button"><img src="text.jpg" width=40" height="40"/></button><br> 
<div id="textoptions"> 
<input type="text" id="val" name="text" placeholder="enter text" size="10"><br> 
<button type="button" id="entertext" onclick="text()">Ok</button> 
<button type="button" id="canceltext" onclick="cancelText()">Cancel</button> 
</div> 
<div id="tableoptions"> 
<input id="rows" type="text" placeholder="rows" size="1"> 
<input id="col" type="text" placeholder="cols" size="1"><br> 
<button type="button" id="draw" onclick="table()" style="width:20;">Draw</button> 
<button type="button" id="cancel" onclick="cancel()" style="width:20;">Cancel</button> 
</div> 
<button type="button" id="erase"><img src="eraser.jpg" width="40" height="40" /></button> 
</div> 
<br><br> 
<div id="sketch" > 
    <canvas id="paint"></canvas> 
</div> 
</div> 
<br><br> 
<div id="button"> 
<button type="button" onclick="saveCanvas()">Save</button> 
<button type="button" onclick="clearC()">Clear</button> 
<!--<button type="button" id="erase" onclick="erase()">Erase</button>--> 
<button type="button" onclick="cUndo()">Undo</button> 
<button type="button" onclick="cRedo()">Redo</button> 
<!--<button type="button" onclick="drawGrid(ctx,'lightgray',20,20)">Grid</button>--> 
</div> 
<script> 


var tool = ' '; 
     $('#tools button').on('click', function(){ 
      tool = $(this).attr('id'); 
      console.log(tool); 
     }); 
var canvas = document.querySelector('#paint'); 
var ctx = canvas.getContext('2d'); 
var sketch = document.querySelector('#sketch'); 
var sketch_style = getComputedStyle(sketch); 
canvas.width = parseInt(sketch_style.getPropertyValue('width')); 
canvas.height = parseInt(sketch_style.getPropertyValue('height')); 

var isText = false; 

// Creating a tmp canvas 
var tmp_canvas = document.createElement('canvas'); 
var tmp_ctx = tmp_canvas.getContext('2d'); 
tmp_canvas.id = 'tmp_canvas'; 
tmp_canvas.width = canvas.width; 
tmp_canvas.height = canvas.height; 
sketch.appendChild(tmp_canvas); 
var mouse = {x: 0, y: 0}; 
var start_mouse = {x: 0, y: 0}; 
var last_mouse = {x: 0, y: 0}; 

/* Mouse Capturing Work */ 
     tmp_canvas.addEventListener('mousemove', function(e) { 

      mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX; 
      mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY; 
     }, false); 




tmp_canvas.addEventListener('mousedown', function(e) { 
tmp_ctx.lineWidth= lineWidthSelect.value; 
    tmp_ctx.strokeStyle = strokeStyleSelect.value; 
    tmp_ctx.globalAlpha =op.value;  
mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX; 
       mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY; 

       start_mouse.x = mouse.x; 
       start_mouse.y = mouse.y; 

if(tool == 'line'){ 
tmp_canvas.addEventListener('mousemove', onLinePaint, false); 
       onLinePaint(); 
} 
else if(tool == 'rectangle'){ 
tmp_canvas.addEventListener('mousemove', onRectPaint, false); 
onRectPaint(); 
}       
else if(tool == 'brush'){ 
tmp_canvas.addEventListener('mousemove', onBrushPaint, false); 
onBrushPaint(); 
} 
else if(tool == 'circle'){ 
tmp_canvas.addEventListener('mousemove', onCirclePaint, false); 
onCirclePaint(); 
} 
else if (tool == 'ellipse'){ 
tmp_canvas.addEventListener('mousemove', onEllipsePaint,false); 
onEllipsePaint(); 
} 

else if(tool == 'parallel'){ 
tmp_canvas.addEventListener('mousemove', onParallelPaint,false); 
onParallelPaint(); 
} 
else if (tool == 'arrow') 
{ 
tmp_canvas.addEventListener('mousemove', onArrowPaint,false); 
onArrowPaint(); 
} 
else if(tool = 'erase') 

{ 
tmp_canvas.addEventListener('mousemove', onErase, false); 
       onErase(); 
} 

else if(tool == 'draw') 
{ 
tmp_canvas.addEventListener('mousemove', onTablePaint,false); 
onTablePaint; 
} 
else if(tool=='cancel') 
{ 
tmp_canvas.removeEventListener('mousemove',onTablePaint,false); 
} 

else if(tool == 'entertext') 
{ 
isText = true; 

if (isText == true) { 
mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX; 
mouse.y = typeof e.offsetY !== ' undefined' ? e.offsetY : e.layerY; 
var a= mouse.x; 
var b= mouse.y; 
var t= document.getElementById("val").value; 
ctx.font='italic 20px sans-serif'; 
ctx.fillText(t,a,b); 
} 
} 
else if(tool=='canceltext') 
{ 

isText = false; 

} 

else 
{ 
tmp_canvas.addEventListener('mousedown',function(){ 
tmp_canvas.onmousedown = null; 
},false); 
} 


}, false); 

tmp_canvas.addEventListener('mouseup', function() { 
tmp_canvas.removeEventListener('mousemove', onLinePaint, false); 
tmp_canvas.removeEventListener('mousemove', onRectPaint, false); 
tmp_canvas.removeEventListener('mousemove', onBrushPaint, false); 
tmp_canvas.removeEventListener('mousemove',onCirclePaint,false);  
tmp_canvas.removeEventListener('mousemove',onEllipsePaint,false); 
tmp_canvas.removeEventListener('mousemove',onParallelPaint,false); 
tmp_canvas.removeEventListener('mousemove', onArrowPaint,false); 
tmp_canvas.removeEventListener('mousemove',onTablePaint,false); 
tmp_canvas.removeEventListener('mousemove', onErase,false); 
// Writing down to real canvas now 
ctx.drawImage(tmp_canvas, 0, 0); 
// Clearing tmp canvas 
tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height); 
cPush();        
ppts = []; 


}, false); 









/*Touch Capturing Work */ 
     tmp_canvas.addEventListener('touchmove', function(e) { 

      mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX; 
      mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY; 
     }, false); 




tmp_canvas.addEventListener('touchstart', function(e) { 
    tmp_ctx.lineWidth= lineWidthSelect.value; 
    tmp_ctx.strokeStyle = strokeStyleSelect.value; 
    tmp_ctx.globalAlpha =op.value; 
mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX; 
       mouse.y = typeof e.offsetY !== 'undefined' ? e.offsetY : e.layerY; 

       start_mouse.x = mouse.x; 
       start_mouse.y = mouse.y; 





if(tool == 'line'){ 
tmp_canvas.addEventListener('touchmove', onLinePaint, false); 
       onLinePaint(); 
} 
else if(tool == 'rectangle'){ 
tmp_canvas.addEventListener('touchmove', onRectPaint, false); 
onRectPaint(); 
}       
else if(tool == 'brush'){ 
tmp_canvas.addEventListener('touchmove', onBrushPaint, false); 
onBrushPaint(); 
} 
else if(tool == 'circle'){ 
tmp_canvas.addEventListener('touchmove', onCirclePaint, false); 
onCirclePaint(); 
} 
else if (tool == 'ellipse'){ 
tmp_canvas.addEventListener('touchmove', onEllipsePaint,false); 
onEllipsePaint(); 
} 

else if(tool == 'parallel'){ 
tmp_canvas.addEventListener('touchmove', onParallelPaint,false); 
onParallelPaint(); 
} 
else if (tool == 'arrow') 
{ 
tmp_canvas.addEventListener('touchmove', onArrowPaint,false); 
onArrowPaint(); 
} 

else if(tool == 'draw') 
{ 
tmp_canvas.addEventListener('touchmove', onTablePaint,false); 
onTablePaint; 
} 
else if(tool=='cancel') 
{ 
tmp_canvas.removeEventListener('touchmove',onTablePaint,false); 
} 
else if(tool == 'entertext') 
{ 
isText = true; 
if (isText == true) { 
mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX; 
mouse.y = typeof e.offsetY !== ' undefined' ? e.offsetY : e.layerY; 
var a= mouse.x; 
var b= mouse.y; 
var t= document.getElementById("val").value; 
tmp_ctx.font='italic 20px sans-serif'; 
tmp_ctx.fillText(t,a,b); 
} 

} 
else if(tool=='canceltext') 
{ 

isText = false; 

} 
else if(tool = 'erase') 

{ 
tmp_canvas.addEventListener('touchmove', onErase, false); 
       onErase(); 
} 

/*else 
{ 
tmp_canvas.removeEventListener('touchstart',f 
}*/ 




}, false); 

tmp_canvas.addEventListener('touchend', function() { 


tmp_canvas.removeEventListener('touchmove', onLinePaint, false); 
tmp_canvas.removeEventListener('touchmove', onRectPaint, false); 
tmp_canvas.removeEventListener('touchmove', onBrushPaint, false); 
tmp_canvas.removeEventListener('touchmove',onCirclePaint,false);  
tmp_canvas.removeEventListener('touchmove',onEllipsePaint,false); 
tmp_canvas.removeEventListener('touchmove',onParallelPaint,false); 
tmp_canvas.removeEventListener('touchmove', onArrowPaint,false); 
tmp_canvas.removeEventListener('touchmove',onTablePaint,false); 
tmp_canvas.removeEventListener('touchmove', onErase,false); 
drawGrid(tmp_ctx,'Grey',25,25); 
// Writing down to real canvas now 
ctx.drawImage(tmp_canvas, 0, 0); 
// Clearing tmp canvas 
tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height); 
cPush();        
ppts = []; 
//ppt=[]; 

}, false); 


document.addEventListener('touchmove', function(e) { 
e.preventDefault(); 
}, 
false 
); 












/*LINE*/ 
var onLinePaint = function() { 
// Tmp canvas is always cleared up before drawing. 
tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height); 
tmp_ctx.beginPath(); 
tmp_ctx.moveTo(start_mouse.x, start_mouse.y); 
tmp_ctx.lineTo(mouse.x, mouse.y); 
tmp_ctx.stroke(); 
tmp_ctx.closePath(); 
}; 
/*RECTANGLE*/ 
var onRectPaint = function() { 
// Tmp canvas is always cleared up before drawing. 
tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height); 
var x = Math.min(mouse.x, start_mouse.x); 
var y = Math.min(mouse.y, start_mouse.y); 
var width = Math.abs(mouse.x - start_mouse.x); 
var height = Math.abs(mouse.y - start_mouse.y); 
tmp_ctx.strokeRect(x, y, width, height); 
if (fillCheckbox.checked) 
     tmp_ctx.fillRect(x,y,width,height); 
}; 

/*CIRCLE*/ 
var onCirclePaint = function() 
{ 
tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height); 
var x = (mouse.x + start_mouse.x)/2; 
var y = (mouse.y + start_mouse.y)/2; 
var radius = Math.max(Math.abs(mouse.x - start_mouse.x), 
Math.abs(mouse.y - start_mouse.y))/2; 
tmp_ctx.beginPath(); 
tmp_ctx.arc(x, y, radius, 0, Math.PI*2, false); 
// tmp_ctx.arc(x, y, 5, 0, Math.PI*2, false); 
tmp_ctx.stroke(); 
tmp_ctx.closePath(); 
if (fillCheckbox.checked) 
     tmp_ctx.fill(); 
}; 


/*ELLIPSE*/ 
var onEllipsePaint = function() 
{ 
tmp_ctx.clearRect(0,0,tmp_canvas.width,tmp_canvas.height); 
var x = Math.min(mouse.x, start_mouse.x); 
var y = Math.min(mouse.y,start_mouse.y); 
var w = Math.abs(mouse.x - start_mouse.x); 
var h = Math.abs(mouse.y - start_mouse.y); 
drawEllipse(tmp_ctx,x,y,w,h); 
}; 
function drawEllipse(ctx,x,y,w,h) 
{ 
var kappa = .5522848; 
var ox = (w/2)* kappa, 
oy = (h/2)*kappa, 
xe = x + w, 
ye = y + h, 
xm = x + w/2, 
ym = y + h/2; 
ctx.beginPath(); 
ctx.moveTo(x,ym); 
ctx.bezierCurveTo(x,ym - oy, xm - ox, y,xm,y); 
ctx.bezierCurveTo(xm + ox, y,xe,ym - oy, xe,ym); 
ctx.bezierCurveTo(xe, ym + oy, xm + ox, ye,xm,ye); 
ctx.bezierCurveTo(xm - ox, ye,x,ym + oy,x,ym); 
ctx.closePath(); 
ctx.stroke(); 
if (fillCheckbox.checked) 
     tmp_ctx.fill(); 
} 

/*PARALLEL*/ 
var onParallelPaint = function() 
{ 
tmp_ctx.clearRect(0,0,tmp_canvas.width,tmp_canvas.height); 
var k= Math.min(mouse.x, start_mouse.x); 
var l= Math.min(mouse.y,start_mouse.y); 
var width = Math.abs(mouse.x - start_mouse.x); 
var height = Math.abs(mouse.y - start_mouse.y); 
tmp_ctx.beginPath(); 
tmp_ctx.moveTo(k+ width*0.3, l); 
tmp_ctx.lineTo(k, l + height); 
tmp_ctx.lineTo(k + width*0.7, l + height); 
tmp_ctx.lineTo(k + width, l); 
tmp_ctx.lineTo(k + width*0.3, l); 
tmp_ctx.closePath(); 
tmp_ctx.stroke(); 
if (fillCheckbox.checked) 
     tmp_ctx.fill(); 
}; 

// Pencil Points 
var ppts = []; 
var onBrushPaint = function() { 
// Saving all the points in an array 
ppts.push({x: mouse.x, y: mouse.y}); 
if (ppts.length < 3) { 
var b = ppts[0]; 
tmp_ctx.beginPath(); 
//ctx.moveTo(b.x, b.y); 
//ctx.lineTo(b.x+50, b.y+50); 
tmp_ctx.arc(b.x, b.y, tmp_ctx.lineWidth/2, 0, Math.PI * 2, !0); 
tmp_ctx.fill(); 
tmp_ctx.closePath(); 
return; 
} 
// Tmp canvas is always cleared up before drawing. 
tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height); 
tmp_ctx.beginPath(); 
tmp_ctx.moveTo(ppts[0].x, ppts[0].y); 
for (var i = 1; i < ppts.length - 2; i++) { 
var c = (ppts[i].x + ppts[i + 1].x)/2; 
var d = (ppts[i].y + ppts[i + 1].y)/2; 
tmp_ctx.quadraticCurveTo(ppts[i].x, ppts[i].y, c, d); 
} 
// For the last 2 points 
tmp_ctx.quadraticCurveTo(
ppts[i].x, 
ppts[i].y, 
ppts[i + 1].x, 
ppts[i + 1].y 
); 
tmp_ctx.stroke(); 
}; 

/*ARROW*/ 

var onArrowPaint = function() 
{ 
tmp_ctx.clearRect(0, 0,tmp_canvas.width,tmp_canvas.height); 
var x1 = start_mouse.x; 
var y1 = start_mouse.y; 
var x2 = mouse.x; 
var y2 = mouse.y; 
tmp_ctx.beginPath(); 
tmp_ctx.moveTo(x1, y1); 
tmp_ctx.lineTo(x2, y2); 
tmp_ctx.stroke(); 
tmp_ctx.closePath(); 
var endRadians=Math.atan((y2-y1)/(x2-x1)); 
endRadians+=((x2>x1)?90:(-90))*Math.PI/180; 
drawArrowhead(tmp_ctx,x2,y2,endRadians); 
}; 
function drawArrowhead(ctx,x,y,radians) 
{ 
ctx.save(); 
ctx.beginPath(); 
ctx.translate(x,y); 
ctx.rotate(radians); 
ctx.moveTo(0,0); 
ctx.lineTo(8,20); 
ctx.lineTo(-8,20); 
ctx.closePath(); 
ctx.fill(); 
ctx.restore(); 
} 


/*ERASER*/ 
var ppt = []; 
var onErase = function() { 
//tmp_ctx.lineWidth=20; 
//tmp_ctx.strokeStyle = "White"; 
//tmp_ctx.globalAlpha=100; 
ppt.push({x: mouse.x, y: mouse.y}); 
if (ppt.length < 3) { 
var b = ppt[0]; 
tmp_ctx.beginPath(); 
//ctx.moveTo(b.x, b.y); 
//ctx.lineTo(b.x+50, b.y+50); 
tmp_ctx.arc(b.x, b.y, tmp_ctx.lineWidth/2, 0, Math.PI * 2, !0); 
tmp_ctx.fill(); 
tmp_ctx.closePath(); 
return; 
} 
// Tmp canvas is always cleared up before drawing. 
tmp_ctx.clearRect(0, 0, tmp_canvas.width, tmp_canvas.height); 
tmp_ctx.beginPath(); 
tmp_ctx.moveTo(ppt[0].x, ppts[0].y); 
for (var i = 1; i < ppt.length - 2; i++) { 
var c = (ppt[i].x + ppt[i + 1].x)/2; 
var d = (ppt[i].y + ppt[i + 1].y)/2; 
tmp_ctx.quadraticCurveTo(ppt[i].x, ppt[i].y, c, d); 
} 
// For the last 2 points 
tmp_ctx.quadraticCurveTo(
ppt[i].x, 
ppt[i].y, 
ppt[i + 1].x, 
ppt[i + 1].y 
); 
tmp_ctx.stroke(); 
drawGrid(tmp_ctx,'lightgray',20,20); 
}; 


/*TABLE*/ 
var onTablePaint = function() 
{ 
tmp_ctx.clearRect(0, 0,tmp_canvas.width,tmp_canvas.height); 
var x = mouse.x; 
var y = mouse.y; 
var a= start_mouse.x; 
var b= start_mouse.y; 
var k = Math.min(x,a); 
var l=Math.min(y, b); 
var width=Math.abs(x-a); 
var height=Math.abs(y-b); 
tmp_ctx.strokeRect(k, l, width, height); 
var r=document.getElementById("rows").value; 
var c=document.getElementById("col").value; 
var stepx = width/c; 
var stepy = height/r; 
if((start_mouse.x > mouse.x) && (start_mouse.y < mouse.y)) 
{ 
for(var i =0 ,j=r;i<r,j>0;i++,j--) 
{ 
tmp_ctx.beginPath(); 
tmp_ctx.moveTo(x,(y-(i*stepy))); 
tmp_ctx.lineTo(a,(b+(j*stepy))); 
tmp_ctx.stroke(); 
} 
for(var i =0 ,j=c;i<c,j>0;i++,j--) 
{ 
tmp_ctx.beginPath(); 
tmp_ctx.moveTo((x+(i*stepx)),y); 
tmp_ctx.lineTo((a-(j*stepx)),b); 
tmp_ctx.stroke(); 
} 
} 
else if((start_mouse.x > mouse.x)&&(start_mouse.y > mouse.y)) 
{ 
for(var i =0 ,j=c;i<c,j>0;i++,j--) 
{ 
tmp_ctx.beginPath(); 
tmp_ctx.moveTo((x+(i*stepx)),y); 
tmp_ctx.lineTo((a-(j*stepx)),b); 
tmp_ctx.stroke(); 
} 
for(var i =0 ,j=r;i<r,j>0;i++,j--) 
{ 
tmp_ctx.beginPath(); 
tmp_ctx.moveTo(x,(y+(i*stepy))); 
tmp_ctx.lineTo(a,(b-(j*stepy))); 
tmp_ctx.stroke(); 
} 
} 
else if((start_mouse.x < mouse.x) &&(start_mouse.y > mouse.y)) 
{ 
for(var i =0 ,j=c;i<c,j>0;i++,j--) 
{ 
tmp_ctx.beginPath(); 
tmp_ctx.moveTo((x-(i*stepx)),y); 
tmp_ctx.lineTo((a+(j*stepx)),b); 
tmp_ctx.stroke(); 
} 
for(var i =0 ,j=r;i<r,j>0;i++,j--) 
{ 
tmp_ctx.beginPath(); 
tmp_ctx.moveTo(x,(y+(i*stepy))); 
tmp_ctx.lineTo(a,(b-(j*stepy))); 
tmp_ctx.stroke(); 
} 
} 
else if((start_mouse.x < mouse.x)&& (start_mouse.y < mouse.y)) 
{ 
var a = mouse.x; 
var b = mouse.y; 
var x= start_mouse.x; 
var y= start_mouse.y; 
for(var i =0 ,j=c;i<c,j>0;i++,j--) 
{ 
tmp_ctx.beginPath(); 
tmp_ctx.moveTo((x+(i*stepx)),y); 
tmp_ctx.lineTo((a-(j*stepx)),b); 
tmp_ctx.stroke(); 
} 
for(var i =0 ,j=r;i<r,j>0;i++,j--) 
{ 
tmp_ctx.beginPath(); 
tmp_ctx.moveTo(x,(y+(i*stepy))); 
tmp_ctx.lineTo(a,(b-(j*stepy))); 
tmp_ctx.stroke(); 
} 
} 
}; 



/*TEXT*/ 
/*var onTextPaint = function() 
{ 
mouse.x = typeof e.offsetX !== 'undefined' ? e.offsetX : e.layerX; 
mouse.y = typeof e.offsetY !== ' undefined' ? e.offsetY : e.layerY; 
var a= mouse.x; 
var b= mouse.y; 
var t= document.getElementById("val").value; 
ctx.font='italic 20px sans-serif'; 
ctx.fillText(t,a,b); 
cPush(); 
};*/ 



/*DRAWGRID*/ 
function drawGrid (ctx, color,stepx,stepy) 
{ 
ctx.strokeStyle=color; 
ctx.lineWidth = 0.5; 
for(var i = stepx + 0.5; i< ctx.canvas.width; i+=stepx) 
{ 
ctx.beginPath(); 
ctx.moveTo(i,0); 
ctx.lineTo(i,ctx.canvas.height); 
ctx.stroke(); 
} 
for (var i = stepy + 0.5; i< ctx.canvas.height; i+=stepy) 
{ 
ctx.beginPath(); 
ctx.moveTo(0,i); 
ctx.lineTo(ctx.canvas.width,i); 
ctx.stroke(); 

} 
} 



/*UNDO AND REDO*/ 
var cPushArray = new Array(); 
var count = -1; 
function cPush() 
{ 

count++; 
if (count < cPushArray.length) 
{ 
cPushArray.length = count; 
} 
cPushArray.push(document.getElementById("paint").toDataURL()); 
} 
function cUndo() { 
//alert("undo"); 
ctx.clearRect(0,0,canvas.width, canvas.height); 
if (count > 0) 
{ 
count--; 
var canvasPic = new Image(); 
canvasPic.src = cPushArray[count]; 
canvasPic.onload = function() { 
ctx.drawImage(canvasPic, 0, 0); 
} 
} 
drawGrid(ctx,'lightgray',20,20); 
} 
function cRedo() { 
if (count < cPushArray.length-1) { 
count++; 
ctx.clearRect(0,0,canvas.width, canvas.height); 
var canvasPic = new Image(); 
canvasPic.src = cPushArray[count]; 
canvasPic.onload = function() 
{ 
ctx.drawImage(canvasPic, 0, 0); 
} 
} 
} 

/*IMAGE UPLOAD*/ 

function loadImageFileAsURL() 
{ 
var filesSelected = document.getElementById("f").files; 
if (filesSelected.length > 0) 
{ 
var fileToLoad = filesSelected[0]; 
if (fileToLoad.type.match("image.*")) 
{ 
var fileReader = new FileReader(); 
fileReader.onload = function(fileLoadedEvent) 
{ 
var imageLoaded = document.createElement("img"); 
imageLoaded.src = fileLoadedEvent.target.result;  
imageLoaded.width = canvas.width; 
imageLoaded.height = canvas.height; 
ctx.globalAlpha = 0.5; 
ctx.drawImage(imageLoaded,0,0); 
}; 
fileReader.readAsDataURL(fileToLoad); 
} 
} 

cPush(); 
} 
document.getElementById("f").onchange = function() { 
loadImageFileAsURL(); 
} 

/*SAVE*/ 
function saveCanvas() { 
var titl = document.getElementById("title").value; 
var fileName = titl+".html" ; 
var dataURL = canvas.toDataURL(); 
document.getElementById('tmp_canvas').src = dataURL; 
var fileURL= document.getElementById('tmp_canvas').src ; 
document.write("<div id='t1'>"); 
document.write("<img alt='' src="+fileURL+">"); 
document.write("</div>"); 

if (!window.ActiveXObject) { 
var save = document.createElement('a'); 
save.href = "data:text/plain;base64,"+window.btoa(document.getElementById('t1').innerHTML); 
save.download = fileName ; 
var evt = document.createEvent('MouseEvents'); 
evt.initMouseEvent('click', true, true, window, 1, 0, 0, 0, 0,false, false, false, false, 0, null); 
save.dispatchEvent(evt); 
(window.URL || window.webkitURL).revokeObjectURL(save.href); 
} 
} 
/*CLEAR CANVAS*/ 
function clearC() 
{ 
//alert("clear"); 
ctx.clearRect(0,0,canvas.width, canvas.height); 
drawGrid(ctx,'lightgray',20,20); 

} 
op.onchange = function(e) 
{ 
tmp_ctx.globalAlpha = op.value; 
}; 
strokeStyleSelect.onchange = function(e) 
{ 
tmp_ctx.strokeStyle = strokeStyleSelect.value; 
}; 
lineWidthSelect.onchange = function(e) 
{ 
tmp_ctx.lineWidth = lineWidthSelect.value; 
}; 
fillStyleSelect.onchange = function (e) 
{ 
tmp_ctx.fillStyle = fillStyleSelect.value; 
}; 
tmp_ctx.strokeStyle = strokeStyleSelect.value; 
tmp_ctx.lineWidth = lineWidthSelect.value; 
tmp_ctx.fillStyle = fillStyleSelect.value; 
tmp_ctx.globalAlpha = op.value; 
drawGrid(ctx,'lightgray',20,20); 
</script> 

</body>`enter code here` 
</html>

来源

2014-06-18 05:27:40 user2981823

+0

以上是使用HTML画布开发涂料应用程序的代码，具有不同的形状，如矩形，平行四边形..等等。它也有表格和文本的代码。 – user2981823

相关问题

 相关问题