这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 javascript+html5 的 Canvas 实现 Lab 单车动画效果, 涉及 javascript 使用 Canvas 配合数学运算实现自行车动画效果, 需要的朋友可以参考下
本文实例讲述了 javascript+HTML5 的 Canvas 实现 Lab 单车动画效果。分享给大家供大家参考。具体如下:
这里运用 HTML5 实现的单车动画,运行一下效果你就明白了,不过不要在 IE8 下测试,没效果的。请在支持最新 HTML3 和 CSS3 的浏览器下测试,祝您好运。
运行效果截图如下:
具体代码如下:
- <html>
- <head>
- <title>
- Canvas Lab单车动画,HTML5动画
- </title>
- </head>
- <script type="text/javascript">
- var framecounter = 800; //为了完成作业,无耻了点,在这里设置变量……
- var direction = "left";
- function drawBikeBody() {
- var canvas = document.getElementById('diagonal');
- var context = canvas.getContext('2d');
- context.lineWidth = 3;
- context.beginPath();
- context.moveTo(0, 0);
- context.lineTo(150, 0);
- context.lineTo(100, 100);
- context.closePath();
- context.moveTo(100, 100);
- context.lineTo(200, 75); //后轮轴承点
- context.lineTo(150, 0);
- //下面那个一个脚踏
- context.moveTo(100, 100);
- context.lineTo(110, 120);
- context.lineTo(120, 120);
- context.moveTo(110, 120);
- context.lineTo(100, 120);
- //另一个脚踏
- context.moveTo(100, 100);
- context.lineTo(90, 80);
- context.lineTo(100, 80);
- context.moveTo(90, 80);
- context.lineTo(80, 80);
- //座包
- context.moveTo(150, 0);
- context.lineTo(160, -20);
- context.lineTo(175, -20);
- context.moveTo(160, -20);
- context.lineTo(135, -20);
- //扶手
- context.moveTo(0, 0);
- context.lineTo(15, -30);
- context.lineTo(10, -35);
- context.lineTo(20, -40);
- context.lineTo(40, -40);
- //前轮轴承
- context.moveTo(0, 0);
- context.lineTo( - 35.5, 75); //前轮轴承点
- //前轮
- context.moveTo(75 - 35.5, 75); //去掉这个目测不行啊,貌似context.arc()方法里有lineTo
- context.arc( - 35.5, 75, 75, 0, Math.PI * 2, true);
- //后轮
- context.moveTo(200 + 75, 75);
- context.arc(200, 75, 75, 0, Math.PI * 2, true);
- }
- function drawForcePiece1() {
- var canvas = document.getElementById('diagonal');
- var context = canvas.getContext('2d');
- context.beginPath();
- for (var i = framecounter; i < framecounter + 360; i += 20) {
- context.moveTo( - 35.5, 75);
- x = Math.cos(Math.PI / 180 * i) * 75 + ( - 35.5);
- y = Math.sin(Math.PI / 180 * i) * 75 + 75;
- context.lineTo(x, y);
- }
- }
- function drawForcePiece2() {
- var canvas = document.getElementById('diagonal');
- var context = canvas.getContext('2d');
- context.beginPath();
- for (var i = framecounter; i < framecounter + 360; i += 20) {
- context.moveTo(200, 75);
- x = Math.cos(Math.PI / 180 * i) * 75 + 200;
- y = Math.sin(Math.PI / 180 * i) * 75 + 75;
- context.lineTo(x, y);
- }
- }
- function drawBike() {
- var canvas = document.getElementById('diagonal');
- var context = canvas.getContext('2d');
- context.clearRect(0, 0, 800, 600);
- context.save();
- context.translate(framecounter, 300);
- drawBikeBody();
- context.stroke();
- context.restore();
- context.save();
- context.translate(framecounter, 300);
- drawForcePiece1();
- context.stroke();
- context.restore();
- context.save();
- context.translate(framecounter, 300);
- drawForcePiece2();
- context.stroke();
- context.restore();
- if (direction === "left") {
- framecounter--;
- } else {
- framecounter++;
- }
- }
- function move() {
- var interal = setInterval(function() {
- drawBike();
- },
- 10);
- }
- window.addEventListener("load", move, true);
- </script>
- <body>
- <canvas id="diagonal" width="800" height="600" style="border:1px dashed">
- Please update your brower to the newest version!
- </canvas>
- <br>
- <button id="reset" onclick="framecounter=800;">
- Reset
- </button>
- <button id="left" onclick="direction='left'">
- Go Left
- </button>
- <button id="right" onclick="direction='ture'">
- Go Right
- </button>
- </body>
- </html>
希望本文所述对大家的 javascript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0419/270055.html