要点是尽可以长一些，填充背景时应该是右对齐以便右侧永远会显示尖头。
望有用。function pre{
if(index!=0)
index--;
else
index=4;
img1src=arr[index];
}
function next(){
if(index!=4)
index++;
else
index=0;
img1src=arr[index];}
纯js不好实现,但是配合html,css就有了近似的办法下面提供一个解决方案,已知两个点的坐标,为它们画一条带箭头的弧线
<html>
<head>
<meta >
<title>箭头弧线</title>
<style type = "text/css">
span { position: absolute; width: 5px; height: 5px; background-color: #0000ff; display: block; border-radius: 50%; }
</style>
<script language = "javascript">
function locateO () {
var x0 = parseInt (spnAstyleleft, 10), y0 = parseInt (spnAstyletop, 10), x1 = parseInt (spnBstyleleft, 10), y1 = parseInt (spnBstyletop, 10), horizontalDistance = Mathabs (x1 - x0), verticalDistance = Mathabs (y1 - y0), x = Mathmin (x0, x1) + horizontalDistance / 2, y = Mathmin (y0, y1) + verticalDistance / 2, distance = Mathsqrt (Mathpow (horizontalDistance, 2) + Mathpow (verticalDistance, 2)), array = new Array (x0, y0, x1, y1, distance);
spnOstyleleft = x;
spnOstyletop = y;
return array;
}
function getRadian (x0, y0, x1, y1) {
var horizontalDistance = Mathabs (x1 - x0), verticalDistance = Mathabs (y1 - y0), rate = horizontalDistance == 0 0 : verticalDistance / horizontalDistance, radian;
if (y1 < y0) {
if (x1 > x0) {
radian = - Mathatan (rate);
} else if (x1 == x0) {
radian = - MathPI / 2;
} else {
radian = - (MathPI - Mathatan (rate));
}
} else if (y1 == y0) {
radian = x1 > left 0 : - MathPI;
} else if (x1 < x0) {
radian = - (MathPI + Mathatan (rate));
} else if (x1 == x0) {
radian = - MathPI 3 / 2;
} else {
radian = - 2 MathPI + Mathatan (rate);
}
return radian;
}
function getAngle (radian) {
var angle = - radian 180 / MathPI;
return angle;
}
function slantArc (x0, y0, x1, y1) {
var radian = getRadian (x0, y0, x1, y1), angle = 360 - getAngle (radian);
cnvArcstyletransform = "rotate(" + angle + "deg)";
}
function drawArc (x0, y0, width) {
var context = cnvArcgetContext ("2d"), radius = width / 2, height = radius / 2;
cnvArcwidth = width + 10;
cnvArcheight = height;
cnvArcstyleleft = x0;
cnvArcstyletop = y0 - height;
contextellipse (radius + 5, height, radius, height / 2, 0, 0, MathPI 2);
contextstrokeStyle = "#00ff00";
contextstroke ();
}
function hex (figure) {
return figuretoString (16);
}
function zeroize (cluster) {
if (clusterlength < 2) {
cluster = 0 + cluster;
}
return cluster;
}
function getColour (red, green, blue) {
return "#" + zeroize (hex (red)) + zeroize (hex (green)) + zeroize (hex (blue));
}
function printArc () {
var width = cnvArcwidth, height = cnvArcheight, context = cnvArcgetContext ("2d"), imageData = contextgetImageData (0, 0, width, height), data = imageDatadata, coordinates = new Array (), cluster = "", i, red, green, blue, colour, index, x, y;
for (i = 0; i < datalength; i += 4) {
red = data [i];
green = data [i + 1];
blue = data [i + 2];
colour = getColour (red, green, blue);
index = i / 4;
y = parseInt (index / width, 10);
x = index % width;
if (x == 0) {
//consolelog (y + "\n" + cluster);
cluster = "";
}
cluster += x + ":" + colour + " ";
if (colour == "#00ff00") {
coordinatespush (new Array (x, y));
}
}
return coordinates;
}
function sortCoordinates (coordinates, direction) {
var i = 0, flag, j, coordinate;
do {
flag = false;
for (j = 0; j < coordinateslength - 1 - i; j ++) {
if (direction && (coordinates [j] [0] > coordinates [j + 1] [0] || coordinates [j] [0] == coordinates [j + 1] [0] && coordinates [j] [1] > coordinates [j + 1] [1]) || ! direction && (coordinates [j] [0] < coordinates [j + 1] [0] || coordinates [j] [0] == coordinates [j + 1] [0] && coordinates [j] [1] > coordinates [j + 1] [1])) {
coordinate = coordinates [j];
coordinates [j] = coordinates [j + 1];
coordinates [j + 1] = coordinate;
flag = true;
}
}
i ++;
} while (flag);
}
function drawArrow (x0, y0, x1, y1) {
var context = cnvArcgetContext ("2d"), colour = "#00ff00", angle = (x1 - x0) / (y1 - y0);
contextstrokeStyle = colour;
contextfillStyle = colour;
contextsetLineDash ([3, 3]);
contextbeginPath ();
contextarc (x0, y0, 1, 0, 2 MathPI);
contexttranslate (0, 0, 0);
contextmoveTo (x0, y0);
contextlineTo (x1, y1);
contextfill ();
contextstroke ();
contextsave ();
contexttranslate (x1, y1);
angle = Mathatan (angle);
contextrotate ((y1 >= y0 0 : MathPI) - angle);
contextlineTo (- 3, - 9);
contextlineTo (0, - 3);
contextlineTo (3, - 9);
contextlineTo (0, 0);
contextfill ();
contextrestore ();
contextclosePath ();
}
function initialize () {
var array = locateO (), x0 = array [0], y0 = array [1], x1 = array [2], y1 = array [3], width = array [4], direction = x1 > x0, coordinates, length, coordinate0, coordinate1, x2, y2, x3, y3;
drawArc (x0, y0, width);
coordinates = printArc ();
length = coordinateslength;
sortCoordinates (coordinates, direction);
coordinate0 = coordinates [length - 2];
x2 = coordinate0 [0];
y2 = coordinate0 [1];
coordinate1 = coordinates [length - 1];
x3 = coordinate1 [0];
y3 = coordinate1 [1];
drawArrow (x2, y2, x3, y3);
slantArc (x0, y0, x1, y1);
}
</script>
</head>
<body style = "margin: 0;" onload = "initialize ()">
<span id = "spnA" style = "left: 50px; top: 150px;"></span>
<span id = "spnB" style = "left: 850px; top: 350px;"></span>
<span id = "spnO"></span>
<canvas id = "cnvArc" style = "position: absolute; background-color: rgb(255, 255, 0, 001); z-index: 1; transform-origin: 0 100%;"></canvas>
</body>
</html>
复制进来的代码都不带缩进的吗
该代码纯手写,不从第三方处盗用仅供参考
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）