canvas标签的方法(上)

画图环境

  • 通过 getContext方法获取绘图环境(绘图上下文)(对象)
    绘制图形通过该对象提供的方法/属性

方法

  • getContext() 参数2d/webgl

基本绘图

  • 路径

moveTo(x,y) 起始位置
lineTo(x,y) 直线
如果没有moveTo()第一个lineTo()替代moveTo()

  • 路径的开始和关闭

beginPath() 开启路径
closePath() 关闭路径

  • 描边

stroke() 方法
srtokeStyle 设置描边颜色
lineWidth 设值描边的粗细

  • 填充

fill() 填充
fillStyle 设置填充颜色

  • 快速矩形工具

rect(x,y,width,height) 绘制矩路径
strokeRect (x,y,width,height) 描边矩形
fillRect(x,y,width,height) 填充矩形
clearRect(x,y,width,height) 清除矩形

  • 圆形(圆弧)

arc(x,y,r,start, end, wise) 绘制圆弧
start/end是起始位置 单位是弧度 , 360角度 = 2PI, 180角度 = PI
最后一个参数 顺时针(false)/逆时针(true) 默认false

你可能感兴趣的:(canvas标签的方法(上))