canvas 创建颜色渐变柱状图
最终结果:
代码:
<!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 创建颜色渐变柱状图的更多相关文章
- iOS开发之创建颜色渐变视图View
在iOS开发中有时需要自己自定义一个视图view的背景,而网上有人提出的在循环中不断alloc的方法设置其背景色渐变,会耗费很多内存和资源,极其不明智,而在CALayer中早就提供有图层渐变的类和相应 ...
- canvas 创建渐变图形
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 使用CSS3创建文字颜色渐变(CSS3 Text Gradient)
考虑一下,如何在网页中达到类似以下文字渐变的效果? 传统的实现中,是用一副透明渐变的图片覆盖在文字上.具体实现方式可参考 http://www.qianduan.net/css-gradient-te ...
- javascript实例教程使用canvas技术模仿echarts柱状图
canvas 画布是HTML5中新增的标签,可以通过js操作 canvas 绘图 API在网页中绘制图像. 百度开发了一个开源的可视化图表库ECharts,功能非常强大,可以实现折线图.柱状图.散点图 ...
- iOS 动画绘制线条颜色渐变的折线图
效果图 .................... 概述 现状 折线图的应用比较广泛,为了增强用户体验,很多应用中都嵌入了折线图.折线图可以更加直观的表示数据的变化.网络上有很多绘制折线图的demo,有 ...
- 【iOS实现一个颜色渐变的弧形进度条】
在Github上看到一些进度条的功能,都是通过Core Graph来实现.无所谓正确与否,但是开发效率明显就差很多了,而且运行效率还是值得考究的.其实使用苹果提供的Core Animation能够非常 ...
- css3的背景颜色渐变@线性渐变
背景颜色渐变之线性渐变 语法形式: firefox浏览器 background:-moz-linear-gradient(position/deg,startColor,endColor); oper ...
- android Button 切换背景,实现动态按钮和按钮颜色渐变
android Button 切换背景,实现动态按钮和按钮颜色渐变 一.添加android 背景筛选器selector实现按钮背景改变 1.右键单击项目->new->Oth ...
- iOS 之使用CAShapeLayer中的CAGradientLayer实现圆环的颜色渐变
本文转载自:http://blog.csdn.net/zhoutao198712/article/details/20864143 在 Github上看到一些进度条的功能,都是通过Core Graph ...
随机推荐
- input和raw_input的区别
input会假设用户输入的是合法的Python表达式raw_input会把所有的输入当作原始数据,然后将其放入字符串中. 在最新的版本之中,input可以直接使用,替代了raw_input. 在2.7 ...
- ipv6被拒的解决方法
A,检测服务器是否支持ipv6连接 用mac 搭建IPv6环境测试,只能测试客户端到mac这段网络正常,但是mac到服务器还是IPv4的,所以没有办法测试服务器的IPv6是否正常.可以用手机打开2)步 ...
- HDU - 1151 Air Raid (最小路径覆盖)
题意:给定一个有向无环图,求最少划分几条路径,使之能够覆盖所有点. 分析:这可以转化为DAG上的最小路径覆盖问题. 路径覆盖的定义:有向图中,路径覆盖就是在图中找一些路径,使之覆盖了图中的所有顶点,且 ...
- boot空间不足,删除Ubuntu旧内核
0 Problem 今天打开电脑的时候ubuntu提示boot空间不足.查了资料,原来Ubuntu的自动升级并没有删除系统的旧内核,于是boot下旧的内核文件越积越多,最后就满了. 1 Solutio ...
- linux mkisofs(genisoimage)命令用法
功能说明:建立ISO 9660映像文件. 常用命令:genisoimage -o imagename.iso file 语 法:mkisofs [-adDfhJlLNrRTvz][-print-siz ...
- 20145217《网络对抗》 Web安全基础实践
20145217<网络对抗> Web安全基础实践 一.实践任务 本实践的目标理解常用网络攻击技术的基本原理.Webgoat实践下相关实验. 二.实验后回答问题 (1)SQL注入攻击原理,如 ...
- jz2440存储管理实验【学习笔记】
平台:jz2440 作者:庄泽彬(欢迎转载,请注明作者) 说明:韦东山一期视频学习笔记 简介:先来简单的说明一下这次的实验,看看下图,我们的程序通过烧录器下载到nandflash当中去,之后在启动的时 ...
- python中set的用处
python中有很多不同的数据结构,比如list,tuple,set,dic等,为什么我要单独讲set呢. 因为set是一个比较容易被遗忘的数据结构,不光在python中,在C++中也一样,反正我是很 ...
- Spring_配置 Bean(1)
- JQ input标签限制输入数字或字母
<input type="text" maxlength="20" class="input5" onkeyup="val ...