canvas绘制表格
文章 2487 0 0 0
发布时间:2019年02月16日

概述

追梦猪(zmz)最近在学习canvas画图表,所有收藏一下相关的demo,供有缘人参考,Canvas API(画布)是在HTML5中新增的标签用于在网页实时生成图像,并且可以操作图像内容,基本上它是一个可以用JavaScript操作的位图(bitmap)。

html部分

<canvas id="canvas" width="900" height="600" style="border:1px solid #000"></canvas>

js部分

<script>
    // 1. 获取标签
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    // 2.绘制表格
    // 2.1 常量
    var marginXY = 10;
    var rows = canvas.height / marginXY,
        cols = canvas.width / marginXY;
    // 2.2 绘制横线
    for (var i=1; i<rows; i++){        // 起点
        ctx.moveTo(0, imarginXY);        // 终点
        ctx.lineTo(canvas.width, imarginXY);
    }
    // 2.3 绘制竖线
    for (var i=1; i<cols; i++){         // 起点
        ctx.moveTo(imarginXY, 0);         // 终点
        ctx.lineTo(imarginXY, canvas.height);
    }
    // 绘制
    ctx.strokeStyle = 'red';
    ctx.lineWidth = .5;
    ctx.stroke();
    // 3.绘制坐标
    // 3.1 常量
    var x0 = 100, y0 = 500;
    var maxWidth = 500, maxHeight = 400;
    // 3.2 绘制坐标
    ctx.beginPath();
    ctx.moveTo(x0, y0);
    ctx.lineTo(x0 + maxWidth, y0);
    ctx.lineTo(x0 + maxWidth - marginXY, y0 - marginXY);
    ctx.moveTo(x0 + maxWidth - marginXY, y0 + marginXY); // 起点
    ctx.lineTo(x0 + maxWidth, y0);

    ctx.moveTo(x0, y0);
    ctx.lineTo(x0, y0 - maxHeight);
    ctx.lineTo(x0 - marginXY, y0 - maxHeight + marginXY);
    ctx.moveTo(x0 + marginXY, y0 - maxHeight + marginXY); // 起点
    ctx.lineTo(x0, y0 - maxHeight);    // 绘制
    ctx.strokeStyle = 'blue';
    ctx.stroke();
    // 4.绘制折线
    // 4.1 数据
    var data = [20, 40, 30, 60, 30, 80, 20];
    // 4.2 设置缩放比例
    var w = maxWidth / data.length,
        h = maxHeight / 100; // 1: 100

    // 4.3 生成坐标点
    var pointArr = [];
    for(var i=0; i<data.length; i++){
        pointArr.push({
            x: x0 + (i+1)  w,
            y: y0 - data[i]  h
        });
    }    console.log(pointArr);
    // 4.4 绘制
    ctx.beginPath();
    ctx.moveTo(x0, y0);
    for(var i=0; i<pointArr.length; i++){
        ctx.lineTo(pointArr[i].x, pointArr[i].y);
    }
    ctx.strokeStyle = 'orange';
    ctx.stroke();
</script>

如图:
canvas绘制表格

评论专区