<!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. Open Source VOIP applications, both clients and servers (开源sip server & sip client 和开发库)

    SIP Proxies SBO SIP Proxy Bypass All types of Internet Firewall JAIN-SIP Proxy Mini-SIP-Proxy A very ...

  2. Linux启动应用（比如jmeter）报An error occurred: Can't connect to X11 window server using ':0.0' as the value of the DISPLAY variable.

    Linux启动应用(比如jmeter)报An error occurred: Can't connect to X11 window server using ':0.0' as the value ...

  3. 【转】解决Gradle报错找不到org.gradle.api.internal.project.ProjectInternal.getPluginManager()方法问题

    源地址:http://www.mamicode.com/info-detail-1178200.html 一.概述 因为本地的AndroidStudio很久没用了,所以想要研究下github上的某个代 ...

  4. iOS导入高德地图出现缺失armv7--"Undefined symbols for architecture armv7"

    在已有项目中使用pod导入高德地图,报了以下错误: ld: warning: directory not found for option '-L/Users/paul/iOS/yun-hui-yi/ ...

  5. 实验一 Linux初步认识

    遇到的困难和心得体会: 1.在操作过程中,有道作业是建立一个opt/forloutest的文件,而我建立了一个 OPT文件,cd OPT,却显示not a directory,通过阅读<linu ...

  6. 《Maven实战》第10章 使用Maven进行测试

    10.2maven-surefire-plugin插件 [生命周期]的[阶段]与[插件]的[目标]绑定 default生命周期的test阶段:使用单元测试框架运行测试 Maven内置绑定:defaul ...

  7. 关于jquery的each遍历，return只终止当前循环，不好使的解决办法

    很奇怪,一般来说return会终止js,但是今天万万没想到的是,jquery 的each循环中,return不好使,做一记录, var result = true; $('input[type=&qu ...

  8. IE10下阿里旺旺无法快速登录解决办法

    一直都是用Chrome浏览器的,如果已经登录了旺旺,打开淘宝登录的时候都是会有快速登录的,免得手工输入用户名密码了.不经意间用IE10打开淘宝,登录时发现无法使用快速登录,一番研究后发现,IE做了保护 ...

  9. git branch管理小结

    神一样膜拜此链接下http://nvie.com/posts/a-successful-git-branching-model/对git branch模型管理,以下为我的学习心得: 一.branch动 ...

  10. struts2——文件下载自定义文件名，包括中文

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...