TagCanvas，jquerytagcanvas
http://www.goat1000.com/tagcanvas.php
TagCanvas是一個基於HTML5 Canvas技術開發的標籤雲動畫。還提供一個以jQuery外掛程式形式實現的版本。
它支援文本和圖片兩種格式，能夠以Sphere, hcylinder 或 vcylinder三種形狀顯示。
TagCanvas還支援IE瀏覽器（利用ExplorerCanvas實現）。
具體參數：| Option | Default | Description |
|---|---|---|
| interval | 20 | Interval between animation frames, in milliseconds |
| maxSpeed | 0.05 | Maximum speed of rotation |
| minSpeed | 0.0 | Minimum speed of rotation when mouse leaves canvas |
| decel | 0.95 | Deceleration rate when mouse leaves canvas |
| minBrightness | 0.1 | Brightness of tags at farthest point (0.0-1.0) |
| textColour | "#ff99ff" | Colour of the tag text |
| textHeight | 15 | Height of the tag text font (in pixels) |
| textFont | "Helvetica, Arial, sans-serif" |
Font family for the tag text |
| outlineColour | "#ffff99" | Colour of the box around the active tag |
| outlineThickness | 2 | Thickness of outline in pixels |
| outlineOffset | 5 | Distance of outline from text, in pixels |
| pulsateTo | 1.0 | Pulsate outline to this opacity (0.0-1.0) |
| pulsateTime | 3 | Pulse rate, in seconds per beat |
| depth | 0.5 | Controls the perspective (0.0-1.0) |
| initial | null | Initial rotation, with horizontal and vertical as an array, e.g. [0.8,-0.3]. Values are multiplied by maxSpeed. |
| freezeActive | false | Set to true to pause movement when a tag is highlighted. |
| frontSelect | false | Set to true to prevent selection of tags at back of cloud. |
| txtOpt | true | Text optimisation, converts text tags to images for better performance. |
| txtScale | 2 | Scaling factor of text when converting to image in txtOpt mode. |
| reverse | false | Set to true to reverse direction of movement relative to mouse position. |
| hideTags | false | Set to true to automatically hide the tag list element if TagCanvas is started successfully. |
| zoom | 1.0 | Adjusts the relative size of the tag cloud in the canvas. Larger values will zoom into the cloud, smaller values will zoom out. |
| wheelZoom | true | Enables zooming the cloud in and out using the mouse wheel or scroll gesture. |
| zoomStep | 0.05 | The amount that the zoom is changed by with each movement of the mouse wheel. |
| zoomMax | 3.0 | Maximum zoom value. |
| zoomMin | 0.3 | Minimum zoom value. |
| shadow | "#000000" | Colour of the shadow behind each tag. |
| shadowBlur | 0 | Amount of tag shadow blurring, in pixels. |
| shadowOffset | [0,0] | X and Y offset of the tag shadow, in pixels. |
| weight | false | Set to true to turn on weighting of tags. |
| weightMode | "size" | Method to use for displaying tag weights. Should be one of size, colour or both. |
| weightSize | 1.0 | Multiplier for adjusting the size of tags when using a weight mode of size or both. |
| weightGradient | {0:'#f00', 0.33:'#ff0', 0.66:'#0f0', 1:'#00f'} |
The colour gradient used for colouring tags when using a weight mode of colour or both. |
| weightFrom | null | The link attribute to take the tag weight from. The default of null means that the weight is taken from the calculated link font size. |
| shape | "sphere" | The shape of the cloud. Currently supported are sphere, hcylinder for a cylinder that starts off horizontal and vcylinder for a cylinder that starts off vertical. |
| lock | null | A value of "x" limits rotation of the cloud to the (horizontal) x-axis, and a value of "y" limits rotation to the (vertical) y-axis. (These are strings, so the quotes are required) |
demo:
<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>TagCanvas example</title> <!--[if lt IE 9]><script type="text/javascript" src="excanvas.js"></script><![endif]--> <script src="js/tagcanvas.min.js" type="text/javascript"></script> <script type="text/javascript">window.onload = function() {try {TagCanvas.Start('myTag','tags',{textColour: '#63cdff',outlineColour: '#63cdff',reverse: true,depth: 0.8,maxSpeed: 0.05});} catch(e) {document.getElementById('myCloudTag').style.display = 'none';}};function changeshape(s) {var locks = { hcylinder: 'x', vcylinder: 'y', hring: 'x', vring: 'y', sphere: '' };lock = locks[s] || '';shape = s;TagCanvas.initial = (lock == 'x' && [0,0.2]) || (lock == 'y' && [0.2,0]) || [0.2,0.2];restart();}changeshape('vcylinder') </script> </head> <body style="background:#000"> <div id="myCloudTag"> <canvas width="600" height="350" id="myTag"> <p>Anything in here will be replaced on browsers that support the canvas element</p> </canvas> </div> <div id="tags"> <ul> <li><a href="#" style="font-size:30px;">認證考試</a></li> <li><a href="#">UMTS OMSTAR </a></li> <li><a href="#">客戶經理角色認知</a></li> <li><a href="#">PM角色</a></li> <li><a href="#">維修</a></li> <li><a href="#">資訊安全</a></li> <li><a href="#">UMTS OMSTAR </a></li> <li><a href="#">客戶經理角色認知</a></li> <li><a href="#">PM角色</a></li> <li><a href="#">維修</a></li> </ul> </div> </body></html>
可以的吧，這貌似是一種響應的形式，需要在地址欄再斷行符號一次圖片就會顯示出來了。html5瞭解得還不是太多，反正我這兒enter一次是可以的。
javascript canvas 怎對圖片進行繞中心點旋轉
給你一個旋轉的demo:
<!DOCTYPE html><html><body><canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">Your browser does not support the HTML5 canvas tag.</canvas><br/><input type="text" id="angle_v" readonly="1"/><script>var c=document.getElementById("myCanvas");var ctx=c.getContext("2d");ctx.translate(100,45)//ctx.rotate(70*Math.PI/180);//ctx.fillRect(-50,-25,100,50);var angle=10;var angle_now = 0;myRotate()function myRotate(){ ctx.clearRect(-100,-50,200,100);//x2 是為了把原來的圖全部抹掉（不留下痕迹） ctx.rotate(angle*Math.PI/180); ctx.fillRect(-50,-25,100,50); angle_now= (angle_now + angle)%360; document.getElementById("angle_v").value="當前角度:"+angle_now; setTimeout(myRotate,1000);}</script></body></html>
注意：用roate實現旋轉，重點在於改變座標中心點 : ctx.translate(100,45)
座標中心點計算公式：x = 左上方x + 寬度/2
y = 左上方y + 高度/2
然後translate到(x,y)即可，之後調用rotate進行旋轉。
旋轉之後填充時注意：ctx.fillRect(-50,-25,100,50);
x = - 寬度/2
y = -高度/2
fillRect(x,y,寬度，高度)
你的例子，代碼控制比較看不懂。。。，所以沒在基礎上整改。
補充一個參考網站（英文的）：......餘下全文>>
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
