记录canvas学习2

1.矩形绘制

1.1绘制方法

fillRect(x,y,width,height) 绘制实心矩形
strokeRect(x,y,width,height) 绘制描边矩形
rect(x,y,width,height) 创建矩形路径，再使用fill(),stroke()绘制

    let canvas=document.getElementById('test')
    let context=canvas.getContext('2d')
    context.fillRect(10,10,50,50)
    context.strokeRect(70,10,50,50)
    context.rect(30,30,80,60)
    context.stroke()

image.png

使用矩形路径绘制矩形时，画笔位置在设置的矩形原点位置，而直接生成的实心矩形和描边矩形没有初始画笔位置。

    context.strokeStyle='#00f'
    context.rect(30,30,80,60)
    context.lineTo(390,390)
    context.stroke()

image.png

1.2设置样式

fillStyle() 设置实心矩形样式
strokeStyle() 设置描边矩形的样式

    let canvas=document.getElementById('test')
    let context=canvas.getContext('2d')
    context.fillStyle='#f00'
    context.fillRect(10,10,50,50)
    context.beginPath()
    context.strokeStyle='#0f0'
    context.strokeRect(70,10,50,50)
    context.beginPath()
    context.strokeStyle='#00f'
    context.rect(30,30,80,60)
    context.stroke()

image.png

1.3矩形擦除

clearRect()参数同上，类似于橡皮擦的功能，擦除画布上的内容。

    context.clearRect(40,40,100,30)

image.png

但擦除画布内容不会影响之前设置的样式信息，画笔位置等。
可以通过重置画布大小来清除内容，样式，画笔位置等。

2.绘制多边形

绘制多边形的一半方法是画一条闭环的折线，然后使用fill(),stroke()填充描边。

    context.strokeStyle='#00f'
    context.fillStyle='#f00'
    context.moveTo(30,30)
    context.lineTo(80,120)
    context.lineTo(200,200)
    context.lineTo(150,80)
    context.lineTo(30,30)
    context.lineWidth=8
    context.closePath()//形成闭环，否则线条头和尾有间距
    context.fill()//填充
    context.stroke()//描边

image.png

3.曲线绘制

3.1圆与圆弧绘制

绘制方法arc(圆心x，圆心y，半径r，开始角度，结束角度)
注：角度使用弧度制表示，顺时针取值，负值以逆时针方向取值。

    let canvas=document.getElementById('test')
    let context=canvas.getContext('2d')
    context.strokeStyle='#00f'
    context.lineWidth=5
    context.fillStyle='#f00'
    context.arc(200,200,80,0,3/2*Math.PI)
    context.fill()
    context.stroke()

image.png

arcTo()方法，可在两个线段之间连接一条圆弧
arcTo(起点末端切线x，起点末端y，终点x，终点y，圆半径)

image.png

    context.moveTo(10,40)
    context.lineTo(40,40)
    context.arcTo(80,40,80,80,40)
    context.lineTo(80,120)
    context.stroke()

arcTo()会移动画笔的位置，arc()并不会。