html5生成柱状图,html5绘制折线实例

html5生成柱状图(条形图)效果的实例代码,html5柱状图

XML/HTML Code复制内容到剪贴板

  1. <html>    
  2. <canvas id=”a_canvas” width=”1000″ height=”700″></canvas>    
  3. <script>    
  4.     (function (){    
  5.      
  6.         window.addEventListener(“load”, function(){    
  7.      
  8.           var data = [1000,1300,2000,3000,2000,2000,1000,1500,2000,5000,1000,1000]; 
      
  9.           var xinforma = [‘1月’,’2月’,’3月’,’4月’,’5月’,’6月’,’7月’,’8月’,’9月’,’10月’,’11月’,’12月’]; 
      
  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.           var realheight = a_canvas.height-15;    
  29.           var realwidth = a_canvas.width-40;    
  30.           // 描绘边框    
  31.           var grid_cols = data.length + 1;    
  32.           var grid_rows = 4;    
  33.           var cell_height = realheight / grid_rows;    
  34.           var cell_width = realwidth / grid_cols;    
  35.           context.lineWidth = 1;    
  36.           context.strokeStyle = “#a0a0a0”;    
  37.      
  38.           // 停止边框描绘    
  39.           context.beginPath();    
  40.           // 打算画横线    
  41.           /*for(var row = 1; row <= grid_rows; row++){    
  42.             var y = row * cell_height;    
  43.             context.moveTo(0,y);    
  44.             context.lineTo(a_canvas.width, y);    
  45.           }*/    
  46.               
  47.             //划横线    
  48.             context.moveTo(0,realheight);    
  49.             context.lineTo(realwidth,realheight);    
  50.                     
  51.                  
  52.             //画竖线    
  53.           context.moveTo(0,20);    
  54.            context.lineTo(0,realheight);    
  55.           context.lineWidth = 1;    
  56.           context.strokeStyle = “black”;    
  57.           context.stroke();    
  58.                   
  59.      
  60.           var max_v =0;    
  61.               
  62.           for(var i = 0; i<data.length; i++){    
  63.             if (data[i] > max_v) { max_v =data[i]};    
  64.           }    
  65.           max_vmax_v = max_v * 1.1;    
  66.           // 将数据换算为坐标    
  67.           var points = [];    
  68.           for( var i=0; i < data.length; i++){    
  69.             var v= data[i];    
  70.             var px = cell_width * (i +1);    
  71.             var py = realheight – realheight*(v / max_v); 
      
  72.             //alert(py);    
  73.             points.push({“x”:px,”y”:py});    
  74.           }    
  75.      
  76.           //绘制坐标图形    
  77.           for(var i in points){    
  78.             var p = points[i];    
  79.             context.beginPath();    
  80.             context.fillStyle=”green”;    
  81.             context.fillRect(p.x,p.y,15,realheight-p.y);    
  82.                  
  83.             context.fill();    
  84.           }    
  85.           //添Gavin字    
  86.           for(var i in points)    
  87.           {  var p = points[i];    
  88.             context.beginPath();    
  89.             context.fillStyle=”black”;    
  90.             context.fillText(data[i], p.x + 1, p.y – 15);    
  91.              context.fillText(xinforma[i],p.x + 1,realheight+12); 
      
  92.              context.fillText(‘月份’,realwidth,realheight+12);    
  93.              context.fillText(‘资金量’,0,10);    
  94.               }    
  95.         },false);    
  96.       })();    
  97.            
  98. </script>    
  99. </html>  

html5生成柱状图(条形图)详细代码

运作结果:

皇家赌场手机版 1

上述那篇html5生成柱状图(条形图)效果的实例代码便是作者分享给大家的全体内容了,希望能给大家三个参照,也盼望我们多多辅助帮客之家。

原稿地址:

