最终结果：

代码：

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title></title>

  <style>

    body {

      text-align: center;

    }

    canvas {

      background: #ddd;

    }

  </style>

</head>

<body>

  <h3>使用渐变对象</h3>

  <canvas id="c5" width="500" height="400"></canvas>

  <script>

    function rn(min, max){    //random number

      return Math.floor(Math.random()*(max-min)+min);

    }

    function rc(min, max){    //random color

      var r = rn(min, max);

      var g = rn(min, max);

      var b = rn(min, max);

      return `rgb(${r}, ${g}, ${b})`;

    }

    var ctx = c5.getContext('2d');

    for(var i=0; i<4; i++){

      var w = 50;

      var h = rn(50,300);

      var x = (2*i+1)*50;

      var y = 50;

      //创建渐变对象，并用于填充

      var g = ctx.createLinearGradient(x, y, x, y+h);

      g.addColorStop(0, rc(0,255));

      g.addColorStop(1, '#fff');

      ctx.fillStyle = g;

      //填充一个矩形

      ctx.fillRect(x, y, w, h);

    }

  </script>

</body>

</html>

canvas 创建颜色渐变柱状图的更多相关文章

  1. iOS开发之创建颜色渐变视图View

    在iOS开发中有时需要自己自定义一个视图view的背景,而网上有人提出的在循环中不断alloc的方法设置其背景色渐变,会耗费很多内存和资源,极其不明智,而在CALayer中早就提供有图层渐变的类和相应 ...

  2. canvas 创建渐变图形

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

  3. 使用CSS3创建文字颜色渐变(CSS3 Text Gradient)

    考虑一下,如何在网页中达到类似以下文字渐变的效果? 传统的实现中,是用一副透明渐变的图片覆盖在文字上.具体实现方式可参考 http://www.qianduan.net/css-gradient-te ...

  4. javascript实例教程使用canvas技术模仿echarts柱状图

    canvas 画布是HTML5中新增的标签,可以通过js操作 canvas 绘图 API在网页中绘制图像. 百度开发了一个开源的可视化图表库ECharts,功能非常强大,可以实现折线图.柱状图.散点图 ...

  5. iOS 动画绘制线条颜色渐变的折线图

    效果图 .................... 概述 现状 折线图的应用比较广泛,为了增强用户体验,很多应用中都嵌入了折线图.折线图可以更加直观的表示数据的变化.网络上有很多绘制折线图的demo,有 ...

  6. 【iOS实现一个颜色渐变的弧形进度条】

    在Github上看到一些进度条的功能,都是通过Core Graph来实现.无所谓正确与否,但是开发效率明显就差很多了,而且运行效率还是值得考究的.其实使用苹果提供的Core Animation能够非常 ...

  7. css3的背景颜色渐变@线性渐变

    背景颜色渐变之线性渐变 语法形式: firefox浏览器 background:-moz-linear-gradient(position/deg,startColor,endColor); oper ...

  8. android Button 切换背景，实现动态按钮和按钮颜色渐变

        android Button 切换背景,实现动态按钮和按钮颜色渐变 一.添加android 背景筛选器selector实现按钮背景改变     1.右键单击项目->new->Oth ...

  9. iOS 之使用CAShapeLayer中的CAGradientLayer实现圆环的颜色渐变

    本文转载自:http://blog.csdn.net/zhoutao198712/article/details/20864143 在 Github上看到一些进度条的功能,都是通过Core Graph ...

随机推荐

  1. 一行代码实现笔记本跳过微信认证连接WIFI

    一行代码实现笔记本跳过微信认证连接WIFI 本文作者原创,没有参考其他文章,方法很简单但是很实用,转载请注明出处,谢谢! 问题 有一些WIFI需要通过微信认证才能连接,手机当然是可以的,但是我们手头的 ...

  2. hibernate 一对多、多对多的配置

    一对多 <class name="Question" table="questions" dynamic-insert="true" ...

  3. The 2018 ACM-ICPC上海大都会赛 J Beautiful Numbers （数位DP）

    题意:求小于等于N且能被自己所有位上数之和整除的数的个数. 分析:裸的数位dp.用一个三位数组dp[i][j][k]记录:第i位,之前数位之和为j,对某个mod余数为k的状态下满足条件的个数.这里mo ...

  4. Loopback接口的作用

    Loopback接口是虚拟接口,是一种纯软件性质的虚拟接口.任何送到该接口的网络数据报文都会被认为是送往设备自身的.大多数平台都支持使用这种接口来模拟真正的接口.这样做的好处是虚拟接口不会像物理接口那 ...

  5. 正则表达式：Python3中的应用简介

    正则表达式:Python3中的应用简介 一.正则表达式 1,概述 正则表达式,又称规则表达式.(英语:Regular Expression,在代码中常简写为regex.regexp或RE),计算机科学 ...

  6. Linux中Nginx安装部署

    前言 Nginx ("engine x") 是一个高性能的 HTTP 和 反向代理 服务器,也是一个 IMAP/POP3/SMTP 代理服务器. Nginx 是由 Igor Sys ...

  7. 20145235李涛《网络对抗》Exp6 信息搜集与漏洞扫描

    基础问答 那些组织负责DNS,IP的管理? 全球根服务器均由美国政府授权的ICANN统一管理,负责全球的域名根服务器.DNS和IP地址管理.全球根域名服务器:绝大多数在欧洲和北美(全球13台,用A~M ...

  8. 防盗链&CSRF&API接口幂等性设计

    防盗链技术 CSRF(模拟请求) 分析防止伪造Token请求攻击 互联网API接口幂等性设计 忘记密码漏洞分析 1.Http请求防盗链 什么是防盗链 比如A网站有一张图片,被B网站直接通过img标签属 ...

  9. spring集成spring mvc 和hibernate详解

    1.配置IOC容器 <!-- 配置IOC容器 --> <context-param> <param-name>contextConfigLocation</p ...

  10. spark学习7（spark2.0集群搭建）

    第一步:安装spark 将官网下载好的spark-2.0.0-bin-hadoop2.6.tgz上传到/usr/spark目录下.这里需注意的是spark和hadoop有对应版本关系 [root@sp ...