html5 canvas 与小丑。

介绍

  以前开发动画应用你可能需要学习很复杂的动画制作框架。自从HTML5画布(Canvas)功能面世后,Web动画就一下子从云端跌落到了地面——任何一个Web程序员都可以轻易的用画布(Canvas)技术+JavaScript来开发出各种动画效果。

  而文下面的教程中将使用的是另外一个叫做kinetic的Web动画工具包。它们都是开源的。

  我们需要了解Canvas中的几个API,然后使用需要的动画参数,就能制作出这个有趣又能响应你的动作的Web动画。把鼠标放到上面的小丑脸上,然后移开,看看会发生效果。

基本结构

KineticJS首先是要绑定到HTML页面上的一个DOM容器元素上,比如最常用的< div >标签。浏览器最终显示的就是这些用户层的叠加效果。

0.jpg

绘制界面

现在我们开始用Kinetic制作我们的画面。

Kinetic绘图的基本的流程可以如下图所示:

0.1.png

首先是创建一个HTML5页面,在里添加对Kinetic库的引用:

<script type="text/javascript" src="kinetic-v5.1.0.min.js"></script>

在中添加一个用于绑定到Kinetic用于创建舞台的容器,比如说可以是个 < div >:

<div id="“container”"></div>

在页面加载时进行绘图

window.onload = function() {
    // 定义全局变量
    var sw = 578;
    var sh = 400;

    //创建Kinetic舞台,绑定我们添加的<div>容器
    var stage = new Kinetic.Stage({

        container : “container”, //<div>的id

        width : 578, //创建的舞台宽度

        height : 400 //创建的舞台高度
    });

    //创建Kinetic用户层
    var layer = new Kinetic.Layer();
}
</div></div>

绘制左眼、右眼

首先我们需要先创建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);

1.png

绘制鼻子和嘴巴

绘制鼻子和嘴巴

var nose = new Kinetic.Line({
    points: [240, 280, sw/2, 300, sw-240,280],
    tension: 0.5,
    closed: true,
    stroke: 'white',
    strokeWidth: 10
});

var mouth = new Kinetic.Line({
    points: [150, 340, sw/2, 380, sw - 150, 340, sw/2, sh],
    tension: 0.5,
    closed: true,
    stroke: 'red',
    strokeWidth: 10
});

2.png

左右眼动画

让小丑的左右眼能够动起来,需要监听事件,用到两事件指针位于元素上方时(mouseover),鼠标从元素上移开时(mouseout),执行动画操作。

var leftEyeTween = new Kinetic.Tween({
    node: leftEye,
    duration: 1,
    easing: Kinetic.Easings.ElasticEaseOut,
    y: -100,
    points: [0, 200, 50, 150, 100, 200, 50, 200]
});


var rightEyeTween = new Kinetic.Tween({
    node: rightEye,
    duration: 1,
    easing: Kinetic.Easings.ElasticEaseOut,
    y: -100,
    points: [0, 200, 50, 150, 100, 200, 50, 200]
});

3.png

鼻子和嘴巴动画

var noseTween = new Kinetic.Tween({
    node: nose,
    duration: 1,
      easing: Kinetic.Easings.ElasticEaseOut,
    y: -100,
    points: [220, 280, sw/2, 200, sw-220,280]
}); 


var mouthTween = new Kinetic.Tween({
    node: mouth,
    duration: 1,
    easing: Kinetic.Easings.ElasticEaseOut,
    points: [100, 250, sw/2, 250, sw - 100, 250, sw/2, sh-20]

4.png

更多内容如时钟效果、 图像缩放和裁剪、Canvas简单实用的图表 - Chart.js 

请参见: http://hubwiz.com/course/55adf42f3ad79a1b05dcbff0/

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
辽B代驾管理系统对代驾订单管理、用户咨询管理、代驾订单评价管理、代驾订单投诉管理、字典管理、论坛管理、公告管理、新闻信息管理、司机管理、用户管理、管理员管理等进行集中化处理。经过前面自己查阅的网络知识,加上自己在学校课堂上学习的知识,决定开发系统选择小程序模式这种高效率的模式完成系统功能开发。这种模式让操作员基于浏览器的方式进行网站访问,采用的主流的Java语言这种面向对象的语言进行辽B代驾管理系统程序的开发,在数据库的选择上面,选择功能强大的Mysql数据库进行数据的存放操作。辽B代驾管理系统的开发让用户查看代驾订单信息变得容易,让管理员高效管理代驾订单信息。 辽B代驾管理系统具有管理员角色,用户角色,这几个操作权限。 辽B代驾管理系统针对管理员设置的功能有:添加并管理各种类型信息,管理用户账户信息,管理代驾订单信息,管理公告信息等内容。 辽B代驾管理系统针对用户设置的功能有:查看并修改个人信息,查看代驾订单信息,查看公告信息等内容。 辽B代驾管理系统针对管理员设置的功能有:添加并管理各种类型信息,管理用户账户信息,管理代驾订单信息,管理公告信息等内容。 辽B代驾管理系统针对用户设置的功能有:查看并修改个人信息,查看代驾订单信息,查看公告信息等内容。 系统登录功能是程序必不可少的功能,在登录页面必填的数据有两项,一项就是账号,另一项数据就是密码,当管理员正确填并提交这二者数据之后,管理员就可以进入系统后台功能操作区。项目管理页面提供的功能操作有:查看代驾订单,删除代驾订单操作,新增代驾订单操作,修改代驾订单操作。公告信息管理页面提供的功能操作有:新增公告,修改公告,删除公告操作。公告类型管理页面显示所有公告类型,在此页面既可以让管理员添加新的公告信息类型,也能对已有的公告类型信息执行编辑更新,失效的公告类型信息也能让管理员快速删除。新闻管理页面,此页面提供给管理员的功能有:新增新闻,修改新闻,删除新闻。新闻类型管理页面,此页面提供给管理员的功能有:新增新闻类型,修改新闻类型,删除新闻类型。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值