1 <!DOCTYPE html>

  2 <html lang="en">

  3 <head>

  4     <meta charset="UTF-8">

  5     <title>14-Canvas绘制柱状图</title>

  6     <style>

  7         *{

  8             margin: 0;

  9             padding: 0;

 10         }

 11         canvas{

 12             display: block;

 13             margin: 0 auto;

 14             background: red;

 15         }

 16     </style>

 17 </head>

 18 <body>

 19 <canvas width="500" height="400"></canvas>

 20 <script>

 21     // 1.拿到canvas

 22     let oCanvas = document.querySelector("canvas");

 23     // 2.从canvas中拿到绘图工具

 24     let oCtx = oCanvas.getContext("2d");

 25     // 3.定义变量保存小方格的尺寸

 26     let gridSize = 50;

 27     // 4.拿到canvas的宽高

 28     let canvasWidth = oCtx.canvas.width;

 29     let canvasHeight = oCtx.canvas.height;

 30     // 5.计算在垂直方向和水平方向可以绘制多少条横线

 31     let row = Math.floor(canvasHeight / gridSize);

 32     let col = Math.floor(canvasWidth / gridSize);

 33     // 6.绘制垂直方向的横线

 34     for(let i = 0; i < row; i++){

 35         oCtx.beginPath();

 36         oCtx.moveTo(0, i * gridSize - 0.5);

 37         oCtx.lineTo(canvasWidth, i * gridSize - 0.5);

 38         oCtx.strokeStyle = "#ccc";

 39         oCtx.stroke();

 40     }

 41     // 7.绘制水平方向的横线

 42     for(let i = 0; i < col; i++){

 43         oCtx.beginPath();

 44         oCtx.moveTo(i * gridSize - 0.5, 0);

 45         oCtx.lineTo(i * gridSize - 0.5, canvasHeight);

 46         oCtx.strokeStyle = "#ccc";

 47         oCtx.stroke();

 48     }

 49

 50     // 1.计算坐标系原点的位置

 51     let originX = gridSize;

 52     let originY = canvasHeight - gridSize;

 53     // 2.计算X轴终点的位置

 54     let endX = canvasWidth - gridSize;

 55     // 3.绘制X轴

 56     oCtx.beginPath();

 57     oCtx.moveTo(originX, originY);

 58     oCtx.lineTo(endX, originY);

 59     oCtx.strokeStyle = "#000";

 60     oCtx.stroke();

 61     // 4.绘制X轴的箭头

 62     oCtx.lineTo(endX - 10, originY + 5);

 63     oCtx.lineTo(endX - 10, originY - 5);

 64     oCtx.lineTo(endX, originY);

 65     oCtx.fill();

 66

 67     // 5.计算Y轴终点的位置

 68     let endY = gridSize;

 69     // 3.绘制Y轴

 70     oCtx.beginPath();

 71     oCtx.moveTo(originX, originY);

 72     oCtx.lineTo(originX, endY);

 73     oCtx.strokeStyle = "#000";

 74     oCtx.stroke();

 75     // 4.绘制X轴的箭头

 76     oCtx.lineTo(originX - 5, endY + 10);

 77     oCtx.lineTo(originX + 5, endY + 10);

 78     oCtx.lineTo(originX, endY);

 79     oCtx.fill();

 80

 81     // 1.拿到服务器返回数据

 82     let list = [

 83         {

 84             x: 100,

 85             y: 300

 86         },

 87         {

 88             x: 200,

 89             y: 200

 90         },

 91         {

 92             x: 300,

 93             y: 250

 94         },

 95     ];

 96     let data = {

 97         x: 100,

 98         y: 300

 99     }

100     // 2.绘制矩形

101     for(let i = 0; i < list.length; i++){

102         let barHeight = originY - list[i].y;

103         oCtx.fillRect(list[i].x, list[i].y, gridSize, barHeight);

104     }

105

106 </script>

107 </body>

108 </html>

