canvas学习

canvas 是一块画布，可以设置宽高，默认 300 * 150

使用方式

1. 声明书写 canvas标签

2. 拿到canvas的dom

3. 调用方法 getContext (注意此方法在prototype上)

方法集合：

填充：

1. fillStyle，设置填充颜色，不设置默认为黑色

2. fillRect ， 4个参数 x y 宽高

画笔：

3. strokeStyle 设置画笔的颜色

4. strokeRect 4个参数 x y 宽高的颜色 // 绘制被填充的矩形

5. rect 4个参数 x y 宽高 // 创建矩形，没有画上

6. ctx.stroke() // 画上去

7. fill 把图形画到画布上

8. closePath() // 闭合

9. arc(300, 100, 50, 0, Math.PI * 2, false ) // 6个参数 x y 圆心坐标，半径起始角度 3.14*2 ,false为顺时针， true 逆时针

10 arcTo(150,20,150,70,50) // 起始坐标终止坐标半径

11 translate （300,300）设置基准点


 <canvas id="canvas" width="600" height="300">canvas>
  <script>
// 获取元素
let canvas = document.querySelector('#canvas')
// 创建绘画环境
 
const ctx = canvas.getContext('2d')
// console.log(ctx);
// ctx.fillStyle = "#0000ff" // 设置填充颜色
// ctx.fillRect(0, 20, 150, 100) // 绘制被填充的矩形
 
// ctx.strokeStyle = '#00ff11' // 设置画笔的颜色
// ctx.strokeRect(0, 20, 150, 100) // 绘制被填充的矩形
 
// ctx.rect(50,50,100,100) // 创建矩形，没有画上
// ctx.strokeStyle = '#00ff11' 
// ctx.stroke() // 画上去s
 
// ctx.rect(50, 50, 100, 100) // 创建一个矩形
// ctx.fillStyle = "#0000ff"
// ctx.fill() // 把矩形画到画布上
 
// 抬笔画路径
// ctx.beginPath()
// ctx.moveTo(0, 0) // 从10 移动到20 可以理解为从x y 偏移
// ctx.lineTo(100, 100) // 画直线从100 - 100 
// ctx.strokeStyle = 'blue'
// ctx.lineWidth = 5 // 设置宽度   
// ctx.stroke()
 
// ctx.beginPath()
// ctx.moveTo(200, 50) 
// ctx.lineTo(150, 150)
// ctx.closePath() // 闭合
// ctx.lineWidth = 10 // 设置宽度   
// ctx.strokeStyle = 'red'
// ctx.stroke()
 
// 画圆
// ctx.beginPath()
// ctx.strokeStyle = 'blue'
// ctx.arc(300, 100, 50, 0, Math.PI * 2, false ) // 6个参数  x y 圆心坐标，半径  起始角度 3.14*2  ,false为顺时针， true 逆时针
// ctx.stroke()
 
// 弧度
// ctx.beginPath()
// ctx.moveTo(100,100)
// // ctx.lineTo(100,100)
// ctx.strokeStyle = 'blue'
// ctx.arcTo(150,20,150,70,50) // 起始坐标 终止坐标  半径
// ctx.stroke()
//  script>