canvas 绘图

canvas

<canvas id="drawing" width="200" height="200">xxx</canvas>
<script>
    var drawing = document.getElementById('drawing')
    
    //传入 2d 就可以获得 2D 上下文
    drawing.getContent('2d')
    
    //保存图片，添加到页面中
    var imgURL = drawing.toDataURL('image/png')
    var img = document.createElement('img')
    img.src = imgURL
    document.body.appendChild(img)
    
    //矩形填充
    context.fillStyle = '#0000ff'
    context.fillRect(10,10,50,50)
    
    //矩形描边
    context.strokeStyle = 'red';
    context.strokeRect(10,60,50,50)
    
    //清除矩形
    context.clearRect(20,20,10,10)
    
    //保存和调用上下文
    ctx.fillStyle='#ff0000'
    ctx.save()

    ctx.fillStyle='#00ff00'
    ctx.translate(100,100)
    ctx.save()

    ctx.fillStyle='#000000'
    ctx.translate(200,200)
    ctx.save()

    ctx.fillStyle='#0000ff'
    ctx.fillRect(0,0,100,200)

    ctx.restore()
    ctx.fillRect(10,10,100,200)

    ctx.restore()
    ctx.fillRect(0,0,100,200)

    ctx.restore()
    ctx.fillRect(20,20,100,200)
    
</script>

canvas必须先设置width和height

1. getContext("2d")传入 2d 就可以获得 2D 上下文
2. toDataURL('image/png')可以把canvas画的图片保存下来，默认格式为png，也可设置为jpeg
3. fillRect(x,y,width,height)填充矩形，fillStyle填充颜色
4. strokeRect(x,y,width,height)描边矩形，strokeStyle描边颜色
5. lineWidth设置线条宽度
6. lineCap设置线条末尾的形状，取值：butt平头，round圆头，square方头
7. lineJoin设置线条相交方式，取值：round圆交，bevel斜交，miter斜接
8. clearRect(x,y,width.height)清除矩形
9. translate(x,y)变换原点坐标，将原点坐标移动到(x,y)
10. rotate()围绕原点旋转
11. save()保存上下，只保存上下文的设置和变换，不会保存上下文的内容
12. restore()调用上下文，调用从最近一个save()开始调用，逐级往上。
13. drawImage(绘制的图像,源图像x,源图像y,源图像width,源图像height,目标图像x,目标图像y,目标图像width,目标图像height)
14. globalAlpha设置全局透明度