html+css+javascript如何做沿著弧形線條排版的文字

文字position，然后通過計算算出每個文字在弧上的坐標(biāo)，然后設(shè)置left,top

專注于為中小企業(yè)提供網(wǎng)站建設(shè)、成都網(wǎng)站制作服務(wù),電腦端+手機端+微信端的三站合一,更高效的管理,為中小企業(yè)仙桃免費做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動了1000多家企業(yè)的穩(wěn)健成長，幫助中小企業(yè)通過網(wǎng)站建設(shè)實現(xiàn)規(guī)模擴充和轉(zhuǎn)變。

百度地圖javascript api 中如何畫圓弧

你可以用添加/刪除覆蓋物這個API試試

// 百度地圖API功能

var map = new BMap.Map("allmap");

var point = new BMap.Point(116.404, 39.915);

map.centerAndZoom(point, 15);

var marker = new BMap.Marker(new BMap.Point(116.404, 39.915)); // 創(chuàng)建點

var polyline = new BMap.Polyline([

new BMap.Point(116.399, 39.910),

new BMap.Point(116.405, 39.920),

new BMap.Point(116.425, 39.900)

], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //創(chuàng)建折線

var circle = new BMap.Circle(point,500,{strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //創(chuàng)建圓

var polygon = new BMap.Polygon([

new BMap.Point(116.387112,39.920977),

new BMap.Point(116.385243,39.913063),

new BMap.Point(116.394226,39.917988),

new BMap.Point(116.401772,39.921364),

new BMap.Point(116.41248,39.927893)

], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //創(chuàng)建多邊形

var pStart = new BMap.Point(116.392214,39.918985);

var pEnd = new BMap.Point(116.41478,39.911901);

var rectangle = new BMap.Polygon([

new BMap.Point(pStart.lng,pStart.lat),

new BMap.Point(pEnd.lng,pStart.lat),

new BMap.Point(pEnd.lng,pEnd.lat),

new BMap.Point(pStart.lng,pEnd.lat)

], {strokeColor:"blue", strokeWeight:2, strokeOpacity:0.5}); //創(chuàng)建矩形

//添加覆蓋物

function add_overlay(){

map.addOverlay(marker); //增加點

map.addOverlay(polyline); //增加折線

map.addOverlay(circle); //增加圓

map.addOverlay(polygon); //增加多邊形

map.addOverlay(rectangle); //增加矩形

}

//清除覆蓋物

function remove_overlay(){

map.clearOverlays();

}

不過這需要三角函數(shù)，關(guān)于三角函數(shù)可以去看一下《揭秘javascript的三角函數(shù)》這篇文章，那里面對三角函數(shù)講得很清楚了。

參考資料：

《揭秘javascript的三角函數(shù)》來自：

如何利用 js+html 繪制 帶箭頭的 弧線

純js不好實現(xiàn),但是配合html,css就有了近似的辦法.下面提供一個解決方案,已知兩個點的坐標(biāo),為它們畫一條帶箭頭的弧線.

html

head

meta http-equiv = "content-type" content = "text/html; charset = gb2312"

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 (spnA.style.left, 10), y0 = parseInt (spnA.style.top, 10), x1 = parseInt (spnB.style.left, 10), y1 = parseInt (spnB.style.top, 10), horizontalDistance = Math.abs (x1 - x0), verticalDistance = Math.abs (y1 - y0), x = Math.min (x0, x1) + horizontalDistance / 2, y = Math.min (y0, y1) + verticalDistance / 2, distance = Math.sqrt (Math.pow (horizontalDistance, 2) + Math.pow (verticalDistance, 2)), array = new Array (x0, y0, x1, y1, distance);

spnO.style.left = x;

spnO.style.top = y;

return array;

}

function getRadian (x0, y0, x1, y1) {

var horizontalDistance = Math.abs (x1 - x0), verticalDistance = Math.abs (y1 - y0), rate = horizontalDistance == 0 ? 0 : verticalDistance / horizontalDistance, radian;

if (y1 y0) {

if (x1 x0) {

radian = - Math.atan (rate);

} else if (x1 == x0) {

radian = - Math.PI / 2;

} else {

radian = - (Math.PI - Math.atan (rate));

}

} else if (y1 == y0) {

radian = x1 left ? 0 : - Math.PI;

} else if (x1 x0) {

radian = - (Math.PI + Math.atan (rate));

} else if (x1 == x0) {

radian = - Math.PI * 3 / 2;

} else {

radian = - 2 * Math.PI + Math.atan (rate);

}

return radian;

}

function getAngle (radian) {

var angle = - radian * 180 / Math.PI;

return angle;

}

function slantArc (x0, y0, x1, y1) {

var radian = getRadian (x0, y0, x1, y1), angle = 360 - getAngle (radian);

cnvArc.style.transform = "rotate(" + angle + "deg)";

}

function drawArc (x0, y0, width) {

var context = cnvArc.getContext ("2d"), radius = width / 2, height = radius / 2;

cnvArc.width = width + 10;

cnvArc.height = height;

cnvArc.style.left = x0;

cnvArc.style.top = y0 - height;

context.ellipse (radius + 5, height, radius, height / 2, 0, 0, Math.PI * 2);

context.strokeStyle = "#00ff00";

context.stroke ();

}

function hex (figure) {

return figure.toString (16);

}

function zeroize (cluster) {

if (cluster.length 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 = cnvArc.width, height = cnvArc.height, context = cnvArc.getContext ("2d"), imageData = context.getImageData (0, 0, width, height), data = imageData.data, coordinates = new Array (), cluster = "", i, red, green, blue, colour, index, x, y;

for (i = 0; i data.length; 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) {

//console.log (y + "\n" + cluster);

cluster = "";

}

cluster += x + ":" + colour + " ";

if (colour == "#00ff00") {

coordinates.push (new Array (x, y));

}

}

return coordinates;

}

function sortCoordinates (coordinates, direction) {

var i = 0, flag, j, coordinate;

do {

flag = false;

for (j = 0; j coordinates.length - 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 = cnvArc.getContext ("2d"), colour = "#00ff00", angle = (x1 - x0) / (y1 - y0);

context.strokeStyle = colour;

context.fillStyle = colour;

context.setLineDash ([3, 3]);

context.beginPath ();

context.arc (x0, y0, 1, 0, 2 * Math.PI);

context.translate (0, 0, 0);

context.moveTo (x0, y0);

context.lineTo (x1, y1);

context.fill ();

context.stroke ();

context.save ();

context.translate (x1, y1);

angle = Math.atan (angle);

context.rotate ((y1 = y0 ? 0 : Math.PI) - angle);

context.lineTo (- 3, - 9);

context.lineTo (0, - 3);

context.lineTo (3, - 9);

context.lineTo (0, 0);

context.fill ();

context.restore ();

context.closePath ();

}

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 = coordinates.length;

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, 0.01); z-index: 1; transform-origin: 0 100%;"/canvas

/body

/html

復(fù)制進來的代碼都不帶縮進的嗎?

該代碼純手寫,不從第三方處盜用.僅供參考.

JS之使用Canvas繪圖

canvas 元素負責(zé)在頁面中設(shè)定一個區(qū)域，然后就可以通過 JavaScript 動態(tài)地在這個區(qū)域中繪制圖形。

要使用 canvas 元素，必須先設(shè)置其 width 和 height 屬性，指定可以繪圖的區(qū)域大小。出現(xiàn)在開始和結(jié)束標(biāo)簽中的內(nèi)容是后備信息，如果瀏覽器不支持 canvas 元素，就會顯示這些信息。

如果不添加任何樣式或者不繪制任何圖形，在頁面中是看不到該元素的。

要在這塊畫布（canvas）上繪圖，需要取得繪圖上下文。而取得繪圖上下文對象的引用，需要調(diào)用getContext() 方法并傳入上下文的名字。傳入 "2d" ，就可以取得 2D 上下文對象。

使用 toDataURL() 方法，可以導(dǎo)出在 canvas 元素上繪制的圖像。這個方法接受一個參數(shù)，即圖像的 MIME 類型格式，而且適合用于創(chuàng)建圖像的任何上下文。

取得畫布中的一幅 PNG 格式的圖像：

如果繪制到畫布上的圖像源自不同的域， toDataURL() 方法會拋出錯誤。

使用 2D 繪圖上下文提供的方法，可以繪制簡單的 2D 圖形，比如矩形、弧線和路徑。2D 上下文的坐標(biāo)開始于 canvas 元素的左上角，原點坐標(biāo)是(0,0)。

2D 上下文的兩種基本繪圖操作是填充和描邊。填充，就是用指定的樣式（顏色、漸變或圖像）填充圖形；描邊，就是只在圖形的邊緣畫線。大多數(shù) 2D 上下文操作都會細分為填充和描邊兩個操作，而操作的結(jié)果取決于兩個屬性： fillStyle 和 strokeStyle 。

這兩個屬性的值可以是字符串、漸變對象或模式對象，而且它們的默認值都是 "#000000" 。如果為它們指定表示顏色的字符串值，可以使用 CSS 中指定顏色值的任何格式，包括顏色名、十六進制碼、rgb 、 rgba 、 hsl 或 hsla 。

與矩形有關(guān)的方法包括 fillRect() 、strokeRect() 和 clearRect() 。這三個方法都能接收 4 個參數(shù)：矩形的 x 坐標(biāo)、矩形的 y 坐標(biāo)、矩形寬度和矩形高度。這些參數(shù)的單位都是像素。

fillRect() 方法在畫布上繪制的矩形會填充指定的顏色。填充的顏色通過 fillStyle 屬性指定：

strokeRect() 方法在畫布上繪制的矩形會使用指定的顏色描邊。描邊顏色通過 strokeStyle 屬性指定。

描邊線條的寬度由 lineWidth 屬性控制，該屬性的值可以是任意整數(shù)。另外，通過 lineCap 屬性可以控制線條末端的形狀是平頭、圓頭還是方頭（ "butt" 、"round" 或 "square" ），通過 lineJoin 屬性可以控制線條相交的方式是圓交、斜交還是斜接（ "round" 、 "bevel" 或 "miter" ）。

clearRect() 方法用于清除畫布上的矩形區(qū)域。本質(zhì)上，這個方法可以把繪制上下文中的某一矩形區(qū)域變透明。

通過路徑可以創(chuàng)造出復(fù)雜的形狀和線條。要繪制路徑，首先必須調(diào)用 beginPath() 方法，表示要開始繪制新路徑。然后，再通過調(diào)用下列方法來實際地繪制路徑。

如果想繪制一條連接到路徑起點的線條，可以調(diào)用closePath() 。如果路徑已經(jīng)完成，你想用 fillStyle 填充它，可以調(diào)用 fill() 方法。另外，還可以調(diào)用 stroke() 方法對路徑描邊，描邊使用的是 strokeStyle 。最后還可以調(diào)用 clip() ，這個方法可以在路徑上創(chuàng)建一個剪切區(qū)域。

繪制一個不帶數(shù)字的時鐘表盤：

isPointInPath() 方法接收 x 和 y 坐標(biāo)作為參數(shù)，用于在路徑被關(guān)閉之前確定畫布上的某一點是否位于路徑上。

繪制文本主要有兩個方法： fillText() 和 strokeText() 。這兩個方法都可以接收 4 個參數(shù)：要繪制的文本字符串、x 坐標(biāo)、y 坐標(biāo)和可選的最大像素寬度。

兩個方法都以下列 3 個屬性為基礎(chǔ)：

fillText() 方法使用fillStyle 屬性繪制文本， strokeText() 方法使用 strokeStyle 屬性為文本描邊。

通過上下文的變換，可以把處理后的圖像繪制到畫布上。2D 繪制上下文支持各種基本的繪制變換。創(chuàng)建繪制上下文時，會以默認值初始化變換矩陣，在默認的變換矩陣下，所有處理都按描述直接繪制。為繪制上下文應(yīng)用變換，會導(dǎo)致使用不同的變換矩陣應(yīng)用處理，從而產(chǎn)生不同的結(jié)果。

把原點變換到表盤的中心：

使用 rotate() 方法旋轉(zhuǎn)時鐘的表針：

可以調(diào)用 save() 方法，調(diào)用這個方法后，當(dāng)時的所有設(shè)置都會進入一個棧結(jié)構(gòu)，得以妥善保管。調(diào)用 restore() 方法，在保存設(shè)置的棧結(jié)構(gòu)中向前返回一級，恢復(fù)之前的狀態(tài)。

save() 方法保存的只是對繪圖上下文的設(shè)置和變換，不會保存繪圖上下文的內(nèi)容。

可以使用 drawImage()方法把一幅圖像繪制到畫布上。

以使用三種不同的參數(shù)組合。最簡單的調(diào)用方式是傳入一個 HTML img 元素，以及繪制該圖像的起點的 x 和 y 坐標(biāo)。

如果想改變繪制后圖像的大小，可以再多傳入兩個參數(shù)，分別表示目標(biāo)

寬度和目標(biāo)高度。通過這種方式來縮放圖像并不影響上下文的變換矩陣。

繪制出來的圖像大小會變成 20×30 像素。

可以選擇把圖像中的某個區(qū)域繪制到上下文中。 drawImage() 方法的這種調(diào)用方式總共需要傳入 9 個參數(shù)：要繪制的圖像、源圖像的 x 坐標(biāo)、源圖像的 y 坐標(biāo)、源圖像的寬度、源圖像的高度、目標(biāo)圖像的 x 坐標(biāo)、目標(biāo)圖像的 y 坐標(biāo)、目標(biāo)圖像的寬度、目標(biāo)圖像的高度。這樣調(diào)用drawImage() 方法可以獲得最多的控制。

2D 上下文會根據(jù)以下幾個屬性的值，自動為形狀或路徑繪制出陰影。

要創(chuàng)建一個新的線性漸變，可以調(diào)用 createLinearGradient() 方法。這個方法接收 4 個參數(shù)：起點的 x 坐標(biāo)、起點的 y 坐標(biāo)、終點的 x 坐標(biāo)、終點的 y 坐標(biāo)。調(diào)用這個方法后，它就會創(chuàng)建一個指定大小的漸變，并返回

CanvasGradient 對象的實例。

創(chuàng)建了漸變對象后，下一步就是使用 addColorStop() 方法來指定色標(biāo)。這個方法接收兩個參數(shù)：色標(biāo)位置和 CSS 顏色值。色標(biāo)位置是一個 0（開始的顏色）到 1（結(jié)束的顏色）之間的數(shù)字。

為了讓漸變覆蓋整個矩形，而不是僅應(yīng)用到矩形的一部分，矩形和漸變對

象的坐標(biāo)必須匹配才行。

要創(chuàng)建徑向漸變（或放射漸變），可以使用 createRadialGradient() 方法。這個方法接收 6 個參數(shù)，對應(yīng)著兩個圓的圓心和半徑。前三個參數(shù)指定的是起點圓的原心（x 和 y）及半徑，后三個參數(shù)指定的是終點圓的原心（x 和 y）及半徑。

模式其實就是重復(fù)的圖像，可以用來填充或描邊圖形。要創(chuàng)建一個新模式，可以調(diào)用createPattern() 方法并傳入兩個參數(shù)：一個 HTML img 元素和一個表示如何重復(fù)圖像的字符串。其中，第二個參數(shù)的值與 CSS 的 background-repeat 屬性值相同，包括 "repeat" 、 "repeat-x" 、"repeat-y" 和 "no-repeat" 。

createPattern() 方法的第一個參數(shù)也可以是一個 video 元素，或者另一個 canvas 元素。

2D 上下文的一個明顯的長處就是，可以通過 getImageData() 取得原始圖像數(shù)據(jù)。這個方法接收4 個參數(shù)：要取得其數(shù)據(jù)的畫面區(qū)域的 x 和 y 坐標(biāo)以及該區(qū)域的像素寬度和高度。

取得左上角坐標(biāo)為(10,5)、大小為 50×50 像素的區(qū)域的圖像數(shù)據(jù)：

返回的對象是 ImageData 的實例。每個 ImageData 對象都有三個屬性： width 、 height 和data 。其中 data 屬性是一個數(shù)組，保存著圖像中每一個像素的數(shù)據(jù)。

在 data 數(shù)組中，每一個像素用4 個元素來保存，分別表示紅、綠、藍和透明度值。

數(shù)組中每個元素的值都介于 0 到 255 之間（包括 0 和 255）。

還有兩個會應(yīng)用到 2D 上下文中所有繪制操作的屬性： globalAlpha 和 globalCompositionOperation 。其中， globalAlpha 是一個介于 0 和 1 之間的值（包括 0和 1），用于指定所有繪制的透明度。默認值為 0。如果所有后續(xù)操作都要基于相同的透明度，就可以先把 globalAlpha 設(shè)置為適當(dāng)

值，然后繪制，最后再把它設(shè)置回默認值 0。

第二個屬性 globalCompositionOperation 表示后繪制的圖形怎樣與先繪制的圖形結(jié)合。

WebGL 是針對 Canvas 的 3D 上下文。

WebGL是從 OpenGL ES 2.0 移植到瀏覽器中的，而 OpenGL ES 2.0 是游戲開發(fā)人員在創(chuàng)建計算機圖形圖像時經(jīng)常使用的一種語言。WebGL 支持比 2D 上下文更豐富和更強大的圖形圖像處理能力。

WebGL 涉及的復(fù)雜計算需要提前知道數(shù)值的精度，而標(biāo)準(zhǔn)的 JavaScript 數(shù)值無法滿足需要。為此，WebGL 引入了一個概念，叫類型化數(shù)組（typed arrays）。類型化數(shù)組也是數(shù)組，只不過其元素被設(shè)置為特定類型的值。

類型化數(shù)組的核心就是一個名為 ArrayBuffer 的類型。每個 ArrayBuffer 對象表示的只是內(nèi)存中指定的字節(jié)數(shù)，但不會指定這些字節(jié)用于保存什么類型的數(shù)據(jù)。通過 ArrayBuffer 所能做的，就是為了將來使用而分配一定數(shù)量的字節(jié)。

創(chuàng)建了 ArrayBuffer 對象后，能夠通過該對象獲得的信息只有它包含的字節(jié)數(shù)，方法是訪問其byteLength 屬性：

使用 ArrayBuffer （數(shù)組緩沖器類型）的一種特別的方式就是用它來創(chuàng)建數(shù)組緩沖器視圖。其中，最常見的視圖是 DataView ，通過它可以選擇 ArrayBuffer 中一小段字節(jié)。為此，可以在創(chuàng)建 DataView實例的時候傳入一個 ArrayBuffer 、一個可選的字節(jié)偏移量（從該字節(jié)開始選擇）和一個可選的要選擇的字節(jié)數(shù)。

實例化之后， DataView 對象會把字節(jié)偏移量以及字節(jié)長度信息分別保存在 byteOffset 和byteLength 屬性中。

類型化視圖一般也被稱為類型化數(shù)組，因為它們除了元素必須是某種特定的數(shù)據(jù)類型外，與常規(guī)的數(shù)組無異。

類型化數(shù)組是 WebGL 項目中執(zhí)行各種操作的重要基礎(chǔ)。

目前，主流瀏覽器的較新版本大都已經(jīng)支持 canvas 標(biāo)簽。同樣地，這些版本的瀏覽器基本上也都支持 2D 上下文。但對于 WebGL 而言，目前還只有 Firefox 4+和 Chrome 支持它。

js有沒有辦法干div的弧線軌跡移動

這個跟JS關(guān)系不是很大，使用CSS來做的；如果你想讓DIV跟隨滾動條滾動，那么div的樣式應(yīng)該是 relative 或者 absolute 都可以的，看外層的DIV定位如果你想讓DIV在屏幕上固定位置，則用 position：fixed 就可以；具體問題還得看你代碼才行；

網(wǎng)站題目：javascript弧線,html繪制弧線
文章出自：http://chinadenli.net/article12/dsicodc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計公司、電子商務(wù)、網(wǎng)站導(dǎo)航、網(wǎng)站營銷、網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)