XML/HTML Code 复制内容到剪贴板 html canvas id = a_canvas width = 1000
height = 700 / canvas script (fu…

用html5绘制折线图的实例代码,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,”#html5生成柱状图,html5绘制折线实例。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. html5生成柱状图,html5绘制折线实例。          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.      
  64.           var max_v =0;    
  65.               
  66.           for(var i = 0; i<data.length; i++){    
  67.               var d=0;    
  68.               if(data[i]<0)    
  69.               {dd=d-data[i];    
  70.                   }    
  71.                   else{d=data[i];};    
  72.             if (d > max_v) { max_v =d};    
  73.           }    
  74.           max_vmax_v = max_v * 1.1;    
  75.           // 将数据换算为坐标    
  76.           var points = [];    
  77.           for( var i=0; i < data.length; i++){    
  78.             var v= data[i];    
  79.             var px = cell_width * (i +1);    
  80.             var py = a_canvas.height/2 – a_canvas.height*(v / max_v)/2; 
      
  81.             points.push({“x”:px,”y”:py});    
  82.           }    
  83.           // 绘制折现    
  84.           context.beginPath();    
  85.           context.moveTo(points[0].x, points[0].y);    
  86.           for(var i= 1; i< points.length; i++){    
  87.             context.lineTo(points[i].x,points[i].y);    
  88.           }    
  89.      
  90.      
  91.           context.lineWidth = 2;    
  92.           context.strokeStyle = “#8BA9FF”;    
  93.           context.stroke();    
  94.      
  95.           //绘制坐标图形    
  96.           for(var i in points){    
  97.             var p = points[i];    
  98.             context.beginPath();    
  99.             context.arc(p.x,p.y,4,0,2*Math.PI);    
  100.             //实心圆    
  101.            /*    
  102.             context.fillStyle = “#000”;*/    
  103.             //空心圆    
  104.             context.strokeStyle = “#000”;    
  105.             context.stroke();    
  106.             context.fillStyle=”white”;    
  107.             context.fill();    
  108.           }    
  109.           //添Gavin字    
  110.           for(var i in points)    
  111.           {  var p = points[i];    
  112.             context.beginPath();    
  113.             context.fillStyle=”black”;    
  114.             context.fillText(data[i], p.x + 1, p.y – 15);    
  115.                    
  116.               }    
  117.         },false);    
  118.       })();    
  119.      
  120.            
  121. </script>    
  122. </html>  

运作结果如下:

皇家赌场手机版 2

上述那篇用html5绘制折线图的实例代码便是我分享给大家的整体内容了,希望能给大家二个参照,也期待我们多多帮助帮客之家。

原稿地址:

