JavaScriptcanvas基于數組生成柱狀圖代碼實例

HTML5 的 canvas 元素使用 JavaScript 在網頁上繪制圖像。

創新互聯專注于企業營銷型網站建設、網站重做改版、桐梓網站定制設計、自適應品牌網站建設、H5技術、商城建設、集團公司官網建設、外貿網站建設、高端網站制作、響應式網頁設計等建站業務，價格優惠性價比高，為桐梓等各大城市提供網站開發制作服務。

畫布是一個矩形區域，您可以控制其每一像素。

canvas 擁有多種繪制路徑、矩形、圓形、字符以及添加圖像的方法。

canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 內部完成：

canvas柱狀圖

var arr = [
  { id: 1001, price: 100 },
  { id: 1002, price: 150 },
  { id: 1003, price: 200 },
  { id: 1004, price: 70 },
  { id: 1005, price: 300 }
 ];
 var gap = 20;
 var canvas = document.querySelector("canvas");
 var ctx;
 init();
 function init() {
  canvas.width = 400;
  canvas.height = 300;
  ctx = canvas.getContext("2d");
  var max = arr.reduce((value, item) => {
  return value < item.price ? item.price : value;
  }, arr[0].price);
  //max高為300的4/5,其他的高為:300*(4/5)/(max) * h maxh:240 = othersh: ? ? = 240 
  var scaleHeight = 300 * 4 / 5 / max;
  //每個柱狀圖的寬為總寬-間隙寬除個數
  var width = (400 - (gap * (arr.length + 1))) / arr.length;
  createChart(width, scaleHeight);
 }

 function createChart(w, hs) {
  ctx.fillStyle = "rgba(0,0,0,0.7)";
  ctx.fillRect(0, 0, 400, 300);
  var x = 0;
  for (var i = 0; i < arr.length; i++) {
  x += gap;
  ctx.fillStyle = "orange";
  var h = hs * arr[i].price;
  ctx.fillRect(x, 300 - h, w, h);
  x += w;
  }
 }

效果：

JavaScript canvas基于數組生成柱狀圖代碼實例

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持創新互聯。

本文標題：JavaScriptcanvas基于數組生成柱狀圖代碼實例
分享網址：http://m.kartarina.com/article44/pgooee.html

成都網站建設公司_創新互聯，為您提供、網站建設、品牌網站建設、網站收錄、關鍵詞優化、標簽優化

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容