CANVAS標籤效果
阿新 • • 發佈：2018-12-24
通過JS來向CANVAS畫布中插入文字標籤，並定義顏色陣列和內容陣列，通過Math.floor(Math.random()*n)來隨機取出內容,迴圈n次，在畫布上隨機位置生成隨機大小和顏色的標籤。
新標籤的新增通過jquery-ui的drag方法來實現，當輸入框被拖入到新標籤中時，自動向標籤內容陣列中新增輸入框的內容，並重新生成canvas畫布。
<html> <head> <title>blog</title> <meta http-equiv=content-type content="text/html; charset=utf-8"> <link rel="stylesheet" href="css/style.css"> <link href="css/blog.css" rel="stylesheet" type="text/css"> <title>生命不息 折騰不止</title> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <style> body { border: 0px; margin: 0px; overflow: hidden; background-color: transparent; font-family: 宋體; } </style> </head> <body onselectstart="return false;"> <script> $(function() { $("#drag").draggable(); $("#myCanvas").droppable({ drop: function(event, ui) { // alert(ui.draggable.children()[0].value); c = document.getElementById("myCanvas"); context = c.getContext("2d"); context.clearRect(0, 0, c.width, c.height); data2[data2.length] = ui.draggable.children()[0].value; draw(); } }); }); </script> <div class="img-col hover-me"> <div class="img-wrap parallax-demo-4" style="float: left; width: 100%; height: 950px; margin: 0; padding: 0;"> <div class="parallax-inner back-img" style="background-image: url('img/bg.jpg')"> </div> </div> </div> <div class="mes"> <canvas id="myCanvas" width="900" height="700" style="float: left; background: rgba(0,0,0,0.5); overflow: hidden; position: absolute; top:50px; left: 30px; "> </canvas> <div id="drag" style="float: left; background: rgba(0,0,0,0.5); overflow: hidden; position: absolute; top:50px; left: 950px; width: 160px; height: 160px;"> <input type="text" style="background: none; color: white;" placeholder="此處輸入內容" /> </div> <script type="text/javascript"> var c = document.getElementById("myCanvas"); var context = c.getContext("2d"); // 設定字型 /*var colorArr = [ //顏色選擇 '#3C6B15', '#6b4b38', '#eb9a2f', '#12acab', '#666', ];*/ var colorArr = ["Olive", "OliveDrab", "Orange", "OrangeRed", "Orchid", "PaleGoldenRod", "PaleGreen", "PaleTurquoise", "PaleVioletRed", "PapayaWhip", "PeachPuff", "Peru", "Pink", "Plum", "PowderBlue", "Purple", "Red", "RosyBrown", "RoyalBlue", "SaddleBrown", "Salmon", "SandyBrown", "SeaGreen", "SeaShell", "Sienna", "Silver", "SkyBlue"]; var data2 = ["數學建模", "Java", "直男", "程式碼", "圖書館", "PHP", "專案", "健康", "JS", 'html', 'CODE', 'MODE', '資訊', '開發', '設計', '軟體開發', '瀏覽器', '大學', '大三', '中國', '濟南', '一般', '冷', '好', '我愛學習', '苟利國家生死以', '一川晚照人閒立', '新垣結衣', '石原里美', ]; function draw() { var width = 0; var height = 0; var maxsize = 0; var maxwidth = 100; for(var i = 0; i < 150; i++) { var size = Math.floor(15 + Math.random() * 28); context.font = size + "px " + "bold 黑體"; // 設定顏色 context.fillStyle = colorArr[Math.floor(Math.random() * 20)]; // 設定對齊方式 context.textAlign = "left"; context.textBaseline = "top"; var text = data2[Math.floor(Math.random() * data2.length)]; if(width < 900) { context.fillText(text, width, height); } if(size > maxsize) maxsize = size; width += size * text.length; if(width > 800) { width = 0; height += maxsize; maxsize = 0; } } } window.onload = function() { draw(); }; function add() { c = document.getElementById("myCanvas"); context = c.getContext("2d"); context.clearRect(0, 0, c.width, c.height); data2[data2.length] = (document.getElementById('content').value); draw(); } </script> </div> </html>