This case NOTE:
1, when you drag the arrow canvas inside the line drawing automatic recalculation point.
2, canvas does not draw the dotted line API, because the API is not very familiar with, so do not shortcoming, looking for on the Internet.
3, the arrow out after clicking on the canvas of any point arrow will extend to the place, as for the specific application to modify the canvas LineTo properties can be achieved.
4, the specific code interpretation I write more clearly, modify the arrow style just write LineTo can, very simple.
The effect is as follows:
The code is as follows:
<!--procedure Description:
Author: xue51
Description: This program is mainly through the support of exchange in IE below the implementation of canvas draw with arrows dotted line function, often used in the design of graphical workflow.
may be implemented with VML under IE, but this is used to replace VML!!!!! HTML5 is here to kill the old IE
Note: 1, the program is in the foreigner's canvas draw a dotted line based on the improvement;
2, Exchange requires 2 additional JS files to point out.
3, you can change the direction of the arrow on the canvas when you use it, and the function you use will require you to write it yourself.
-->
<! DOCTYPE html>
<html lang= "en" ><head>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title>html Canvas dotted lines</title>
<style type= "text/css" media= "screen" >
Body {background: #ddd; text-align:center;}
Canvas {margin:2em auto; display:block; border:1px solid #666;}
label {PADDING-RIGHT:2EM}
</style>
<script type= "Text/javascript" src= "Excanvas.js" ></script>
<script type= "Text/javascript" src= "Jcanvascript.1.5.15.min.js" ></script>
</head>
<body>
<!--This place needs to be noted that converting under IE if not set canvas height and width will result in a small canvas-->
<canvas width= "height=" ></canvas>
<p>
<label>line Width: <input id= "width" value= "2" size= "1" ></label>
<label>dashes/gaps: <input id= "dashes" value= "size=" ></label>
<label>line Cap: <select id= "LineCap" ><option>butt</option><option Selected>ro Und</option><option>square</option></select></label>
</p>
<!--This is a foreigner wrote a dotted line with canvas method, direct use of-->
<script type= "Text/javascript" charset= "Utf-8" >
if (window. CANVASRENDERINGCONTEXT2D && CanvasRenderingContext2D.prototype.lineTo) {
CanvasRenderingContext2D.prototype.dashedLine = function (X,y,x2,y2,dasharray) {
if (!dasharray) dasharray=[10,5];
var dashcount = dasharray.length;
This.moveto (x, y);
var dx = (x2-x), dy = (y2-y);
var slope = dy/dx;
var distremaining = math.sqrt (dx*dx + dy*dy);
var dashindex=0, draw=true;
while (distremaining>=0.1 && dashindex<10000) {
var dashlength = Dasharray[dashindex++%dashcount];
if (dashlength==0) dashlength = 0.001; Hack for Safari
if (Dashlength > distremaining) dashlength = distremaining;
var xstep = math.sqrt (Dashlength*dashlength/(1 + slope*slope));
x + = Xstep
y + + slope*xstep;
This[draw? ' LineTo ': ' MoveTo '] (x,y);
distremaining-= dashlength;
draw =!draw;
}
//Ensure that's the last segment was closed for proper stroking
//this.moveto (0,0);
}
}
</script>
<script type= "Text/javascript" charset= "Utf-8" >
var c = document.getelementsbytagname (' canvas ') [0];
c.width = 800; C.height = 600;
var defaultx = defaulty = 350;
function Drawarr (x, y) {
//value initialization, default is used when the page is not clicked to initialize.
var x, y, arr;
if (0 = arguments.length) {
x = 667;
y= 470;
}
else {
x = x;
y= y;
}
var ctx = C.getcontext (' 2d ');
Ctx.strokestyle = ' black ';
//These 3 are used to get the automatic setup configuration of the page.
var width = document.getElementById (' width ');
var linecap = document.getElementById (' LineCap ');
var dashes = document.getElementById (' dashes ');
//This is the core used to draw each segment.
var drawdashes = function () {
ctx.clearrect (0, 0, c.width, c.height);
var Dashgaparray = dashes.value.replace (/^s+|s+$/g, '). Split (/s+/);
if (!dashgaparray[0] | | (Dashgaparray.length==1 && dashgaparray[0]==0)) Return
ctx.linewidth = Width.value;
ctx.linecap = Linecap.value;
Ctx.beginpath ();
Ctx.fillstyle = "#8BC54B";
Ctx.strokestyle = ' rgb (0, 0, 100) '
//Start drawing dashed lines.
//is not required to change these 4 coordinates when the x > x coordinates of the starting point (that is, the click Point is to the right of the starting point), but the x coordinates of the x < start point (click on the left side of the starting point) need to change the position of the 4 coordinates
if (x > Defaultx) {
ctx.dashedline (Defaultx, defaulty, X, Y, Dashgaparray);
}
else {
ctx.dashedline (x, Y, Defaultx, defaulty, Dashgaparray);
}
//Dotted line 4 segments of the start drawing arrows
//computes the coordinates of 4 points
arr = Jisuan (x, y);
//Set start point.
Ctx.moveto (arr[0],arr[1]);
Ctx.lineto (x,y)
Ctx.lineto (Arr[2],arr[3]);
//The following calculation is used to cross points between the arrows and the dotted line. The calculation principle of the right-angled triangle.
Ctx.lineto (X-parseint (25*math.cos (arr[4]*math.pi/180)), Y-parseint (25*math.sin (arr[4]*math.pi/180)));
Ctx.lineto (arr[0],arr[1]);
Ctx.closepath ();
Ctx.stroke ();
};
drawdashes ();
width.onkeyup = drawdashes;
linecap.onchange = drawdashes;
dashes.onkeyup = drawdashes;
}
//This function is used to calculate the coordinates of the arrow 4 points according to the mouse click Point, and the cos and sin are calculated radians in JS, so it needs to be converted. As for the calculation method belongs to the attribute category here is not tired.
//For this function, if you need to change the size of the arrows, you only have to modify the 45: the length of the arrows on either side 35: The angle of the arrow and the middle dashed line.
function Jisuan (x, y) {
var angle = parseint (math.atan2 (y-defaultx,x-defaulty)/math.pi*180);
var arr = [];
arr[0] = X-parseint (Math.Cos (math.pi/180* (angle-35)));
arr[1] = Y-parseint (Math.sin (math.pi/180* (angle-35)));
ARR[2] = X-parseint (Math.Cos (math.pi/180* (angle + 35)));
arr[3] = Y-parseint (Math.sin (math.pi/180* (angle + 35)));
arr[4] = Angle
return arr;
}
Drawarr ();
Document.body.onmousedown = function (event) {
var event = Event | | window.event;
var mousepos = Getmousepos (event);
Drawarr (mousepos.x, MOUSEPOS.Y);
}
Getmousepos = function (event) {
if (Event.pagex | | event.pagey) {
Mousepos = {
X:event.pagex,
Y:event.pagey
};
}
/*ie and FF are treated differently from the boundary/
if (!+ "v1") {
Mousepos = {
X:event.clientx,
Y:event.clienty
}
}
else {
Mousepos = {
X:event.clientx+document.body.scrollleft+document.documentelement.scrollleft,
Y:event.clienty+document.body.scrolltop+document.documentelement.scrolltop
}
}
//return Mousepos
//program to here is a standard to get the coordinates of the mouse on the page, the following code is because the point of the canvas is not the top-left corner of the browser is the starting point so you need to subtract the extra distance method is as follows:
var pos = C.getboundingclientrect ();
mousepos.x = Mousepos.x-pos.left;
mousepos.y = mousepos.y-pos.top;
return mousepos;
}
</script>
</body>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
