Canvas 的绘制图表的基本用法
来源：互联网 发布：阿里云幕布拍照要求 编辑：程序博客网 时间：2024/06/10 05:59
canvas 绘图画线和画圆的一些基本操作：
<canvas id="canvas">当前浏览器不支持canvas,请更换浏览器。。（正常运行的情况下不会显示）</canvas><script>$.function(json){var canvas = document.getElementById("canvas");canvas.width=1024;cnavas.height=768;var context = canvas.getContext("2d");//绘图接口context.lineWidth=5context.strokeStyle="#005588"context.arc(300,300,200,0,2*Math.PI)//300,300为圆心，200为半径。。context.beginPath()context.moveTo(100,100)//设置绘制状态点context.lineTo(700,700)//到达的点context.strokeStyle="#ffffff"//线条的颜色设置context.fillStyle="rgb(20,100,30)"//给所画的图进行填充context.closePath()context.stroke()//注意会全部重新画一遍//四巧板var tabs=[{p:[x:0,y:0],{x:800,y:0},{x:400,y:400}],color:"#000000"},//每一块的顶点{p:[x:0,y:0],{x:800,y:0},{x:400,y:400}],color:"#000000"},{p:[x:0,y:0],{x:800,y:0},{x:400,y:400}],color:"#000000"},{p:[x:0,y:0],{x:800,y:0},{x:400,y:400}],color:"#000000"},]for(var i=0 ;i<tabs.length;i++){draw(tabs[i],context)}function draw(piece,cxt){cxt.beginPath();cxt.moveTo(piece.p[0].x,piece.p[0].y);for(var i=1;i<piece.p.length;i++){cxt.closePath();cxt.fillStyle=piece.color;cxt.fill();}}}</script>例如：自己画的一个图表
</section> <div class="row"></div> <div class="panel panel-default ng-scope"> <div class="panel-heading"> <strong><span class="glyphicon glyphicon-th"></span>当日订单趋势图</strong> </div> <!-- 趋势表 --> <div class="panel-body"> <div style="width: 100%; height: 300px; padding: 0px; position: relative;" class="ng-isolate-scope"> <canvas class="flot-base" width="1078" height="300" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 1078px; height: 300px;"></canvas> <div class="flot-text" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; font-size: smaller; color: rgb(84, 84, 84);"> <div class="flot-x-axis flot-x1-axis xAxis x1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;"> <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 44px; top: 282px; left: 19px; text-align: center;">0点</div> <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 44px; top: 282px; left: 64px; text-align: center;">1点</div> <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 44px; top: 282px; left: 109px; text-align: center;">2点</div> <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 44px; top: 282px; left: 154px; text-align: center;">3点</div> <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 44px; top: 282px; left: 199px; text-align: center;">4点</div> <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 44px; top: 282px; left: 244px; text-align: center;">5点</div> <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 44px; top: 282px; left: 289px; text-align: center;">6点</div> <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 44px; top: 282px; left: 334px; text-align: center;">7点</div> <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 44px; top: 282px; left: 379px; text-align: center;">8点</div> <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 44px; top: 282px; left: 424px; text-align: center;">9点</div> <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 44px; top: 282px; left: 466px; text-align: center;">10点</div> <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 44px; top: 282px; left: 511px; text-align: center;">11点</div> <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 44px; top: 282px; left: 556px; text-align: center;">12点</div> <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 44px; top: 282px; left: 601px; text-align: center;">13点</div> <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 44px; top: 282px; left: 646px; text-align: center;">14点</div> <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 44px; top: 282px; left: 691px; text-align: center;">15点</div> <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 44px; top: 282px; left: 736px; text-align: center;">16点</div> <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 44px; top: 282px; left: 781px; text-align: center;">17点</div> <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 44px; top: 282px; left: 827px; text-align: center;">18点</div> <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 44px; top: 282px; left: 872px; text-align: center;">19点</div> <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 44px; top: 282px; left: 917px; text-align: center;">20点</div> <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 44px; top: 282px; left: 962px; text-align: center;">21点</div> <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 44px; top: 282px; left: 1007px; text-align: center;">22点</div> <div class="flot-tick-label tickLabel" style="position: absolute; max-width: 44px; top: 282px; left: 1052px; text-align: center;">23点</div> </div> <div class="flot-y-axis flot-y1-axis yAxis y1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;"> <div class="flot-tick-label tickLabel" style="position: absolute; top: 269px; left: 1px; text-align: right;">0</div> <div class="flot-tick-label tickLabel" style="position: absolute; top: 202px; left: 1px; text-align: right;">50</div> <div class="flot-tick-label tickLabel" style="position: absolute; top: 136px; left: 6px; text-align: right;">100</div> <div class="flot-tick-label tickLabel" style="position: absolute; top: 70px; left: 6px; text-align: right;">150</div> <div class="flot-tick-label tickLabel" style="position: absolute; top: 4px; left: 6px; text-align: right;">200</div> </div> </div> <canvas id="pic" class="flot-overlay changepic" width="1078" height="300" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 1078px; height: 300px;"></canvas> <div class="legend"> <div style="position: absolute; width: 86px; height: 17px; top: 17px; right: 18px; opacity: 0.85; background-color: rgb(255, 255, 255);"></div> <table style="position:absolute;top:17px;right:18px;;font-size:smaller;color:#545454"> <tbody> <tr> <td class="legendColorBox"> <div style="border:1px solid #ccc;padding:1px"> <div style="width:4px;height:0;border:5px solid rgb(27,183,160);overflow:hidden"></div> </div> </td> <td class="legendLabel">订单量趋势图</td> </tr> </tbody> </table> </div> </div> </div> </div> </div></section><%@ include file="common/footer.jsp"%><script type="text/javascript">$(function(){ var access_token ='<s:property value="access_token"/>'; $(".order-date").datepicker().on('changeDate.datepicker.amui',function(){ $.ajax({ url: "write_order_date", type:"post", dataType : "json", data:{ "orderDate":$("#order-date-input").val() }, success: function(json){ var newuser=json["newUser"]; var newUserArr = eval(newuser); var newuserArrlen=newUserArr.length; var userNumber = 0; for(var i=0;i<newuserArrlen;i++){ userNumber += newUserArr[i]["new_user"]; } var money=json["money"]; var number=json["number"]; var orderNumList = json["orderNumList"]; var count=new Array(); if(orderNumList == 0){ for(var i = 0; i < 24; ++i){ count[i]=0; } }else{ var orderNumListLen = orderNumList.length; for(var i = 0; i < 24; ++i){ for(var j = 0; j < orderNumListLen; ++j){ if(i==orderNumList[j]["time"]){ count[i] = orderNumList[j]["count"]; break; }else{ count[i]=0; continue; } } } } //var time=new Array(); var canvas= document.getElementById("pic"); canvas.width=1078; canvas.height=300; var context=canvas.getContext("2d"); //context.lineWidth=5; // context.fillStyle='#000000'; context.beginPath(); context.strokeStyle="rgb(27,183,160)"; context.arc(30,280-1.32*count[0],2,0,2*Math.PI); context.stroke(); context.beginPath(); context.strokeStyle="green"; context.strokeText("(0,"+count[0]+")",15,270-1.32*count[0]); context.stroke(); for(var i=1;i<24;i++){ context.beginPath(); context.strokeStyle="rgb(27,183,160)"; context.moveTo(30+(i-1)*45,280-1.32*count[i-1]); context.lineTo(30+i*45,280-1.32*count[i]); context.arc(30+i*45,280-1.32*count[i],2,0,2*Math.PI); // context.putImageData(); context.closePath(); context.stroke(); context.beginPath(); context.strokeStyle="green"; context.strokeText("("+i+","+count[i]+")",9+i*45,270-1.32*count[i]); context.stroke(); } //$(".changepic").val(); $(".today-new-fans").text(userNumber); $(".today-order-money").text(money); $(".today-order-number").text(number); }, }); } );});</script>实现效果如下：
0 0
- Canvas 的绘制图表的基本用法
- Canvas 的绘制图表的基本用法
- 基于Canvas绘制的图表
- HTML5 绘制图形 Canvas 与 SVG 的基本用法
- canvas的基本用法
- Canvas的基本用法
- JFreeChar_图表的基本用法
- 基于原生Canvas来绘制的各种图表
- Canvas----绘制常用的基本图形
- 说说 canvas 的基本用法
- javascript中canvas绘图的基本用法
- Canvas绘制的总结
- Canvas线段的绘制
- canvas 伞形的绘制
- Canvas相关的绘制
- Canvas---路径的绘制
- Canvas---文字的绘制
- HTML5 学习（二 CANVAS 的基本操作 【JavaScript绘制】）
- 跳转到应用市场代码片段
- Qt学习笔记（QAction，QString格式化输出）
- 自定义View执行invalidate()方法
- 最最简单又实用的ftp安装以及使用
- [java web]java.lang.ClassNotFoundException: com.mysql.jdbc.Driver
- Canvas 的绘制图表的基本用法
- Django知识点总结(四)
- iOS调试lldb命令
- android 友盟 用户反馈 自定义界面发图片问题
- golang获取昨天的日期
- 机器学习入门（一）朴素贝叶斯解析
- OC对文本的操作
- [Business Intelligence] 1NF, 2NF, 3NF
- ie 7/8/9 placeholder 不显示 解决方案
