Canvas框架之Konva自带的js函数常用函数和属性

  前面几乎所有的图形我们都已经学会怎么实现了，那么我们现在来学习一些他自带的方法函数吧，大家一定很激动吧，但是在学习这个之前，大家必须要有JavaScript或者Jquery的基础哦！ 如果没有要先点击链接学习一下哦！

那么我们一起来学习进阶吧！

1.fill() -填充

作用：设置对应形状的填充色，参数是一个代表颜色的字符串。

代码为：

var stage = new Konva.Stage({

container: 'content', // id of content <div>

width: 500,

height: 500

});

var layer = new Konva.Layer();

var rect = new Konva.Rect({

width:300,

height:400,

fill:'red'

});

layer.add(rect);

stage.add(layer);

layer.draw();

//鼠标经过后，实现填充颜色，重新绘制画布

rect.on('mouseover',function(){

this.fill('green');

layer.draw();

})

注意：

1. 一定要重新绘制图形哦！否则不会有效果的。

2.stroke（）-边框

作用：设置边框,参数为边框的颜色，类型为字符串。

延伸函数strokeWidth()可以设置边框粗度，参数类型为数字。

rect.on('mouseout', function() {

this.stroke('black'); //设置边框颜色，参数要用引号引起来

this.strokeWidth(4); //设置边框粗细，参数为数字代表粗细

layer.draw();

});

注意：

1. stroke()的参数应该是要用引号包裹哦！
2. 边框还可以单独设置宽度，用strokeWidth设置哦

3.opacity（）-透明度

作用：设置图形的透明度，参数值在0-1之间，类型为数字。

rect.on('mouseout', function() {

this.opacity(0.5);   //透明度的值在0-1之间哦

layer.draw();  

});

4.shadow（）-阴影

作用：设置图形的阴影

有多个可以设置阴影的其他函数，已经在下面的示例代码中给出注释，注意参数的类型哦！

rect.on('mouseout', function() {

this.shadowOpacity(0.5); //设置阴影的模糊程度

this.shadowColor('black'); //设置阴影的颜色

this.shadowBlur(10); //设置阴影的边缘线的长度

this.shadowOffset({ x: 10, y: 10 }); //设置阴影的偏移

layer.draw();

});

注意：

1. 阴影的偏移应该是一个对象！
2. 阴影的模糊程度和opacity()这个属性是不一样的哦，要注意区分！

5.lineJoin()-线型

作用：设置边角之间的线型应该是怎样的。

var triangle = new Konva.RegularPolygon({

x: stage.width() / 2,

y: stage.height() / 2,

sides: 3,

radius: 70,

fill: 'red',

stroke: 'black',

strokeWidth: 20,

lineJoin: 'bevel'

});

layer.add(triangle);

stage.add(layer);

layer.draw();

triangle.on('mouseout', function() {

this.lineJoin('round');

layer.draw();

});

注意：

1.线型一共有三种类型，分别为bevel为斜角， round为圆角， miter为斜接角哦！

6.显示与隐藏

作用:设置元素显示-show()

  设置元素隐藏-hide()

var rect = new Konva.Rect({

width:300,

height:400,

fill:'red',

stroke:20,

visible:false    //设置可见性为假，就是不可见

});

document.getElementById("hide").addEventListener('click',function(){

rect.show();

layer.draw();

})

注意：

1. 要先隐藏该元素才能实现显示哦！visible属性就是设置元素是否要显示的，值为false代表隐藏，true代表显示。
2. hide()代表隐藏元素，show()代表显示元素。

7.鼠标形状

rect.on('mouseenter', function() {

stage.container().style.cursor = 'crosshair';

});

layer.add(rect);

stage.add(layer);

注意：

1. 鼠标形状的代码应该是固定的哦！

 stage.container().style.cursor = 'crosshair'

鼠标形状的参数，具体代表的意思和a标签对应的值的类型是一样的哦

1. 记得一定要在添加图形之前修改鼠标形状，否则不会生效哦!
2. 改变鼠标形状其实是一个属性哦！

好啦，今天的内容就到此结束啦！这些通过js修改的常用的函数大家都学会了吗？我们下一次的课程会将动画函数详细的讲解给大家哦，那我们下次不见不散哦！