如何在不使用畫布的情況下使用HTML5製作旋轉的單詞和旋轉線條？

我正在一個項目中，我想繪製一個角度線，並在行的末尾，我必須把一個角度字符。但我不想使用畫布，因爲需求是用戶可以通過單擊它來選擇這些線中的任何一個。這可能無法通過畫布。給我一些建議。如何在不使用畫布的情況下使用HTML5製作旋轉的單詞和旋轉線條？

其實我想繪製下面的圖像，也可以選擇一個或多個可用的線。 enter image description here

來源

2013-05-28 Hiren Dhaduk

嘗試的CSS屬性transform：http://www.w3schools.com/cssref/css3_pr_transform.asp

來源

2013-05-28 19:30:15

這是很容易在畫布上，但我會建議這個SVG。你可以在這裏找到一個很好的SVG庫http://raphaeljs.com/，或者你也可以使用一個畫布庫，http://kineticjs.com/。

要自己使用畫布完成此操作，只需在畫布上跟蹤鼠標座標mousemove event然後在click事件上找出相對於您的線條的鼠標位置，如果單擊鼠標內部你的線你有一個點擊線。

沒有提供任何代碼或任何你已經嘗試過的東西，我不能進入更多的細節，因爲這是一個非常廣泛和通用的問題，沒有真正綁定到任何一件事情。

來源

2013-05-28 19:09:57 GriffLab

我附加的圖像與問題。 –

我會建議你使用jCanvas庫。它將允許您將每一行作爲單獨的圖層進行操作，並且還可以非常輕鬆地將鼠標和觸摸事件附加到這些圖層。因爲它基於jQuery，所以學習和理解起來非常容易，其語法與jQuery幾乎相似。

來源

2013-05-30 12:31:54

看一看動畫CSS3功能：http://www.w3schools.com/css3/css3_animations.asp

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div 
{ 
width:100px; 
height:100px; 
background:red; 
position:relative; 
animation-name:mymove; 
animation-duration:5s; 

/* Safari and Chrome */ 
-webkit-animation-name:mymove; 
-webkit-animation-duration:5s; 
} 

@keyframes mymove 
{ 
from {transform: rotate(0deg);} 
to {transform: rotate(-90deg); } 
} 

@-webkit-keyframes mymove /* Safari and Chrome */ 
{ 
from {-webkit-transform: rotate(0deg);} 
to {-webkit-transform: rotate(-90deg); } 
} 
</style> 
</head> 
<body> 

<p><strong>Note:</strong> The animation-name property is not supported in Internet Explorer 9 and earlier versions.</p> 

<div></div> 

<p><b>Note:</b> Always specify the animation-duration property. Otherwise the duration  is 0, and the animation will not be played.</p> 

</body> 
</html>

來源

2013-05-30 12:37:32

以下是示例http://jsfiddle.net/UTGbR/ –

如何在不使用畫布的情況下使用HTML5製作旋轉的單詞和旋轉線條？

回答

相關問題