用canvas寫了一個移動端走勢圖
阿新 • • 發佈：2019-02-15
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <title></title> <style type="text/css"> body,p{ padding: 0; margin: 0; font-family: "Comic Sans MS","幼圓","黑體",sans-serif; } #container{ margin-top: 40px; position: relative; height: 100%; /* background: #aaa; */ } .text{ position: absolute; height: 100%; top:0; } div.text p{ position: absolute; color: #666; font-size: .8em; } div.date{ position: absolute; color: #666; left: 25; } div.date p{ position: absolute; font-size: .6em; } #canvas{ position: relative; z-index: 9; background: #fff; margin-left: 50px; } </style> </head> <body> <div id="container"> <canvas id="canvas"></canvas> <div class="text"> <p>4.14%</p> <p>4.24%</p> <p>4.34%</p> <p>4.44%</p> <p>4.54%</p> </div> <div class="date"> <p>03.01</p> <p>03.02</p> <p>03.03</p> <p>03.04</p> <p>03.05</p> <p>03.06</p> <p>03.07</p> </div> </div> </body> </html> <script> document.getElementById('container').style.width=window.screen.wdith+'px'; var width=window.screen.width-50-20; var height=120; var height1=150; var pointX=[0,width/6,2*width/6,3*width/6,4*width/6,5*width/6,width];/*X*/ var poin=[0,height-3*height/4,height-2*height/4,height-1*height/4,height];/*Y*/ var pointY=[0,30,height1-3*height/4,height1-2*height/4,height1-1*height/4,height1]; var pointZ=[height1-27,height1-30,height1-80,height1-90,height1-50,height1-70,height1-40]; var p=document.querySelector('.text').getElementsByTagName('p'); var date=document.querySelector('.date').getElementsByTagName('p'); var canvas=document.getElementById('canvas').getContext('2d'); document.getElementById('canvas').setAttribute('width',width); document.getElementById('canvas').setAttribute('height',height1); /*Y*/ for(var i=0;i< p.length;i++){ p[i].style.bottom=poin[i]+'px'; } /*X*/ for(var j=0;j<date.length;j++){ if(window.screen.width<=320){ date[j].style.left=pointX[j]+25+'px'; // date[j].style.transform='rotate(-40deg)'; }else{ date[j].style.left=pointX[j]+25+'px'; } } function drawX(){ for(var i=1;i<pointY.length;i++){ canvas.beginPath(); if(i==5) { canvas.strokeStyle = 'red'; canvas.moveTo(pointX[0], height1); canvas.lineTo(pointX[6], height1); canvas.moveTo(pointX[0], height1); canvas.lineTo(pointX[0], 0); }else{ canvas.strokeStyle='yellow'; canvas.moveTo(pointX[0],pointY[i]); canvas.lineTo(pointX[6],pointY[i]); } canvas.closePath(); canvas.lineWidth=1; canvas.stroke(); } } drawX(); function drawY(){ for(var i=1;i<pointX.length;i++){ canvas.beginPath(); canvas.strokeStyle='green'; for(var i=1;i<pointX.length;i++){ canvas.moveTo(pointX[i],height1); canvas.lineTo(pointX[i],0); } canvas.closePath(); canvas.lineWidth=1; canvas.stroke(); } } drawY(); function drawZ(){ canvas.beginPath(); canvas.strokeStyle='#000'; for(var i=0;i<pointZ.length;i++){ canvas.arc(pointX[i],pointZ[i],2,360,false); canvas.moveTo(pointX[i],pointZ[i]); canvas.lineTo(pointX[i+1],pointZ[i+1]); } canvas.closePath(); canvas.stroke() canvas.lineWidth=1; canvas.stroke(); }; drawZ(); </script>