canvas初步介绍

canvas初步介绍

• ctx.strokeRect( ) 绘制矩形（不填色），默认黑色

• 语法：ctx.strokeRect(x,y.width,height)

• 使用strokeStyle属性设置笔触颜色

• ctx.moveTo（x,y）将笔移到画的起点位置

• ctx.lineTo(200,100);默认1px

• ctx.lineWidth=数字；一般为双数

• ctx.ctrikeStyle=‘颜色’；

  • 颜色的表示可以是各种进制和汉字

• 开启一条新的线，

  • ctx.beginPath();
  • 开启新的线，依旧会继承上面设置过的样式，但是再次单独设置后，只会影响这条线之后的内容

• 闭合图形

  • 手动闭合

  • 自动闭合

    • ctx.closePath();
    • 会自动将把闭合的角补齐

  • 进行填充

    • ctx.fill()

  • 描边和填充可以同时使用

  • 补充描边规则

    • ctx.strokeStyle=“red”

  • 填充颜色

  • ctx.fillStyle="“skyblue”

• 非零填充规则

  • 在任何一个你想填充内容的位置，拉一条线到最外面（假装）；在拉的这条线上，每一个路径进行一次计算，顺时针的线+1，逆时针的线-1；
  • 最终得到的数字如果不是0，则填充
  • 如果是0，则不填充

• ctx.lineCap 设置线两端的样式

• 语法：ctx.lineCap=“值”

• 设置线两端多出来的小帽子