锐客网

  1. 首页 > it技术 > >

canvas简单入门(1)

Canvas 画布 canvas用途

  • 游戏 小游戏
  • 图表 报表 如 Charts插件
  • 炫酷效果 banner
  • 模拟器、图形编辑器 等
兼容性 【canvas简单入门(1)】IE9以上和其他浏览器
canvas 标签 属性
  • width
  • height
方法
  • getContext() 参数 2d/webgl
注意 css设置的宽高跟width/height设置的宽高 不同
Context环境 通过 getContext方法获取绘图环境（绘图上下文）（对象）
绘制图形通过该对象提供的方法/属性
基本绘图 路径
  • moveTo() 起始位置
  • lineTo() 直线 ，如果没有moveTo() 第一个lineTo()替代 moveTo()
路径的开始和关闭
  • beginPath() 开启路径
  • closePath() 关闭路径 结束当前的路径，自动闭合
  • 注意： 复杂的图形，一定要开启和关闭路径
描边 stroke()
  • stroke() 方法
  • strokeStyle 设置描边颜色
  • lineWidth 设置描边的粗细
填充
  • fill() 填充
  • fillStyle 设置填充颜色
快速矩形工具
  • rect(x, y, width, height) 绘制矩形路径
  • strokeRect(x, y, width, height) 描边矩形
  • fillRect(x,y,width,height) 填充矩形
  • clearRect(x,y,w,h) 清除矩形 （矩形范围内的内容会被擦除）
圆形(圆弧)
  • arc(x,y,r,start, end, wise) 绘制圆弧
  • start/end是起始位置 单位是 弧度 ， 360角度 = 2PI， 180角度 = PI
  • 最后一个参数 顺时针(false)/逆时针(true) 默认false

    推荐阅读


    上一篇：类添加属性的方法

    下一篇：每个宝宝都是学语言的天才，这件事做得越早，宝宝未来英语学得越扎实