zoukankan      html  css  js  c++  java
  • CANVAS笔记

    bglayer.add(bgimage) /*后面的层会覆盖前面的,所以要放在上面的,就要后面才添加!*/

    bglayer.add(this.shape1)

    Layer.destroy()

    layer.add(bar) 这种添加方式只能用于当bar是konva创建的对象时

    构造函数首字母大写

    Konva获取值要加括号,如item.angle()

    data.forEach(function(item,index){

    group.find(".rect")

    Konva支持许多jquery的方法和事件!

    • ØtoDataURL() 把canvas绘制的内容输出成base64内容。
    • Ø语法:canvas.toDataURL(type, encoderOptions);

    n type:   设置输出的类型,比如 image/png   image/jpeg等

    nencoderOptions: 0-1之间的数字,用于标识输出图片的质量,1表示无损压缩,类型为: image/jpeg 或者image/webp才起作用。

    如果以后做canvas游戏方向开发深入学习可以扩展内以下容

    • ØsetTransform()  将当前转换重置为单位矩阵。然后运行 transform()
    • Øtransform() 替换绘图的当前转换矩阵
    • ØglobalCompositeOperation   设置或返回新图像如何绘制到已有的图像上
    • Ø像素操作

    tween和to方法的区别: tween是构造函数创建对象来调用,to是通过object.to()来调用

    var tween = new Konva.Tween({})

    rect.to({

    x: 1300,

    duration: 2

    })

    to方法是属于Rect对象的而非原型的。

    png是背景透明,jpeg背景不透明,gif可以是动态的

     var img = new Image();//这个就是 img标签的dom对象

    Cpu gpu

    • Ø不要用CSS控制canvas的宽和高,会让图片拉伸,
    • Ø重新设置canvas标签的宽高属性会让画布擦除所有的内容。
    • Ø可以给canvas画布通过style属性设置其它属性(背景色, 边框。。。。)
    • Øwidth和hegiht:默认300*150像素
    canvas坐标系,从最左上角0,0开始。x向右增大, y向下增大
    * 开始路径:ctx.beginPath();
    * 闭合路径:ctx.closePath();
    * 解释:如果复杂路径绘制,必须使用路径开始和结束。闭合路径会自动把最后的线头和开始的线头连在一起。
    * beginPath: 核心的作用是将 不同绘制的形状进行隔离,
      每次执行此方法,表示重新绘制一个路径,跟之前的绘制的墨迹可以进行分开样式设置和管理。

    弧度和角度的转换公式: rad = deg*Math.PI/180;

     设置描边的宽度

            ctx.lineWidth = 4;

  • 相关阅读:
    76. 最小覆盖子串 (JAVA)
    95. 不同的二叉搜索树 II (Java)
    HTTP/HTTPS协议 & GraphQL(非RESTFUL方式)
    Round Robin
    94. Binary Tree Inorder Traversal (Java)
    90. Subsets II (Java)
    Notepad++ 连接 FTP 实现编辑 Linux文件
    Git
    根据进程ID查找运行程序目录
    Flink 的广播变量
  • 原文地址:https://www.cnblogs.com/ycxqdkf/p/10374969.html
Copyright © 2011-2022 走看看