HTML5 CANVAS线路图刻度实现
效果图
引用
<script src="/js/jquery-1.10.2.min.js"></script>
<script src="/js/jquery.query.js"></script>
代码
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title>HTML5 CANVAS</title> 6 <script src="/js/jquery-1.10.2.min.js"></script> 7 <script src="/js/jquery.query.js"></script> 8 <script type="text/javascript"> 9 $(function () { 10 //上行 11 initDraw(9.8, 1000, 100); 12 getRepaint(9.8, 1000, 100, 10, 1000, 50); 13 //下行 14 initDraw(9.8, 1000, 160); 15 getRepaint(9.8, 1000, 160, 10, 1000, 50); 16 }) 17 //初始化 18 //strstartkm1 开始公里标 19 //strendkm1 结束公里标 20 //strheight1 距离上部高度 21 function initDraw(strstartkm1, strendkm1, strheight1) { 22 var canvas = document.getElementById("myCanvas"); 23 var ctx = canvas.getContext("2d"); 24 ctx.beginPath(); 25 ctx.lineTo(strstartkm1, strheight1); 26 ctx.lineTo(strendkm1, strheight1); 27 ctx.strokeStyle = "green"; 28 ctx.stroke(); 29 } 30 //重新绘制刻度 31 //strstartkm1 上行开始公里标 32 //strendkm1 上行结束公里标 33 //strheight1 上行距离上部高度 34 //strstartkm2 下行开始公里标 35 //strendkm2 下行结束公里标 36 //strheight2 下行距离上部高度 37 //scale 刻度 38 function getRepaint(strstartkm1, strendkm1, strheight1, strstartkm2, strendkm2, scale) { 39 var canvas = document.getElementById("myCanvas"); 40 var ctx = canvas.getContext("2d"); 41 var arr = new Array(); 42 arr = getScale(strstartkm1, strendkm1, scale); 43 var arr1 = new Array(); 44 arr1 = getScale(strstartkm2, strendkm2, Math.round((scale / (strendkm1 - strstartkm1)) * (strendkm2 - strstartkm2))); 45 for (var i = 0; i < arr.length; i++) { 46 //开始线 47 ctx.beginPath(); 48 ctx.fillStyle = "#6C890B"; 49 ctx.strokeStyle = "#6C890B"; 50 ctx.lineTo(arr[i], strheight1 + 10); 51 ctx.lineTo(arr[i], strheight1); 52 ctx.stroke(); 53 54 ctx.font = "12px Verdana"; 55 // 创建渐变 56 var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0); 57 gradient.addColorStop("0", "magenta"); 58 gradient.addColorStop("0.5", "blue"); 59 gradient.addColorStop("1.0", "red"); 60 // 用渐变填色 61 ctx.fillStyle = gradient; 62 ctx.fillText(arr1[i], arr[i], strheight1 + 25); 63 } 64 } 65 //获取刻度值数组 66 //从开始公里标开始，依次往后加3，若超出最后公里标1.5，则取最后公里标 67 //width1 开始公里标 68 //width2 结束公里标 69 //scale 刻度值 70 function getScale(strstartkm1, strendkm1, scale) { 71 var start = strstartkm1; 72 var end = strendkm1; 73 var scale = scale; 74 var current = start; 75 var arr = new Array(); 76 do { 77 arr.push(current); 78 if (current == start) current = Math.round(current); 79 if (current == end) break; 80 current = current + scale; 81 if (current + (scale / 2) > end) current = end; 82 } 83 while (current <= end); 84 return arr; 85 } 86 </script> 87 </head> 88 <body> 89 <div style="background-color: #e6f9ff; height: calc(100% - 45px);" id="renderer2"> 90 <canvas id="myCanvas" width="1440" height="600"></canvas> 91 </div> 92 </body> 93 </html>