您现在的位置是：网站首页> 编程资料编程资料

用html5绘制折线图的实例代码移动端HTML5实现文件上传功能【附代码】深入研究HTML5实现图片压缩上传功能HTML5触摸事件演化tap事件介绍jQuery+html5实现企业年会数字抽奖特效源码html5生成柱状图(条形图)效果的实例代码详解HTML5 Canvas绘制时指定颜色与透明度的方法实例讲解使用HTML5 Canvas绘制阴影效果的方法移动web模拟客户端实现多方框输入密码效果【附代码】

2023-10-14 538人已围观

简介 下面小编就为大家带来一篇用html5绘制折线图的实例代码。小编觉得挺不错的，现在分享给大家。也给大家一个参考。一起跟随小编过来看看吧

XML/HTML Code复制内容到剪贴板
  1. <html>    
  2. <canvas id="a_canvas" width="1000" height="700">canvas>    
  3. <script>    
  4.          
  5.                (function (){    
  6.      
  7.         window.addEventListener("load", function(){    
  8.      
  9.           var data = [100,-1000,0,700];    
  10.      
  11.           // 获取上下文    
  12.           var a_canvas = document.getElementById('a_canvas');    
  13.           var context = a_canvas.getContext("2d");    
  14.      
  15.      
  16.           // 绘制背景    
  17.           var gradient = context.createLinearGradient(0,0,0,300);    
  18.      
  19.      
  20.          // gradient.addColorStop(0,"#e0e0e0");    
  21.           //gradient.addColorStop(1,"#ffffff");    
  22.      
  23.      
  24.           context.fillStyle = gradient;    
  25.      
  26.           context.fillRect(0,0,a_canvas.width,a_canvas.height);    
  27.      
  28.               
  29.           // 描绘边框    
  30.           var grid_cols = data.length + 1;    
  31.           var grid_rows = 4;    
  32.           var cell_height = a_canvas.height / grid_rows;    
  33.           var cell_width = a_canvas.width / grid_cols;    
  34.           context.lineWidth = 1;    
  35.           context.strokeStyle = "#a0a0a0";    
  36.      
  37.           // 结束边框描绘    
  38.           context.beginPath();    
  39.           // 准备画横线    
  40.          /*for (var col = 0; col <= grid_cols; col++) {    
  41.             var x = col * cell_width;    
  42.             context.moveTo(x,0);    
  43.             context.lineTo(x,a_canvas.height);    
  44.           }    
  45.           // 准备画竖线    
  46.           for(var row = 0; row <= grid_rows; row++){    
  47.             var y = row * cell_height;    
  48.             context.moveTo(0,y);    
  49.             context.lineTo(a_canvas.width, y);    
  50.           }*/    
  51.             //划横线    
  52.             context.moveTo(0,a_canvas.height/2);    
  53.             context.lineTo(a_canvas.width,a_canvas.height/2);    
  54.                  
  55.             //画竖线    
  56.           context.moveTo(0,0);    
  57.             context.lineTo(0,a_canvas.height);    
  58.              
  59.              
  60.           context.lineWidth = 1;    
  61.           context.strokeStyle = "#c0c0c0";    
  62.           context.stroke();    
    63. 提示： 本文由神整理自网络，如有侵权请联系本站删除！
    本站声明：
    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！

    上一篇：详解HTML5 Canvas绘制时指定颜色与透明度的方法移动端HTML5实现文件上传功能【附代码】深入研究HTML5实现图片压缩上传功能HTML5触摸事件演化tap事件介绍jQuery+html5实现企业年会数字抽奖特效源码html5生成柱状图(条形图)效果的实例代码用html5绘制折线图的实例代码实例讲解使用HTML5 Canvas绘制阴影效果的方法移动web模拟客户端实现多方框输入密码效果【附代码】

    下一篇：html5生成柱状图(条形图)效果的实例代码html5中canvas图表实现柱状图的示例

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网