canvas-第二天

1.对象版折线图

line.js源码：

/**
 * Created by 铁索横江 on 2018/12/28.
 */

/** 参数说明
 * constructor{ line } 折线图构造函数
 * param { ctx: Context } 绘图环境
 * param { data: Array } 绘制折线图所需要的数据
 * param { padding : object} 设置坐标轴到画布的边距
 * param { arrow ：object} 箭头的宽高
 * */
function Line(ctx, data, padding, arrow){
    this.ctx = ctx;
    this.data = data;
    this.padding = padding || { top: 10, bottom: 10, left:10, right: 10, };
    this.arrow = arrow || {width: 20, height: 20};
    /*上顶点的坐标*/
    this.vertexTop = {
        x: this.padding.left,
        y: this.padding.top
    };
    /*原点的坐标*/
    this.origin = {
        x: this.padding.left,
        y: this.ctx.canvas.height - this.padding.bottom
    };
    /*右顶点的坐标*/
    this.vertexRight = {
        x: this.ctx.canvas.width - this.padding.right,
        y: this.ctx.canvas.height - this.padding.bottom
    }
    /*计算坐标轴表示的最大刻度*/
    this.coordWidth = this.ctx.canvas.width - this.padding.left - this.padding.right - this.arrow.height;
    this.coordHeight = this.ctx.canvas.height - this.padding.top - this.padding.bottom -this.arrow.height;
}
    Line.prototype = {
        constructor: Line,

        draw: function () {
            this.drawCoord();
            this.drawArrow();
            this.drawLine();
        },
        //坐标轴
        drawCoord: function(){
            this.ctx.beginPath();
            this.ctx.moveTo(this.vertexTop.x, this.vertexTop.y);
            this.ctx.lineTo(this.origin.x, this.origin.y);
            this.ctx.lineTo(this.vertexRight.x, this.vertexRight.y);
            this.ctx.stroke();
        },
        //箭头
        drawArrow: function(){
            /*上箭头*/
            this.ctx.beginPath();
            this.ctx.moveTo( this.vertexTop.x, this.vertexTop.y);
            this.ctx.lineTo(this.vertexTop.x - this.arrow.width/2, this.vertexTop.y + this.arrow.height);
            this.ctx.lineTo(this.vertexTop.x, this.vertexTop.y + this.arrow.height/2);
            this.ctx.lineTo(this.vertexTop.x + this.arrow.width/2, this.vertexTop.y + this.arrow.height);
            this.ctx.closePath();
            this.ctx.stroke();
            /*右箭头*/
            this.ctx.beginPath();
            this.ctx.moveTo(this.vertexRight.x, this.vertexRight.y);
            this.ctx.lineTo(this.vertexRight.x - this.arrow.height, this.vertexRight.y - this.arrow.width/2);
            this.ctx.lineTo(this.vertexRight.x - this.arrow.height/2, this.vertexRight.y );
            this.ctx.lineTo(this.vertexRight.x - this.arrow.height, this.vertexRight.y + this.arrow.width/2);
            this.ctx.closePath();
            this.ctx.stroke();

        },
        //根据数据绘制折线图
        drawLine: function(){
            //先清除之前的路径
            this.ctx.beginPath();
            //保存当前的this
            var self =  this;
            /*
            * 计算x和y轴坐标的缩放比例
            * RATIOX = THIS.COORDWIDTH/ THIS.DATA.LENGTH
            * RATIOY = THIS.COORDHEIGHT/ MATH.MAX.APPLY(THIS.DATA)
            * */
            var ratioX = this.coordWidth / this.data.length,
                ratioY = this.coordHeight / Math.max.apply(null, this.data);

            /*
            * 要根据原点的坐标来计算点的坐标
            * x = self.origin.x + x
            * y = self.origin.y - y*/

            // 遍历所有的数据，依次绘制点
            this.data.forEach(function (y, x) {
                self.ctx.fillRect(self.origin.x + (x * ratioX) -1, self.origin.y - (y*ratioY)-1, 2, 2);
            });
            // 遍历所有的数据， 一次绘制线
            this.data.forEach(function(y,x){
                self.ctx.lineTo(self.origin.x +(x*ratioX), self.origin.y - (y*ratioY));
            });
            this.ctx.stroke();
        },
    };

html文件源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <canvas id="demoCanvas" width="500" height="500" >
        <p>你的浏览器不支持Canvas</p>
    </canvas>
    <script src="./script/line.js" ></script>
    <script>
        var canvas = document.getElementById("demoCanvas");
        var pencil = canvas.getContext("2d");

        let line = new Line(pencil, [10, 30, 50, 430, 200, 50, 1500, 2000, 600 ]);
        line.draw()
    </script>
</body>
</html>

2.将画布内容转换为base64编码格式的图片

/*·
 * base64编码图片的应用：
 * 如果一个网站中有少量的小图片，可以考虑直接使用base64编码。
 * */
canvas.toDataURL( 'image/png' )

3.画弧

        var canvas = document.getElementById("demoCanvas");
        var pencil = canvas.getContext("2d");
        console.log(Math.PI);

       /*画弧（画的是路径）
       * pencil.arc（圆心x轴坐标， 圆心y轴坐标， 半径， 起点弧度， 结束点弧度， 是否逆时针画（默认顺时针））
       * arc 方法内部会先从路径结束点到弧的起始点画一条路径线
       * 起点弧度， 结束点弧度，以及弧度的方向共同决定了弧的大小*/

       //把角转换为弧度
        function angleToRadian(angle) {

            return Math.PI / 180 * angle;
        }
        /*顺时针画一段弧 */
        pencil.arc(100, 100, 30, angleToRadian(90), angleToRadian(270));
        pencil.stroke();

        /*逆时针画一段弧*/
        pencil.beginPath();
        pencil.arc(200, 100, 30, angleToRadian(90), angleToRadian(270), true);
        pencil.stroke();

        /*一个圆*/
        pencil.beginPath();
        pencil.arc(300, 100, 30, angleToRadian(90), angleToRadian(360));
        pencil.stroke();

        /**
         * 画扇形
         * 1.先设置路径起点为原点 （设置圆心再画弧就会把圆心和弧的开始处连接起来，）
         * 2.画弧
         * 3.闭合路径（将圆心与弧的结尾处连接起来）
         * */
        pencil.beginPath();
        pencil.moveTo(100, 300);
        pencil.arc(100, 300, 90, angleToRadian(45), angleToRadian(180));
        pencil.closePath();
        pencil.stroke();

猜你喜欢