HTML5画布canvas实战(1)--折线图

画布基本教程

画布基础知识和绘制
Canvas MDN

唠唠叨叨

canvas 是 HTML5 新增的元素，可用于通过使用JavaScript中的脚本来绘制图形。例如，它可以用于绘制图形，制作照片，创建动画，甚至可以进行实时视频处理或渲染。

HTML结构

    <style>
        canvas {
    
            border: 1px solid #000;
        }
    </style>
<canvas width="600" height="600"></canvas>

绘制网格线

绘制个普通网格线即可（想展示强大的画工也可以绘制个蜘蛛网出来）

    // 获取画布，渲染上下文，绘制工具箱
    let myCan = document.querySelector('canvas')
    let cxt = myCan.getContext('2d')
    // 设置网格的大小
    let gridSize = 10
    // 获取画布的宽高
    let w = cxt.canvas.width
    let h = cxt.canvas.height
    // 计算出每一行能放多少网格线
    let lineTotalX = Math.floor(w / gridSize)
    let lineTotalY = Math.floor(h / gridSize)
    // 先将X轴的线画出来(记得要去掉1px的不饱和填充)
    for (var i = 0; i < lineTotalX;i++){
   
        cxt.moveTo(i*gridSize - 0.5,0)
        cxt.lineTo(i*gridSize - 0.5,h)
        cxt.strokeStyle = '#eee'
        cxt.stroke()
    }
    for (var i = 0; i < lineTotalY;i++){
   
        cxt.moveTo(0,i*gridSize - 0.5)
        cxt.lineTo(w,i*gridSize - 0.5)
        cxt.strokeStyle = '#eee'
        cxt.stroke()
    }

绘制坐标

新建一个html文件，重新绘制

    let myCan = document.querySelector('canvas')
    let cxt = myCan.getContext('2d')
    // 获取画布的宽高
    let w = cxt.canvas.width
    let h = cxt.canvas.height
    // 设置坐标系原点的空间
    let space = 20
    // 初始化三角形的长度（高）
    let arrowSize = 10
    // 设置原点坐标x,y
    let x = space
    let y = h - space
    // 绘制X轴
    cxt.beginPath()
    cxt.moveTo(x,y)
    cxt.lineTo(w - space,y)
    // 绘制三角形
    cxt.lineTo(w - space - arrowSize,y + arrowSize/2)
    cxt.lineTo(w - space - arrowSize,y - arrowSize/2)
    cxt.lineTo(w - space,y)
    cxt.fill()
    cxt.stroke()
    // 绘制y轴
    cxt.beginPath()
    cxt.moveTo(x,y)
    cxt.lineTo(x,space)
    // 绘制三角形
    cxt.lineTo(x-arrowSize/2,space+arrowSize)
    cxt.lineTo(x+arrowSize/2,space+arrowSize)
    cxt.lineTo(x,space)
    cxt.fill()
    cxt.stroke()

绘制点

    var myCan = document.querySelector('canvas')
    var cxt = myCan.getContext('2d')
    let coordinate = {
   
        x:100,
        y:100
    }
    // 绘制一个大小为10的正方形
    let dottedSize = 10
    cxt.beginPath()
    cxt.moveTo(coordinate.x - dottedSize/2,coordinate.y - dottedSize/2)
    cxt.