<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>canvas绘制图表</title>

<style type="text/css">

*{

    margin:0;

    padding:0;

}

body{

    text-align:center;

    background-color:black;

}

#c1{

    background-color:white;

}

</style>

<script type="text/javascript">

function rnd(n,m){

    return parseInt(Math.random()*(m-n)+n);

}

window.onload = function(){

    var canvas = document.getElementById('c1');

    var gd = canvas.getContext('2d'); 

    var aData = [100,200,300];

    var space = 20;

    var topSpace = 100;  

    var iMax=Math.max.apply(null,aData)

    var w=40;

    var lastR=0;    //前一个柱子的right  

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

        //原点

        var l=lastR+space;

        var t;

        //根据canvas 和 比例 来确定高, 而不是根据给出的高度

        var h=(aData[i]/iMax)*(canvas.height-topSpace);  

         //原点

         t=canvas.height-h;  

        gd.fillStyle='rgb('+rnd(0, 256)+', '+rnd(0, 256)+', '+rnd(0, 256)+')';  

        gd.fillRect(l,t,w,h);  

        lastR=l+w;

    }

}

</script>

</head>

<body>

    <canvas width='500' height="500" id="c1"></canvas>

</body>

</html>

canvas - 柱子效果的更多相关文章

  1. CodePen 作品秀：Canvas 粒子效果文本动画

    作品名称——Shape Shifter,基于 Canvas 的粒子图形变换实验.在页面下方的输入框输入文本,上面就会进行变换出对应的粒子效果文本动画. CodePen 作品秀系列向大家展示来自 Cod ...

  2. HTML5 Canvas动画效果演示

    HTML5 Canvas动画效果演示 主要思想: 首先要准备一张有连续帧的图片,然后利用HTML5 Canvas的draw方法在不同的时间 间隔绘制不同的帧,这样看起来就像动画在播放. 关键技术点: ...

  3. HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET

    HTML5 Canvas动画效果演示 - 流浪的鱼 - 博客频道 - CSDN.NET HTML5 Canvas动画效果演示

  4. HTML5 Canvas动画效果实现原理

    在线演示 使用HTML5画布可以帮助我们高速实现简单的动画效果.基本原理例如以下: 每隔一定时间绘制图形而且清除图形,用来模拟出一个动画过程,能够使用context.clearRect(0, 0, x ...

  5. HTML5 Canvas时间效果

    Canvas 时间效果: function clockTest() { var canvas = document.getElementById('canvas'); if (!(canvas &am ...

  6. canvas可视化效果之内阴影效果

    canvas可视化效果之内阴影效果 楔子 在之前的一个轨道交通可视化项目中,运用到了很多绘制技巧. 可以参考 之前的一篇文章 <利用canvas阴影功能与双线技巧绘制轨道交通大屏项目效果> ...

  7. 2015.4.25-2015.5.1 字符串去重，比例圆设计，中奖机和canvas橡皮擦效果等

    1.字符串去重,html模板取值   2.javascript正则表达式之$1...$9   3.jquery插件   4.返回上一页并刷新 解决方法: <a href ="javas ...

  8. 7个惊艳的HTML5 Canvas动画效果及源码

    HTML5非常强大,尤其是现在大部分浏览器都支持HTML5和CSS3,用HTML5制作的动画也多了起来.另外,Canvas上绘制图形非常简单,本文就分享了一些强大的HTML5 Cnavas动画,一起来 ...

  9. canvas 弹幕效果

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

随机推荐

  1. JAVA 读取txt文件内容

    原文地址https://www.cnblogs.com/xing901022/p/3933417.html 通常,我们可以直接通过文件流来读取txt文件的内容,但有时可能会出现乱码!此时只要设置一下文 ...

  2. 详解HTTP中GET与POST的区别，不是你看过的标准答案！

    防吐槽声明:本文适合程序员新人,自认阅文无数.技术超叼的大神不用看. GET和POST是HTTP请求的两种基本方法,要说它们的区别,接触过WEB开发的人都能说出一二. 最直观的区别就是GET把参数包含 ...

  3. (转)Nginx反向代理设置 从80端口转向其他端口

    from :http://www.cnblogs.com/wuyou/p/3455381.html Nginx反向代理设置 从80端口转向其他端口   反向代理(Reverse Proxy)方式是指以 ...

  4. 经典iOS第三方库源码分析 - YYModel

    YYModel介绍 YYModel是一个针对iOS/OSX平台的高性能的Model解析库,是属于YYKit的一个组件,创建是ibireme. 其实在YYModel出现之前,已经有非常多的Model解析 ...

  5. javascript 的dateObj.getTime() 在为C#的获取方式

    public string GetTime(DateTime dt) { Int64 retval = 0; DateTime st = new DateTime(1970, 1, 1); TimeS ...

  6. sublime批量替换文本重复单词

    事先需要把单词打到文本的每一行 排序 按F9或者选择菜单:Edit > Sort Lines,对每行文本进行排序 查找重复行 排序好后,按Ctrl+F,调出查找面板 查找字符串: ^(.+)$[ ...

  7. shell编程学习笔记之标准输入输出（read&echo）

    2017-07-17 09:32:07 输入read: 用途: 从标准输入读取一行,或者从文件描述符FD(file descriptor)中读取一行,并且将其分割成字段. 用法: read [-ers ...

  8. Spring Boot集成Redis实现缓存机制【从零开始学Spring Boot】

    转自:https://blog.csdn.net/linxingliang/article/details/52263763 spring boot 自学笔记(三) Redis集成—RedisTemp ...

  9. windows查看端口占用、结束进程

    在开发中难免会遇到windows的端口被占用,现在我们来查看端口的占用和结束占用端口的进程. win+r 输入cmd进入命令提示符: 比如我们要查看8080端口的占用情况,输入netstat -aon ...

  10. CTCS-2017滚粗记

    Day 0: 下午不到四点就来到了宾馆,环境好评,网速能接受,但是你给我搞了个大床房是什么玩意儿啊... 晚上看MasterJH5574大神一直在写题热身(无限崇拜),自己板子没看几眼就丢到一遍去了, ...