04 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>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容