Konva入门

第三方的canvas库

Konva

Konva特点

面向对象方式

  • 一切皆对象
  • 如何定义对象 ①Object构造函数 ②直接量 {} ③自定义构造函数 再new
  • 构造函数 new一个构造函数就可以得到对象(实例)
  • this
  • 原型 prototype / 原型链

konva概念

  • 舞台 stage
  • 层 layer
  • 组 group
  • 图形/

基本操作

  • 创建舞台

      new Konva.Stage({
          width:
          height:
    

    })

  • 创建层
    new Konval.Layer({})
    stage.add(layer)

  • 图形或组添加到 层

  • 图形添加到组

  • 绘制 layer.draw()

基本图形

  • Konva.Rect() 矩形
  • Konva.Circle() 圆形
  • Konva.Ellipse() 椭圆
  • Konva.Text() 文字
  • Konva.Image() 图片
  • Konva.Line() 划线
  • Konva.star() 星星
  • ....

事件

类似于jquery

动画

  • tween对象 指定动画持续时间 指定变化的样式 tween.play()
  • 简写 图形.to()
  • Animation对象

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 157,585评论 24 688
  • 一:canvas简介 1.1什么是canvas? ①:canvas是HTML5提供的一种新标签 ②:HTML5 ...
    GreenHand1阅读 3,799评论 2 29
  • 第三方的canvas库 konvaJS https://konvajs.github.io/ 通用 echar...
    细雨衔雪阅读 2,036评论 1 2
  • 一、canvas简介 1.1 什么是canvas?(了解) 是HTML5提供的一种新标签 Canvas是一个矩形区...
    Looog阅读 2,863评论 3 40
  • 7月15日。五月天人生无限公司世界巡回演唱会——贵阳站。 我一个人背着背包,拿着最便宜的站台票,兴冲冲的去了。 在...
    Time羽朦阅读 154评论 7 4