canvas图形

97 阅读1分钟
<canvas id="can" width="1200px" height="600px"></canvas>
let can = document.getElementById('can')
    let c = can.getContext('2d')

    c.strokeStyle = '#FF0000';
    c.lineWidth = '5'
    c.moveTo(10, 10)
    c.lineTo(100, 10)

    c.moveTo(20, 30)
    c.lineTo(90, 30)

    c.moveTo(10, 50)
    c.lineTo(100, 50)

    c.moveTo(55, 10)
    c.lineTo(55, 50)
    c.stroke()

    c.beginPath()
    c.moveTo(70, 70)
    c.lineTo(200, 300)
    c.lineTo(350, 70)
    c.lineTo(70, 70)
    c.strokeStyle='yellow'
    c.fillStyle = 'blue'
    c.lineWidth = '5'
    c.fill()
    c.closePath()
    c.stroke()


c.rect(300,300,300,150)
c.fillStyle='yellow'
c.fillRect(300,300,300,150)


c.strokeStyle='pink'
c.lineWidth='5'
c.strokeRect(300,300,300,150)

c.clearRect(350,320,100,100)
c.stroke()

 c.beginPath()
    c.arc(150,150,100,0,Math.PI*3/2,true)
    c.fillStyle='red'
    c.fill()
    c.closePath()