XML/HTML Code 复制内容到剪贴板 html canvas id = a_canvas width = 1000
height = 700 / canvas script (functio…

表格
<!DOCTYPE html>

一:使用缓存技巧实现预绘制,收缩重复绘制Canvs内容

<html>
  <head>
    <meta charset=’utf-8′>
  </head>
  <body>
    <canvas id=”a_canvas” width=”300″
height=”300″></canvas>

重重时候我们在Canvas上绘制与更新,总是会保留部分不改变的从头到尾的经过,对于这个剧情

    <script type=”text/javascript”>
      (function (){

有道是事先绘制缓存,并不是每一次刷新。

        window.addEventListener(“load”, function(){

直白绘制代码如下:

          // 获取上下文
          var a_canvas = document.getElementById(‘a_canvas’);
          var context = a_canvas.getContext(“2d”);

[javascript]  ontext.font=”24px Arial”; 
context.fillStyle=”blue”; 
context.fillText(“Please press <Esc> to exit game”,5,50); 
requestAnimationFrame(render); 

          // 绘制背景
          var gradient = context.createLinearGradient(0,0,0,300);

context.font=”24px Arial”;
context.fillStyle=”blue”;
context.fillText(“Please press <Esc> to exit game”,5,50);
requestAnimationFrame(render);
运用缓存预绘制本事:

          gradient.addColorStop(0,”#e0e0e0″);
          gradient.addColorStop(1,”#ffffff”);

[javascript]  function render(context) { 
    context.drawImage(mText_canvas, 0, 0); 
    requestAnimationFrame(render); 

 
function drawText(context) { 
    mText_canvas = document.createElement(“canvas”); 
    mText_canvas.width = 450; 
    mText_canvas.height = 54; 
    var m_context = mText_canvas.getContext(“2d”); 
    m_context.font=”24px Arial”; 
    m_context.fillStyle=”blue”; 
    m_context.fillText(“Please press <Esc> to exit
game”,5,50); 

          context.fillStyle = gradient;

function render(context) {
 context.drawImage(mText_canvas, 0, 0);
 requestAnimationFrame(render);
}

          context.fillRect(0,0,a_canvas.width,a_canvas.height);

function drawText(context) {
 mText_canvas = document.createElement(“canvas”);
 mText_canvas.width = 450;
 mText_canvas.height = 54;
 var m_context = mText_canvas.getContext(“2d”);
 m_context.font=”24px Arial”;
 m_context.fillStyle=”blue”;
 m_context.fillText(“Please press <Esc> to exit game”,5,50);
}
动用Canvas缓存绘制手艺的时候,一定记得缓存Canvas对象大小要自愧不及实际的Canvas

         
          // 描绘边框
          var grid_cols = 10;
          var grid_rows = 10;
          var cell_height = a_canvas.height / grid_rows;
          var cell_width = a_canvas.width / grid_cols;
          context.lineWidth = 1;
          context.strokeStyle = “#a0a0a0”;

大大小小。尽量把绘制直线点的操作放在一齐,何况尽量一回绘制完结,三个糟糕的代码如下:

          // 甘休边框描绘
          context.beginPath();
          // 打算画横线
          for (var col = 0; col <= grid_cols; col++) {
            var x = col * cell_width;
            context.moveTo(x,0);
            context.lineTo(x,a_canvas.height);
          }
          // 计划画竖线
          for(var row = 0; row <= grid_rows; row++){
            var y = row * cell_height;
            context.moveTo(0,y);
            context.lineTo(a_canvas.width, y);
          }
          context.stroke();
        },false);
      })();
    </script>

[javascript] for (var i = 0; i < points.length – 1; i++) { 
      var p1 = points[i]; 
      var p2 = points[i+1]; 
      context.beginPath(); 
      context.moveTo(p1.x, p1.y); 
      context.lineTo(p2.x, p2.y); 
      context.stroke(); 

  </body>

for (var i = 0; i < points.length – 1; i++) {
   var p1 = points[i];
   var p2 = points[i+1];
   context.beginPath();
   context.moveTo(p1.x, p1.y);
   context.lineTo(p2.x, p2.y);
   context.stroke();
}修改以往品质较高的代码如下:

 

[javascript]  context.beginPath(); 
for (var i = 0; i < points.length – 1; i++) { 
  var p1 = points[i]; 
  var p2 = points[i+1]; 
  context.moveTo(p1.x, p1.y); 
  context.lineTo(p2.x, p2.y); 

context.stroke(); 

 折线图

context.beginPath();
for (var i = 0; i < points.length – 1; i++) {
  var p1 = points[i];
  var p2 = points[i+1];
  context.moveTo(p1.x, p1.y);
  context.lineTo(p2.x, p2.y);
}
context.stroke();幸免不须要的Canvas绘制状态频仍切换,二个再三切换绘制style的事举例下:

<!DOCTYPE html>
<html>
  <head>
    <meta charset=’utf-8′>
  </head>
  <body>
    <canvas id=”a_canvas” width=”300″
height=”300″></canvas>

[javascript]  var GAP = 10; 
for(var i=0; i<10; i++) { 
    context.fillStyle = (i % 2 ? “blue” : “red”); 
    context.fillRect(0, i * GAP, 400, GAP); 

    <script type=”text/javascript”>
      (function (){

var GAP = 10;
for(var i=0; i<10; i++) {
 context.fillStyle = (i % 2 ? “blue” : “red”);
 context.fillRect(0, i * GAP, 400, GAP);
}
制止频仍切换绘制状态,质量越来越好的绘图代码如下:

        window.addEventListener(“load”, function(){

[javascript] // even  
context.fillStyle = “red”; 
for (var i = 0; i < 5; i++) { 
context.fillRect(0, (i*2) * GAP, 400, GAP); 

             
// odd  
context.fillStyle = “blue”; 
for (var i = 0; i < 5; i++) { 
context.fillRect(0, (i*2+1) * GAP, 400, GAP); 

          var data = [80,92,104,110,68,50,45,90,74,68,98,103];

// even
context.fillStyle = “red”;
for (var i = 0; i < 5; i++) {
context.fillRect(0, (i*2) * GAP, 400, GAP);
}
   
// odd
context.fillStyle = “blue”;
for (var i = 0; i < 5; i++) {
context.fillRect(0, (i*2+1) * GAP, 400, GAP);
}

          // 获取上下文
          var a_canvas = document.getElementById(‘a_canvas’);
          var context = a_canvas.getContext(“2d”);

绘制时,只绘制必要更新的区域,任何时候都要制止不须求的双重绘制与额外开支。

          // 绘制背景
          var gradient = context.createLinearGradient(0,0,0,300);

对于复杂的风貌绘制使用分层绘制技艺,分为前景与背景分别绘制。定义Canvas层的

          gradient.addColorStop(0,”#e0e0e0″);
          gradient.addColorStop(1,”#ffffff”);

HTML如下:

          context.fillStyle = gradient;

[html] <canvas id=”bg” width=”640″ height=”480″ style=”position:
absolute; z-index: 0″> 
</canvas> 
<canvas id=”fg” width=”640″ height=”480″ style=”position: absolute;
z-index: 1″> 
<SPAN style=”FONT-SIZE: 18px”></canvas> 
</SPAN> 

          context.fillRect(0,0,a_canvas.width,a_canvas.height);

<canvas id=”bg” width=”640″ height=”480″ style=”position: absolute;
z-index: 0″>
</canvas>
<canvas id=”fg” width=”640″ height=”480″ style=”position: absolute;
z-index: 1″>
</canvas>

         
          // 描绘边框
          var grid_cols = data.length + 1;
          var grid_rows = 4;
          var cell_height = a_canvas.height / grid_rows;
          var cell_width = a_canvas.width / grid_cols;
          context.lineWidth = 1;
          context.strokeStyle = “#a0a0a0”;

万一没有要求,要尽量制止使用绘图特效,如阴影,模糊等。

          // 停止边框描绘
          context.beginPath();
          // 希图画横线
          for (var col = 0; col <= grid_cols; col++) {
            var x = col * cell_width;
            context.moveTo(x,0);
            context.lineTo(x,a_canvas.height);
          }
          // 策动画竖线
          for(var row = 0; row <= grid_rows; row++){
            var y = row * cell_height;
            context.moveTo(0,y);
            context.lineTo(a_canvas.width, y);
          }
          context.lineWidth = 1;
          context.strokeStyle = “#c0c0c0”;
          context.stroke();

 

          var max_v = 0;
          for(var i = 0; i<data.length; i++){
            if (data[i] > max_v) { max_v = data[i]};
          }

制止使用浮点数坐标。

          max_v = max_v * 1.1;
          // 将数据换算为坐标
          var points = [];
          for( var i=0; i < data.length; i++){
            var v= data[i];
            var px = cell_width * (i +1);
            var py = a_canvas.height – a_canvas.height*(v /
max_v);
            points.push({“x”:px,”y”:py});
          }
          // 绘制折现
          context.beginPath();
          context.moveTo(points[0].x, points[0].y);
          for(var i= 1; i< points.length; i++){
            context.lineTo(points[i].x,points[i].y);
          }

绘图图形时,长度与坐标应慎选整数并非浮点数,原因在于Canvas补助半个像素绘制

          context.lineWidth = 2;
          context.strokeStyle = “#ee0000”;
          context.stroke();

会依据小数位达成插值算法达成绘制图像的反锯齿效果,若无须求请不要挑选浮点数值。

          //绘制坐标图形
          for(var i in points){
            var p = points[i];
            context.beginPath();
            context.arc(p.x,p.y,6,0,2*Math.PI);
            context.fillStyle = “#ee0000”;
            context.fill();
          }
        },false);
      })();
    </script>
  </body>

 

 皇家赌场手机版 3
 

清空Canvas上的绘图内容:

 

context.clearRect(0, 0, canvas.width,canvas.height)

!DOCTYPE html html head meta charset=utf-8
/head body canvas id=a_canvas width=300 height=300/canvas script
type=text/javascript (function (){
window.addEventListener(load,…

不过事实上在Canvas还会有一连串似hack的清空方法:

canvas.width = canvas.width;

也能够兑现清空canvas上内容的职能,但是在少数浏览器上也许不帮忙。

 

比较多时候大家在Canvas上制图与更新,总是会保留部分不变的内容,对于这么些内容
应该…

Leave a Comment.