14-canvas绘制柱状图的更多相关文章

  1. 第167天：canvas绘制柱状图

    canvas绘制柱状图 1.HTML <!DOCTYPE html> <html lang="en"> <head> <meta char ...

  2. 【带着canvas去流浪】（1）绘制柱状图

    目录 一. 任务说明 二. 重点提示 三. 示例代码 四. 思考题 示例代码托管在:http://www.github.com/dashnowords/blogs 博客园地址:<大史住在大前端& ...

  3. 带着canvas去流浪系列之一：绘制柱状图

    [摘要] 学习使用canvasAPI来实现数据可视化. 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI绘制柱 ...

  4. 用canvas绘制折线图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. html5的canvas绘制迷宫地图

    canvas标签一直是html5的亮点,用它可以实现很多东西.我想用它来绘画像迷宫那样的地图.借助到的工具有瓦片地图编辑器tiled(点击跳转到下载链接). 如图:如果你想要画像这样的迷宫地图,如果不 ...

  6. Android之使用AchartEngineActivity引擎绘制柱状图、曲线图

    1.简介 AChartEngine(简称ACE)是Google的一个开源图表库(for Android).它功能强大,支持散点图.折线 .关于里面类的具体使用,请下载响应的文档说明(主页上有). 2. ...

  7. HTML5 canvas 绘制五星红旗

    这个例子并不是自己写的,在网上找的案列,仿照写的,,,自己真的公布董这些算法,看完这个例子还是有一点模糊,,, 如果谁看的比较明白,指点一下,,,多谢!!!! <!doctype html> ...

  8. 【朝花夕拾】Android自定义View篇之（三）Canvas绘制文字

    前言 转载请声明,转自[https://www.cnblogs.com/andy-songwei/p/10968358.html],谢谢! 前面的文章中在介绍Canvas的时候,提到过后续单独讲Can ...

  9. canvas绘制五星红旗

    代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8& ...

  10. 使用matplotlib中的bar函数绘制柱状图

    使用柱状图显示三日电影的票房信息 要显示的数据为2018年12月7日-9日四场电影的票房信息 四场电影分别为:无名之辈,狗十三,毒液:知名守卫者,憨豆特工3 2018年12月7日四场电影票房分别为:[ ...

随机推荐

  1. 洛谷 P1226 快速幂

    题目链接:快速幂 思路 简单快速幂模板.a ^ 17 = (a ^ 2) ^ 8 * a,此时pow()中的y就可以视为17 -> 8(y >>= 1),pow()中的x就是底数a ...

  2. 迭代器模式（Interator Pattern）

    一.模式动机 迭代器模式(Iterator Pattern)是一种使用频率非常高的行为型设计模式,迭代器用于对一个聚合对象进行遍历.通过引入迭代器可以将数据的遍历功能从聚合对象中分离出来,聚合对象只负 ...

  3. shell脚本获取函数返回值

    方式1 原理:return返回的值可以通过$?得到. 缺点:return只能返回整数 #!/bin/sh function test() { return 100 } test echo $? 方式2 ...

  4. python利用公私钥加解密

    小贴士 这里不再赘述公私钥的生成过程.可以利用OpenSSL进行生成. 加密代码 #!/usr/bin/python #加密 #conda install pycrypto #提前安装模块 impor ...

  5. 大模型重塑软件开发，华为云AI原生应用架构设计与实践分享

    在ArchSummit全球架构师峰会2024上,华为云aPaaS平台首席架构师马会彬受邀出席,和技术爱好者分享AI原生应用引擎的架构与实践. AI大模型与AI重塑软件的大趋势下,软件会发生哪些本质的变 ...

  6. 用基础Array数组实现动态数组、链表、栈和队列

    代码地址: https://gitee.com/Tom-shushu/Algorithm-and-Data-Structure.git 一.ArrayList自定义封装 package com.zho ...

  7. 【译】了解17.10 GA 中最新的 Git 工具特性

    我们相信提高开发和团队协作的生产力可以帮助您产生更好的软件解决方案.这就是为什么 Visual Studio 版本控制团队发布了新特性,简化了内部循环和代码审查体验.您将获得 AI 支持编写提交消息. ...

  8. SpringMVC原理（1）-文件上传请求

    我们文件上传接口只需要在方法参数上写MultipartFile类,mvc就可以帮我们把上传的文件封装为这个类的对 象供我们非常方便的操作,那它是怎么做的呢?我们一起来看看 我们发的请求默认都是由Dis ...

  9. AT_abc215F 题解

    考虑二分答案. 假设当前二分的答案为 \(k\),那么对于每个点,距离大于等于 \(k\) 的点构成了平面上 \(4\) 个子平面. 那么只需查询子平面中是否存在点即可,类似于窗口的星星,把问题转换成 ...

  10. VMware vCenter Server 7.0U3r 下载 - 修复堆溢出 (远程执行代码) 和本地权限提升漏洞

    VMware vCenter Server 是一款高级服务器管理软件,提供了一个集中式平台来控制 vSphere 环境,以实现跨混合云的可见性. 简化且高效的服务器管理 什么是 vCenter Ser ...