04 canvas绘制表格

作者: 夜幕小草 | 来源:发表于2016-12-07 23:15 被阅读611次

2017-04-25 canvas 学习笔记
04 canvas绘制表格
android自定义view绘制表格
浅析HTML5的Canvas——案例绘制
四、Android绘制知识总结(画布篇)
canvas
小程序canvas绘制表格
HTML5 Canvas笔记——Canvas绘制矩形（外角矩形和
Canvas绘制文字、设置阴影、创建路径绘制矩形和圆
Android中canvas基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas绘制表格</title>
</head>
<body style="padding: 100px;">
  <canvas id="canvas" width="900" height="600" style="border:1px solid #000"></canvas>

<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, i*marginXY);
        // 终点
        ctx.lineTo(canvas.width, i*marginXY);
    }

    // 2.3 绘制竖线
    for (var i=1; i<cols; i++){
         // 起点
         ctx.moveTo(i*marginXY, 0);
         // 终点
         ctx.lineTo(i*marginXY, 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>
</body>
</html>