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%;
            width: 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,120);  初始化创建实例，默认画弧形图
            }else {
                this.arr=[60,90,150,130,170,190,125,175,155,165,145];
                初始化创建实例，根据type类型canvas作图；此处为柱状图
            }
        },*事件绑定
         
        event:  () {
            this.canvas.addEventListener("mousedown",this.onMouseDown.bind(this),1)">false);
            this.canvas.addEventListener("mousemove",1)">this.onMouseMove.bind(this.canvas.addEventListener("mouseup",1)">this.onMouseUp.bind();
        },1)">*绘制图形
         * 参数：type绘图类型；x,y圆心位置；r内圆弧半径；j可变圆弧结束位置,bgc圆弧颜色
         
        canvasDrawing:  (type,x,y,r,j,bgc) {
            if (type === "arc") {
                this.canvasEnv.clearRect(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,1)">this.y,1)">this.r + 15,Math.PI * 0.85,Math.PI * 0.15,1)">false);  绘制外层单弧线
                this.canvasEnv.strokeStyle = '#f8b500'.canvasEnv.stroke();

                this.r,1)">this.j,1)"> 可变条状圆弧
                this.innerText = ((((this.j / Math.PI) - 0.85) * 100) / 1.3).toFixed(0this.innerText = (this.innerText === "-0") ? (0) : (.innerText);
                document.getElementById("canvasText").value = .innerText;
                this.canvasEnv.strokeStyle = (bgc == undefined) ? (this.colorChoose(.innerText)) : (bgc);
                this.canvasEnv.lineCap = "butt"this.canvasEnv.lineWidth = 20.canvasEnv.stroke();
            } else {        绘制柱状图
                this.sX =this.sY =this.eX =this.eY = j;
                this.canvasEnv.moveTo(this.sX,1)">.sY);
                this.canvasEnv.lineTo(this.eX,1)">.eY);
                .canvasEnv.stroke();
                for (var i = 0; i < 12; i++) {
                    var width = 10;
                    var height = .arr[i];
                    var X = 85 + i * 20var Y = 280 - height;
                    .canvasEnv.beginPath();
                    this.canvasEnv.fillStyle = "#900b09"this.canvasEnv.rect(X,Y,width,height);   rect()：创建矩形
                    .canvasEnv.fill();
                    .canvasEnv.closePath()
                }
            }
        },1)">*确定按下鼠标位置
         
        onMouseDown:  (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.y + 2 * 鼠标按下纵向区间
            if ((minX < X && X < msXX) && (minY < Y && Y < msXY)) {   判断鼠标是否在可允许区间
                this.ex.isDown = true;
            } ;
            }
        },1)">*鼠标释放
         
        onMouseUp: 
        },1)">*鼠标移动
         
        onMouseMove: if (.ex.isDown) {
                var coordinate = {
                    "x": .getX(event),"y": .getY(event)
                };
                var quadrantDoordinate = .coordTransform(coordinate);
                .check(quadrantDoordinate.x,quadrantDoordinate.y)) {
                    var co = .getMoveto(quadrantDoordinate.x,quadrantDoordinate.y);
                    if (co == null) returnthis.ex.canvasDrawing("arc",1)">this.ex.x,1)">this.ex.y,1)">.ex.r,co.z);
                }
            }
        },1)">*canvas内坐标转换为圆形图内坐标
         
        coordTransform:  (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 this.ex.x && coordinates.y < this.ex.y) {      第二象限
                target.x = -(if (coordinates.x < this.ex.y) {       第三象限
                target.x = -(第四象限
                target.x = -( coordinates.y;
            }
             target;
        },1)">*限制鼠标可拖动范围
         
        check:  (x,y) {
            var xx = x * x;
            var yy = y * y;
            var minArea = (this.ex.x - this.ex.r) * (this.ex.r);    可滑动最小区域
            var msXArea = (this.ex.r / 4) * (this.ex.r / 4);  可滑动最大区域
            if (xx + yy > minArea && xx + yy < msXArea) {
                return if (!null;
            }
            var temp = new Object();
            temp.o = Math.atan(y / x); 鼠标移动点圆形角
            temp.x = this.pathr * Math.cos(temp.o);
            temp.y =  Math.sin(temp.o);
            if (y < -60) { 坐标点处理；这里判断没处理好，坐标判定有些问题，鼠标滑动到-60上下，容易将最下面一段圆弧也画出来
                if (x > 0) {  弧度值计算
                temp.z = -Math.atan(temp.y / temp.x) + Math.PI * 2 {
                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);
            } if (temp.z < 2.67) { 条状圆弧最小值(左下角位置)
                temp.z = 2.67;
                temp.x = -this.pathr * Math.cos(Math.PI * 0.85this.pathr * Math.sin(Math.PI * 0.85);
            }
             temp;
        },1)">*获取鼠标在canvas内坐标x
         
        getX: return event.clientX - .canvas.getBoundingClientRect().left;
        },1)">*获取鼠标在canvas内坐标y
         
        getY: return event.clientY - .canvas.getBoundingClientRect().top;
        },1)">*根据数值进行颜色的变换
         
        colorChoose:  (val) {
            var color = ;
            var marginLeftSet = document.getElementById("canvasText"if (val > 90) {
                color = "#FFD800"if (val > 75) {
                color = "#BF9900"if (val > 60) {
                color = "#997C00"if (val > 45) {
                color = "#725B00"if (val > 30) {
                color = "#4C3B00"if (val > 15) {
                color = "#261D00" {
                color = "#000000"if (val == 100) {
                marginLeftSet.style.marginLeft = "-10px"if (val < 10) {
                marginLeftSet.style.marginLeft = "-30px" {
                marginLeftSet.style.marginLeft = "-20px" color;
        }
    };
    canvasDrawing.init("arc");
    *给文本框绑定事件；同时回车更改圆弧形状
     
    document.getElementById("canvasText").addEventListener("keydown",1)"> (event) {
        var keyCode = window.event ? event.keyCode : event.which;
        var value = document.getElementById("canvasText").value;
        if (keyCode == 13 && (value != undefined && value != )) {
            if (parseInt(value) <= 0) {
                value = 0if (parseInt(value) >= 100) {
                value = 100;
            }
            canvasDrawing.canvasDrawing("arc",120,((1.3 * parseInt(value)) / 100 + 0.85) * Math.PI,canvasDrawing.colorChoose(value));
        }
    },1)">);
</script>
</body>
</html>

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

什么是 Canvas？

创建 Canvas 元素

Canvas 对象的属性

height 属性

width 属性

相关推荐

　　height 属性

　　width 属性