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;