canvas的基本使用

绘制三角形

<script>
    let canvas = document.querySelector('canvas')
    // 获取画布的笔[上下文]
   let ctx = canvas.getContext('2d')
    // 绘制线段:起点
    ctx.moveTo(100,100)
    // 其他点
    ctx.lineTo(100,300)
    ctx.lineTo(200,300)
    ctx.lineWidth=10
    ctx.strokeStyle='purple'
    // 设置图形填充的颜色
    ctx.fillStyle='gold'
    ctx.fill()
    // 设置起点与最终的结束点连接在一起
    ctx.closePath()
    // stroke方法绘制线段
    ctx.stroke()
</script>

绘制矩形

<script>
    let canvas = document.querySelector('canvas')
    let ctx  = canvas.getContext('2d')
    // 绘制矩形
    ctx.strokeRect(50,50,200,200)
    // 绘制填充矩形
    ctx.fillStyle='gold'
    ctx.fillRect(250,50,100,100)
</script>

绘制圆形

<script>
    let canvas = document.querySelector('canvas')
    let ctx = canvas.getContext('2d')
    // 绘制圆形
    ctx.beginPath()
    // x,y,R,起始弧度，结束弧度，是否逆时针绘制
    ctx.arc(100,100,50,0,2*Math.PI,true)
    ctx.fillStyle='gold'
    ctx.fill()
    ctx.stroke()
    //绘制弧形
    ctx.beginPath()
    ctx.arc(200,200,50,0,1,true)
    ctx.fillStyle='gold'
    ctx.fill()
    ctx.stroke()
</script>

绘制文字以及清除

<script>
    let canvas = document.querySelector('canvas')
    let ctx = canvas.getContext('2d')
    ctx.fillRect(100,200,100,200)
    // ctx.clearRect(0,0,600,400)   全部清除
    // 清除画布
    ctx.clearRect(100,200,50,100)
    // 设置字体大小
    ctx.font = '20px 微软雅黑'
    ctx.fillStyle='gold'
    // 绘制文字
    ctx.fillText('大数据时代',100,50)
</script>