记录canvas学习1

<canvas>标签定义图形，但它只是图形容器，本身并无绘图能力，需要使用js来绘制图形。
canvas标签的默认宽高为300px*150px,使用css设置宽高时，canvas只会从原先的宽高拉伸至设置的宽高，造成图像变形。
canvas宽高设置可直接写在标签内部或者使用js设置，容器类似于一个画布，超过范围的图形不会被显示。

<canvas id='test' width='400px' height='200px'></canvas>

    let canvas=document.getElementById('test')
    canvas.width=500
    canvas.height=400

image.png

使用canvas绘图之前先使用getContext()获取绘图对象。
以画直线来举例：moveTo(x,y) 起点坐标；lineTo(x,y) 终点坐标；stroke() 绘制线条。
可以理解为moveTo()将画笔移至指定坐标，lineTo()为向指定坐标画一条线，可以使用一次moveTo(),后跟若干lineTo()指令进行多次画线。

    let canvas=document.getElementById('test')
    let context=canvas.getContext('2d')
    context.moveTo(10,10)
    context.lineTo(390,390)
    context.moveTo(390,10)
    context.lineTo(10,390)
    context.stroke()

image.png

当为canvas绘制的路径添加样式时，会对之前的所有路径添加样式，但有时候希望对不同的线条添加不同的样式，这里需要使用beginPath()方法，表明之后的路径是独立的路径。

    let canvas=document.getElementById('test')
    let context=canvas.getContext('2d')
    context.moveTo(10,10)
    context.lineTo(390,390)
    context.moveTo(390,10)
    context.lineTo(10,390)
    context.strokeStyle='red'
    context.stroke()
    context.beginPath()
    context.moveTo(10,200)
    context.lineTo(390,200)
    context.strokeStyle='blue'
    context.stroke()

image.png

strokeStyle有三种赋值方式：颜色，渐变，图案