最终结果:

代码:

<!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. input和raw_input的区别

    input会假设用户输入的是合法的Python表达式raw_input会把所有的输入当作原始数据,然后将其放入字符串中. 在最新的版本之中,input可以直接使用,替代了raw_input. 在2.7 ...

  2. ipv6被拒的解决方法

    A,检测服务器是否支持ipv6连接 用mac 搭建IPv6环境测试,只能测试客户端到mac这段网络正常,但是mac到服务器还是IPv4的,所以没有办法测试服务器的IPv6是否正常.可以用手机打开2)步 ...

  3. HDU - 1151 Air Raid (最小路径覆盖)

    题意:给定一个有向无环图,求最少划分几条路径,使之能够覆盖所有点. 分析:这可以转化为DAG上的最小路径覆盖问题. 路径覆盖的定义:有向图中,路径覆盖就是在图中找一些路径,使之覆盖了图中的所有顶点,且 ...

  4. boot空间不足,删除Ubuntu旧内核

    0 Problem 今天打开电脑的时候ubuntu提示boot空间不足.查了资料,原来Ubuntu的自动升级并没有删除系统的旧内核,于是boot下旧的内核文件越积越多,最后就满了. 1 Solutio ...

  5. linux mkisofs(genisoimage)命令用法

    功能说明:建立ISO 9660映像文件. 常用命令:genisoimage -o imagename.iso file 语 法:mkisofs [-adDfhJlLNrRTvz][-print-siz ...

  6. 20145217《网络对抗》 Web安全基础实践

    20145217<网络对抗> Web安全基础实践 一.实践任务 本实践的目标理解常用网络攻击技术的基本原理.Webgoat实践下相关实验. 二.实验后回答问题 (1)SQL注入攻击原理,如 ...

  7. jz2440存储管理实验【学习笔记】

    平台:jz2440 作者:庄泽彬(欢迎转载,请注明作者) 说明:韦东山一期视频学习笔记 简介:先来简单的说明一下这次的实验,看看下图,我们的程序通过烧录器下载到nandflash当中去,之后在启动的时 ...

  8. python中set的用处

    python中有很多不同的数据结构,比如list,tuple,set,dic等,为什么我要单独讲set呢. 因为set是一个比较容易被遗忘的数据结构,不光在python中,在C++中也一样,反正我是很 ...

  9. Spring_配置 Bean(1)

  10. JQ input标签限制输入数字或字母

    <input type="text"  maxlength="20" class="input5" onkeyup="val ...