动态生成条形图-canvas

来源：互联网发布：java if else 都执行编辑：程序博客网时间：2024/05/16 11:19

按照上篇我稍微改动了一些：
给每个矩形增加了一个颜色的属性

var rec = function (x, y, w, h) {        this.x = x;        this.y = y;        this.w = w;        this.h = h;        this.color=this.h > 300 ? "red" : this.h > 200 ? "yellow" : "green";    }

如果大于300则红色，小于200则绿色，之间的就显示为黄色；

    rec.prototype.draw = function () {        var ctx = document.getElementById("cloth").getContext("2d");        ctx.fillStyle = this.color;        ctx.rect(this.x, this.y, this.w, this.h);        ctx.fill()    }

但是效果确实这样的
这里写图片描述

颜色竟然发生改变了！！！

这是为什么？
我只是改了几个字母就没问题

    rec.prototype.draw = function () {        var ctx = document.getElementById("cloth").getContext("2d");        ctx.fillStyle = this.color;        ctx.fillRect(this.x, this.y, this.w, this.h);        //ctx.fill()    }

效果成了：
这里写图片描述

以下是全部的代码

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>trialgame</title>    <style>        * {            margin: 0;            padding: 0        }        canvas {            margin: 0;            padding: 0;            background: #ddd;        }    </style></head><body><canvas id="cloth" width="500" height="500"></canvas><button id="btn">获取数据</button><script>    //    防止狂点的节流函数，会将事件给btn//    var throttle = function (fn, delay) {//        var timer = null;//        return function () {//            clearTimeout(timer);//            timer = setTimeout(function () {//                fn();//            }, delay);//        }//    };    var rec = function (x, y, w, h) {        this.x = x;        this.y = y;        this.w = w;        this.h = h;        this.color=this.h > 300 ? "red" : this.h > 200 ? "yellow" : "green";    }    rec.prototype.draw = function () {        var ctx = document.getElementById("cloth").getContext("2d");        ctx.fillStyle = this.color;        ctx.fillRect(this.x, this.y, this.w, this.h);    }    var timer = null;    var js = [        {distance: 20},        {distance: 120},        {distance: 220},        {distance: 190},        {distance: 320},        {distance: 400},    ];    btn.onclick = function () {        clearInterval(timer);        var i = 0;        timer = setInterval(function () {            if(i==js.length){                return false            }else{                var y = js[i++]["distance"];                new rec(i*50, 500 - y, 30, y).draw();            }        }, 1000)    }</script></body></html>

阅读全文

0 0