圆心位置在最有

// context.arc(x, y, radius, startAngle, endAngle, anticlockwise);

状态设置 和 绘制，现有状态，在去绘制

• moveTo，把一直笔放到了 这个位置

• lineTo 滑到那个位置

• 原点的位置 是左上角 向左-> 向下  

      // canvas绘制是基于状态进行绘制的；

      //1. 定义路径context.moveTo(0,0)context.lineTo(200, 200)

      //2. 定义多个路径，使用context.beginPath() context.closePath()分割

      //3. 使用context.lineWidth context.strokeStyle context.fillStyle 设置线段的宽度，线段颜色，填充颜色

      //4. 使用 contxt.stroke()绘制线段；使用context.fill()填充颜色

哈哈，画了一个没什么用的圆

window.onload = function () {
    const canvas = document.getElementById("canvas")
    const context = canvas.getContext('2d')
    context.lineWidth = 6
    const count = 100
    let p =0
    let n =0.12 * Math.PI

    for (let i = 0; i <= count; i++) {
        const r = Math.floor(Math.random() * 255)
        const g = Math.floor(Math.random() * 255)
        const b = Math.floor(Math.random() * 255)
        const c = `#${r.toString(16)}${g.toString(16)}${b.toString(16)}000`

        context.beginPath()
        context.arc(330, 300, 200, p , n,)
        context.strokeStyle = c.slice(0, 7)
        p =  n
        n =2 * Math.PI*(i+1)/count
        context.stroke()
    }
}

11111111111111111111111111111

111111111111

2222222222222222222222

2222222222222222222222

创建canvas笔记 ：

111111111111111111

动画 

更加精确的动画 

总结-Context

Render a digit原理图

接上次……

canvas html base

数字显示原理

arc多例效果

arc代码2

arc代码例子

Draw an arc

Draw an arc

Draw复习

绘制两个图形的代码

绘制三角形

Canvas基本代码

context.arc(

centerx,centery,radius,

startingAngle,endingAngle,

anticlockwise=false//顺时针，true为逆时针

)

context.moveTo(100,100)

context.lineTo(700,700)

//绘制颜色

context.strokeStyle="red"

//填充颜色

context.fillStyle="red"

context.fill()

context.stroke()

//开始绘制

context.beginPath()

//结束绘制

context.closePath()