Canvas 应用 互动版

在线工具推荐: Three.js AI纹理开发包 - YOLO合成数据生成器 - GLTF/GLB在线编辑 - 3D模型格式在线转换 - 可编程3D场景编辑器

绘制左眼、右眼


首先我们需要先创建Kinetic对象,并调用Line()方法,进行绘制。

使用kinetic工具包中的方法,绘制左右眼

// 创建一个Kinetic线形对象
var leftEye = new Kinetic.Line({
    x: 150,  // x轴位置
    points: [0, 200, 50, 190, 100, 200, 50, 210],  // 位置点
    tension: 0.5,  // 线条弹性
    closed: true,
    stroke: 'white', // 线条颜色
    strokeWidth: 10  // 线条宽度
});
// 创建一个Kinetic线形对象
var rightEye = new Kinetic.Line({
    x: sw - 250,
    points: [0, 200, 50, 190, 100, 200, 50, 210],
    tension: 0.5,
    closed: true,
    stroke: 'white',
    strokeWidth: 10   
});
// 向用户层中添加上面的线形
layer.add(leftEye)
.add(rightEye);
// 将上面的用户层添加到舞台上
stage.add(layer);