zoukankan      html  css  js  c++  java
  • Canvas作图

      前几天项目GIS部分一个功能模块需要一个控制仪表盘,虽然之前看过canvas作图,但是没怎么具体用过。今天就这个功能模块研究了下canvas。

    什么是 Canvas?

      canvas 元素用于在网页上绘制图形。<canvas> 元素本身并没有绘制能力(它仅仅是图形的容器),必须使用脚本来完成实际的绘图任务,通常是用JavaScript在网页上绘制图像。canvas所在画布是一个矩形区域,我们可以控制画布的每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。一句话说完,功能很强大,需要研究的东西很多!

    创建 Canvas 元素

      在 HTML5 页面添加 canvas 元素。规定元素的 id、和宽高:

    <body>
      <canvas id="canvas" width="400" height="400"></canvas>
    </body>

      Canvas 对象表示一个 HTML 画布元素 - <canvas>。它没有自己的行为,但是定义了一个 很多API 支持脚本化客户端绘图操作。

    Canvas 对象的属性

      height 属性

        画布的高度。和一幅图像一样,这个属性可以指定为一个整数像素值或者是窗口高度的百分比。当这个值改变的时候,在该画布上已经完成的任何绘图都会擦除掉。默认值是 300。

      width 属性

        画布的宽度。和一幅图像一样,这个属性可以指定为一个整数像素值或者是窗口宽度的百分比。当这个值改变的时候,在该画布上已经完成的任何绘图都会擦除掉。默认值是 300。

    具体的实验代码如下,效果可直接执行代码测试:所有的注释都写在了代码里面,故不另行做注释

    <!DOCTYPE html>
    <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <style type="text/css">
            canvas {
                border: 1px solid red;
                background-color: #fff;
                cursor: pointer;
            }
    
            input {
                position: absolute;
                font-size: 20px;
                color: #f8b500;
                top: 18%;
                left: 9%;
                 100px;
                height: 30px;
                line-height: 28px;
                text-align: center;
            }
        </style>
    </head>
    <body>
    <body>
    <canvas id="canvas" width="400" height="400"></canvas>
    <input id="canvasText" value="">
    <script>
        var canvasDrawing = {
            /**绘图对象初始化
             * 参数:type 初始化类型。arc:圆弧形;bar :柱状图
             */
            init: function (type) {
                this.canvas = document.getElementById("canvas");    //获取用于canvas作图的对象
                this.canvasEnv = this.canvas.getContext("2d");    //getContext()返回一个用于在画布上绘图的环境。当前唯一的合法参数值是 "2d",它指定了二维绘图。
                this.pathr = 120;  //滑动路径半径
                if(type === "arc"){
                    this.event();       //事件绑定初始化
                    this.canvasDrawing.prototype = this; //canvasDrawing方法继承父元素内方法
                    this.ex = new this.canvasDrawing(type, 200, 200, 120);  //初始化创建实例,默认画弧形图
                }else {
                    this.arr=[60, 90, 150, 130, 170, 190, 125, 175, 155, 165, 155, 145];
                    this.ex = new this.canvasDrawing(type, 70, 280, 330, 280);  //初始化创建实例,根据type类型canvas作图;此处为柱状图
                }
            },
            /**事件绑定
             */
            event: function () {
                this.canvas.addEventListener("mousedown", this.onMouseDown.bind(this), false);
                this.canvas.addEventListener("mousemove", this.onMouseMove.bind(this), false);
                this.canvas.addEventListener("mouseup", this.onMouseUp.bind(this), false);
            },
            /**绘制图形
             * 参数:type绘图类型;x,y圆心位置;r内圆弧半径;j可变圆弧结束位置,bgc圆弧颜色
             */
            canvasDrawing: function (type, x, y, r, j, bgc) {
                if (type === "arc") {
                    this.canvasEnv.clearRect(0, 0, 400, 400);
                    this.x = x;
                    this.y = y;
                    this.r = r;
                    this.j = j || 0.85 * Math.PI;
    
                    this.canvasEnv.beginPath();
                    this.canvasEnv.lineWidth = 3;
                    this.canvasEnv.arc(this.x, this.y, this.r + 15, Math.PI * 0.85, Math.PI * 0.15, false); // 绘制外层单弧线
                    this.canvasEnv.strokeStyle = '#f8b500';
                    this.canvasEnv.stroke();
    
                    this.canvasEnv.beginPath();
                    this.canvasEnv.arc(this.x, this.y, this.r, Math.PI * 0.85, this.j, false); // 可变条状圆弧
                    this.innerText = ((((this.j / Math.PI) - 0.85) * 100) / 1.3).toFixed(0);
                    this.innerText = (this.innerText === "-0") ? (0) : (this.innerText);
                    document.getElementById("canvasText").value = this.innerText;
                    this.canvasEnv.strokeStyle = (bgc == undefined) ? (this.colorChoose(this.innerText)) : (bgc);
                    this.canvasEnv.lineCap = "butt";
                    this.canvasEnv.lineWidth = 20;
                    this.canvasEnv.stroke();
                } else {        //绘制柱状图
                    this.sX = x;
                    this.sY = y;
                    this.eX = r;
                    this.eY = j;
                    this.canvasEnv.beginPath();
                    this.canvasEnv.moveTo(this.sX, this.sY);
                    this.canvasEnv.lineTo(this.eX, this.eY);
                    this.canvasEnv.stroke();
                    for (var i = 0; i < 12; i++) {
                        var width = 10;
                        var height = this.arr[i];
                        var X = 85 + i * 20;
                        var Y = 280 - height;
                        this.canvasEnv.beginPath();
                        this.canvasEnv.fillStyle = "#900b09";
                        this.canvasEnv.rect(X, Y, width, height);   //rect():创建矩形
                        this.canvasEnv.fill();
                        this.canvasEnv.closePath()
                    }
                }
            },
            /**确定按下鼠标位置
             */
            onMouseDown: function (event) {
                var X = this.getX(event);   //获取鼠标左键按下所在的X坐标
                var Y = this.getY(event);   //获取鼠标左键按下所在的Y坐标
                var minX = this.ex.x - 2 * this.ex.r, msXX = this.ex.x + 2 * this.ex.r;     //鼠标按下横向区间
                var minY = this.ex.y - 2 * this.ex.r, msXY = this.ex.y + 2 * this.ex.r;     //鼠标按下纵向区间
                if ((minX < X && X < msXX) && (minY < Y && Y < msXY)) {   //判断鼠标是否在可允许区间
                    this.ex.isDown = true;
                } else {
                    this.ex.isDown = false;
                }
            },
            /**鼠标释放
             */
            onMouseUp: function () {
                this.ex.isDown = false
            },
            /**鼠标移动
             */
            onMouseMove: function (event) {
                if (this.ex.isDown) {
                    var coordinate = {
                        "x": this.getX(event),
                        "y": this.getY(event)
                    };
                    var quadrantDoordinate = this.coordTransform(coordinate);
                    if (this.check(quadrantDoordinate.x, quadrantDoordinate.y)) {
                        var co = this.getMoveto(quadrantDoordinate.x, quadrantDoordinate.y);
                        if (co == null) return;
                        this.ex.canvasDrawing("arc", this.ex.x, this.ex.y, this.ex.r, co.z);
                    }
                }
            },
            /**canvas内坐标转换为圆形图内坐标
             */
            coordTransform: function (coordinates) {
                var target = new Object();      //象限按照数学顺时针划分
                if (coordinates.x > this.ex.x && coordinates.y > this.ex.y) {           //第一象限
                    target.x = -(this.ex.x - coordinates.x);
                    target.y = this.ex.y - coordinates.y;
                } else if (coordinates.x > this.ex.x && coordinates.y < this.ex.y) {      //第二象限
                    target.x = -(this.ex.x - coordinates.x);
                    target.y = this.ex.y - coordinates.y;
                } else if (coordinates.x < this.ex.x && coordinates.y < this.ex.y) {       //第三象限
                    target.x = -(this.ex.x - coordinates.x);
                    target.y = this.ex.y - coordinates.y;
                } else if (coordinates.x < this.ex.x && coordinates.y > this.ex.y) {       //第四象限
                    target.x = -(this.ex.x - coordinates.x);
                    target.y = this.ex.y - coordinates.y;
                }
                return target;
            },
            /**限制鼠标可拖动范围
             */
            check: function (x, y) {
                var xx = x * x;
                var yy = y * y;
                var minArea = (this.ex.x - this.ex.r) * (this.ex.x - this.ex.r);    //可滑动最小区域
                var msXArea = (this.ex.x - this.ex.r / 4) * (this.ex.x - this.ex.r / 4);  //可滑动最大区域
                if (xx + yy > minArea && xx + yy < msXArea) {
                    return true;
                } else {
                    return false;
                }
            },
            getMoveto: function (x, y) {
                if (!this.ex.isDown) {
                    return null;
                }
                var temp = new Object();
                temp.o = Math.atan(y / x); //鼠标移动点圆形角
                temp.x = this.pathr * Math.cos(temp.o);
                temp.y = this.pathr * Math.sin(temp.o);
                if (y < -60) { //坐标点处理;这里判断没处理好,坐标判定有些问题,鼠标滑动到-60上下,容易将最下面一段圆弧也画出来
                    return null;
                }
                if (x > 0) {  //弧度值计算
                    temp.z = -Math.atan(temp.y / temp.x) + Math.PI * 2;
                } else {
                    temp.z = -Math.atan(temp.y / temp.x) + Math.PI;
                }
                if (temp.z > 6.77) {  //条状圆弧最大值(右下角位置)
                    temp.z = 6.77;
                    temp.x = this.pathr * Math.cos(Math.PI * 2.05);
                    temp.y = -this.pathr * Math.sin(Math.PI * 2.05);
                } else if (temp.z < 2.67) { //条状圆弧最小值(左下角位置)
                    temp.z = 2.67;
                    temp.x = -this.pathr * Math.cos(Math.PI * 0.85);
                    temp.y = -this.pathr * Math.sin(Math.PI * 0.85);
                }
                return temp;
            },
            /**获取鼠标在canvas内坐标x
             */
            getX: function (event) {
                return event.clientX - this.canvas.getBoundingClientRect().left;
            },
            /**获取鼠标在canvas内坐标y
             */
            getY: function (event) {
                return event.clientY - this.canvas.getBoundingClientRect().top;
            },
            /**根据数值进行颜色的变换
             */
            colorChoose: function (val) {
                var color = null;
                var marginLeftSet = document.getElementById("canvasText");
                if (val > 90) {
                    color = "#FFD800";
                } else if (val > 75) {
                    color = "#BF9900";
                } else if (val > 60) {
                    color = "#997C00";
                } else if (val > 45) {
                    color = "#725B00";
                } else if (val > 30) {
                    color = "#4C3B00";
                } else if (val > 15) {
                    color = "#261D00";
                } else {
                    color = "#000000";
                }
                if (val == 100) {
                    marginLeftSet.style.marginLeft = "-10px";
                } else if (val < 10) {
                    marginLeftSet.style.marginLeft = "-30px";
                } else {
                    marginLeftSet.style.marginLeft = "-20px";
                }
                return color;
            }
        };
        canvasDrawing.init("arc");
        /**给文本框绑定事件;同时回车更改圆弧形状
         */
        document.getElementById("canvasText").addEventListener("keydown", function (event) {
            var keyCode = window.event ? event.keyCode : event.which;
            var value = document.getElementById("canvasText").value;
            if (keyCode == 13 && (value != undefined && value != null)) {
                if (parseInt(value) <= 0) {
                    value = 0;
                } else if (parseInt(value) >= 100) {
                    value = 100;
                }
                canvasDrawing.canvasDrawing("arc", 200, 200, 120, ((1.3 * parseInt(value)) / 100 + 0.85) * Math.PI, canvasDrawing.colorChoose(value));
            }
        }, false);
    </script>
    </body>
    </html>

    效果图如下:(中间显示值表示当前弧形占比。值为0~100)

  • 相关阅读:
    Spring 总结
    分布式缓存Memcache
    Docker原理 -- namespace与CGroup
    JDK源码分析--Collections
    React生命周期总结
    【转】前端优化的35条
    http缓存与cdn相关技术
    跨域处理
    sequekize
    orm2
  • 原文地址:https://www.cnblogs.com/donghuang/p/8437954.html
Copyright © 2011-2022 走看看