弄了一堆线方块和函数，感觉挺玄乎，然并卵。我们直接写个项目看看。

canvas一个比较拽的应用就是图表和游戏，我们从浅入深，先玩图表，图表我们今天说一个最简单柱状图。

柱状图很多人用百度的echars,那么我们会用更要会写，为啥？我见过太多的人问我echarts不可能完全符合他们公司的需求，随便改一点东西就不搞了，简单的说我们要做开发者，而不是一个js库的搬运工，我们今天就参考这个效果http://echarts.baidu.com/demo...，写一个。

无话可说先搭架子。

index.html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>尼古拉斯·屌·大彬哥</title>

  <link rel="stylesheet" href="style.css" rel="stylesheet">

  <script src="index.js"></script>

</head>

<body>

  <div id="div1">

    这里留着画图用

  </div>

</body>

</html>

index.js

'use strict';

//模仿 http://echarts.baidu.com/demo.html#bar-gradient

window.onload = function(){

    var data = [

      {"label":"一月","value":getRandomInt(0,400)},

      {"label":"一月","value":getRandomInt(1,400)},

      {"label":"一月","value":getRandomInt(1,400)}

    ];

    var targetId = 'bchart';

    var cw = 800;

    var ch = 600;

    function Bcharts(targetId,cw,ch,data){

        console.log(arguments);

    }

    var charts = new Bcharts(targetId,cw,ch,data);

};

//https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Math/random

// 偷个懒，基础函数不写了

function getRandomInt(min, max) {

  min = Math.ceil(min);

  max = Math.floor(max);

  return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive

}

style.css

#div1{

  width:800px;

  height:600px;

  border: 1px solid #000;

  margin: 0 auto;

}

说三件事，

第一件事，搭好架子，后面写代码舒服。这里用的面向对象方式。

第二件事，基础的函数我就不写了，但是你写过100遍以上完全懂可以偷懒，否则老老实实自己研究明白他。

第三件事，数据我用的data模拟，实际项目一般是后台提供。

canvas系列教程03-柱状图项目1的更多相关文章

  1. [js高手之路] html5 canvas系列教程 - 掌握画直线图形的常用API

    我们接着上文[js高手之路] html5 canvase系列教程 - 认识canvas以及基本使用方法继续. 一.直线的绘制 cxt.moveTo( x1, y1 ): 将画笔移动到x1, y1这个点 ...

  2. [js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具)

    之前,我写了一个arc函数的用法:[js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线,弧线,圆形). arcTo: cxt.arcTo( cx, cy, x2, y2, ...

  3. [js高手之路] html5 canvas系列教程 - arc绘制曲线图形(曲线，弧线，圆形)

    绘制曲线,经常会用到路径的知识,如果你对路径有疑问,可以参考我的这篇文章[js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解. arc:画 ...

  4. [js高手之路] html5 canvas系列教程 - 图片操作(drawImage,clip,createPattern)

    接着上文[js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)继续,本文介绍的 ...

  5. [js高手之路] html5 canvas系列教程 - 文本样式(strokeText,fillText,measureText,textAlign,textBaseline)

    接着上文线条样式[js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)继续. canvas提供两种输出文本的方 ...

  6. [js高手之路] html5 canvas系列教程 - 线条样式(lineWidth,lineCap,lineJoin,setLineDash)

    上文,写完弧度与贝塞尔曲线[js高手之路] html5 canvas系列教程 - arcTo(弧度与二次,三次贝塞尔曲线以及在线工具),本文主要是关于线条的样式设置 lineWidth: 设置线条的宽 ...

  7. [js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)

    接着上文[js高手之路] html5 canvas系列教程 - 状态详解(save与restore),相信大家都应该玩过美颜功能,而我们今天要讲的就是canvas强大的像素处理能力,通过像素处理,实现 ...

  8. [js高手之路] html5 canvas系列教程 - 状态详解(save与restore)

    本文内容与路径([js高手之路] html5 canvas系列教程 - 开始路径beginPath与关闭路径closePath详解)是canvas中比较重要的概念.掌握理解他们是做出复杂canvas动 ...

  9. [js高手之路] html5 canvas系列教程 - 线形渐变,径向渐变与阴影设置

    接着上文[js高手之路] html5 canvas系列教程 - 像素操作(反色,黑白,亮度,复古,蒙版,透明)继续. 一.线形渐变 线形渐变指的是一条直线上发生的渐变. 用法: var linear ...

随机推荐

  1. Windows原理深入学习系列-访问控制列表-关于安全描述符的补充

    这是[信安成长计划]的第 20 篇文章 0x00 目录 0x01 安全描述符的结构 0x02 两个结构的不同点 0x03 真正的查询方案 0x04 参考文章 0x01 安全描述符的结构 在上一篇文章中 ...

  2. 04-SpringMVC之请求处理流程

    SpringMVC之请求处理流程 我们知道DispatcherServlet就是一个HttpServlet,而HttpServlet的请求就从doGet/doPost开始 DispatcherServ ...

  3. SpringMVC入门二：SSM整合（spring+springmvc+mybatis）

    一.编程步骤 1.引入依赖 spring.springmvc.mybatis.mybatis-spring.mysql.druid.log4j.servlet-api.jstl.fastjson 2. ...

  4. 『现学现忘』Docker基础 — 10、Docker的安装

    目录 1.前提 2.通过yum安装Docker (1)更新yum包 (2)移除旧的Docker版本 (3)安装必须的软件包 (4)设置稳定yum源仓库 (5)更新yum软件包索引 (6)开始安装Doc ...

  5. 国产化之银河麒麟安装.NetCore-包管理器方式

    背景 某个项目需要实现基础软件全部国产化,其中操作系统指定银河麒麟,数据库使用达梦V8,CPU平台的范围包括x64.龙芯.飞腾.鲲鹏等. 考虑到这些基础产品对.NETCore的支持,最终选择了3.1版 ...

  6. 关于stationary 和non-stationary signals 的区别和定义

    结论:实际上在生活中是没有静态信号(stationary signals)的.而我们之所以把随机信号分为stationary and non-stationary 完全是根据信号产生的特征(chara ...

  7. .NET6: 开发基于WPF的摩登三维工业软件 (8) - MVVM

    基于WPF开发界面的一个很大优势是可以方便地基于MVVM设计模式开发应用.本文从应用的角度基于MVVM实现参数化管材的创建界面. 1 MVVM MVVM是Model-View-ViewModel的简写 ...

  8. linux 系统 解决php -v查看到版本于phpinfo()打印的版本不一致问题

    发现问题的原因: 安装zip扩展后,配置成功,但是使用gitlab合并的时候发生错误,经检查,使用phpinfo打印出来的php版本为7.1,而使用linux度服务器 运行 php -v的版本却是5. ...

  9. VBS文件无限循环解决办法

    VBS文件无限循环解决办法,也就相当于编程中的停止运行指令. 那么如何关掉VBS文件呢?当然关机后会自动关掉,还有另外一种方法就是,在"任务管理器"中找到进程"WScri ...

  10. 基于ECS搭建云上博客（云小宝码上送祝福，免费抽iphone13任务详解）

    码上送祝福,带云小宝回家 做任务免费抽iphone13,还可得阿里云新春限量手办 日期:2021.12.27-2022.1.16 云小宝地址:https://developer.aliyun.com/ ...