html5 canvas学习入门之线性图

最新推荐文章于 2024-01-14 17:33:44 发布

邪小新

最新推荐文章于 2024-01-14 17:33:44 发布

阅读量510

点赞数

文章标签： html5 canvas 入门

本文链接：https://blog.csdn.net/qq_42074075/article/details/88894209

版权

canvas简介：
canvas 最早由Apple引入WebKit,用于Mac OS X 的 Dashboard,后来又在Safari和Google Chrome被实现。基于 Gecko 1.8的浏览器,比如 Firefox 1.5, 同样支持这个元素。 canvas 元素是WhatWG Web applications 1.0规范的一部分,也包含于HTML 5中。
canvas 是 HTML5 新增的，一个可以使用脚本(通常为JavaScript)在其中绘制图像的 HTML 元素。
canvas的基本使用


<canvas width="600" height="400"></canvas>

canvas 只有2个可选属性标签：width 以及height ,
canvas默认的值 width为300、height为150,单位都是px。如果你设置了 width和height
也可以使用css属性来设置宽高，但是如宽高属性和初始比例不一致，他就会出现扭曲。
canvas的设置样式
线形图
ctx.beginPath();重新开始

lineWidth 线宽，默认1px
lineCap 线末端类型：(butt默认)、round（圆的）、square （方的）
lineJoin 相交线的拐点 miter(默认)、round（圆的）、bevel（平的）
strokeStyle 线的颜色
fillStyle 填充颜色
setLineDash() 设置虚线里面传数组[5,10] 实线虚线的长度
getLineDash()里面方数组[5,10] 实线虚线的长度
lineDashOffset =-20 负值是往右偏移正值是往左偏移
饼状图
arc(x,y,r,startAngle,endAngle,bool);
x 圆心横坐标
y 圆心纵坐标
r 半径
startAngle 开始角度
endAngle 结束角度
anticlockwise 是否逆时针方向绘制（默认false表示顺时针；true表示逆时针）

canvas小案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        canvas {
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
<canvas width="600" height="400"></canvas>
<script>
    //构造函数
    var LineChart = function (ctx) {
        this.ctx = ctx || document.querySelector('canvas').getContext('2d');
        this.ctxWidth = this.ctx.canvas.width;
        this.ctxHeight = this.ctx.canvas.height;
        //坐标 原点
        this.space = 20;
        //网格大小
        this.girdSize = 10;
        this.x0 = this.space;
        this.y0 = this.ctxHeight - this.space;
        //箭头
        this.arrowSize = 10;
        //绘制点
        this.dottedSize = 6;
    }
    //行为方法
    LineChart.prototype.init = function (data) {
        this.drawGird();
        this.drawAxis();
        this.drawDatte(data);

    }
    //网格
    LineChart.prototype.drawGird = function () {
        //X轴方向
        var widSize = Math.floor(this.ctxWidth / this.girdSize);
        var heightSize = Math.floor(this.ctxHeight / this.girdSize);
        for (var i = 0; i <= widSize; i++) {
            this.ctx.moveTo(this.girdSize * i - 0.5, 0);
            this.ctx.lineTo(this.girdSize * i - 0.5, this.ctxHeight);
            this.ctx.strokeStyle = '#ccc';
            this.ctx.stroke();
        }
        for (var i = 0; i < heightSize; i++) {
            this.ctx.moveTo(0, this.girdSize * i - 0.5);
            this.ctx.lineTo(this.ctxWidth, this.girdSize * i - 0.5);
            this.ctx.strokeStyle = '#ccc';
            this.ctx.stroke();
        }

    }
    //画坐标系
    LineChart.prototype.drawAxis = function () {
        //坐X
        this.ctx.beginPath();
        this.ctx.moveTo(this.x0, this.y0);
        this.ctx.lineTo(this.ctxWidth - this.girdSize, this.y0);
        this.ctx.strokeStyle = "#333";
        this.ctx.stroke();
        //x箭头
        this.ctx.beginPath();
        this.ctx.moveTo(this.ctxWidth - this.girdSize - this.arrowSize, this.y0 - this.arrowSize / 2);
        this.ctx.lineTo(this.ctxWidth - this.girdSize - this.arrowSize, this.y0 + this.arrowSize / 2);
        this.ctx.lineTo(this.ctxWidth - this.girdSize, this.y0);
        this.ctx.fill();
        //Y轴
        this.ctx.beginPath();
        this.ctx.moveTo(this.x0, this.y0);
        this.ctx.lineTo(this.space, this.space);
        this.ctx.strokeStyle = '#333';
        this.ctx.stroke();

        //Y轴箭头
        this.ctx.beginPath();
        this.ctx.moveTo(this.space - this.arrowSize / 2, this.space + this.arrowSize / 2);
        this.ctx.lineTo(this.space + this.arrowSize / 2, this.space + this.arrowSize / 2);
        this.ctx.lineTo(this.space, this.space);
        this.ctx.fill();

    }
    //画多个点
    LineChart.prototype.drawDatte = function (data) {
        var that = this;
        var beginX = 0;
        var beginY = 0;
        data.forEach(function (item, i) {
            var canvasX = that.x0 + item.x;
            var canvasY = that.y0 - item.y;
            //绘制点
            that.ctx.beginPath();
            that.ctx.moveTo(canvasX - that.dottedSize / 2, canvasY - that.dottedSize / 2);
            that.ctx.lineTo(canvasX + that.dottedSize / 2, canvasY - that.dottedSize / 2);
            that.ctx.lineTo(canvasX + that.dottedSize / 2, canvasY + that.dottedSize / 2);
            that.ctx.lineTo(canvasX - that.dottedSize / 2, canvasY + that.dottedSize / 2);
            that.ctx.fill();
            //连线
            if (i == 0) {
                that.ctx.beginPath();
                that.ctx.moveTo(that.x0, that.y0);
                that.ctx.lineTo(canvasX, canvasY);
                that.ctx.stroke();
            } else {
                that.ctx.beginPath();
                that.ctx.moveTo(beginX, beginY);
                that.ctx.lineTo(canvasX, canvasY);
                that.ctx.stroke();
            }
            beginX = canvasX;
            beginY = canvasY;

        });
    }


    var data = [{
        x: 100,
        y: 100
    }, {
        x: 160,
        y: 170
    }, {
        x: 240,
        y: 190
    }];
    var lineChart = new LineChart();
    lineChart.init(data);


</script>
</body>
</html>

效果：
在这里插入图片描述

邪小新

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html5 canvas学习入门之线性图

canvas简介：canvas 最早由Apple引入WebKit,用于Mac OS X 的 Dashboard,后来又在Safari和Google Chrome被实现。基于 Gecko 1.8的浏览器,比如 Firefox 1.5, 同样支持这个元素。 canvas 元素是WhatWG Web applications 1.0规范的一部分,也包含于HTML 5中。canvas 是 HTML...
复制链接

扫一扫