首页

关于

CanvasLoader Creator - 免费的在线工具,生成加载动画

CanvasLoader Creator - 免费的在线工具,生成加载动画

CanvasLoader是一款免费的在线工具,可以帮助你生成加载动画的脚本,它生成的是自旋转的圆圈加载动画,脚本可以用在你的HTML5项目 中。它可以进行一定的客制化,来生成你想要的加载动画,其中包括圆圈的半径,旋转速度,密度,颜色等属性。 你可以下载代码片段,也可以直接下载生成的html文件,应用在你的程序中。

CanvasLoader Creator的操作

它的操作非常简单,只需要在链接中,调整你需要的参数,就可以生成你想要的加载动画样式了。

可设置的属性包括:

  • Diameter: 半径,既圆圈的半径。
  • Density: 密度,既旋转中的竖纹图案的密度。这个属性在你放大了半径之后,可以看得非常清楚。
  • Range: 范围,既旋转时,有颜色的范围占据了整个圆圈的多少比例。
  • FPS: 每秒帧数。
  • Speed: 速度,旋转的速度。
  • Color: 圆圈的颜色。
  • Shapes: 旋转的形状。
  • Background color: 背景颜色。

在设定了属性之后,它会实时生成代码片段,你可以下载整个的html文件,也可以从页面上拷贝代码片段放在你的程序中使用。

CanvasLoader核心代码

如果你打开代码,你可以看到它使用的是加载了一个名为Heartcode…

标签: javascript, html5, canvas, 进度条效果

阅读更多

使用HTML5画布(canvas)生成阴影效果

使用HTML5画布(canvas)生成阴影效果

使用HTML5的画布特性,我们可以创建图形,在这片文章中,我们将创建图形的阴影。

  var canvas = document.getElementById('shadowcanvas');
var ctx = canvas.getContext('2d');

ctx.save();
ctx.fillStyle = '#EB852A';
ctx.shadowOffsetX = 15; // 阴影Y轴偏移
ctx.shadowOffsetY = 15; // 阴影X轴偏移
ctx.shadowBlur = 14; // 模糊尺寸
ctx.shadowColor = 'rgba(0, 0, 0, 0.5)'; // 颜色

ctx.beginPath();
ctx.arc(150, 150, 75, 0, 2 * Math.PI, false);
ctx.fill();
ctx.restore();

ctx.fillStyle = '#222222';
ctx.beginPath();
ctx.arc(350,…

标签: html5, 阴影效果, 特效, 画布效果, canvas

阅读更多

使用two.js生成的卫星环绕动画效果

使用two.js生成的卫星环绕动画效果

two.js是一个帮助你实现绘图和动画效果的类库,同时支持三种前端绘图实现:

  • webgl
  • svg
  • 2d画布

使用这个类库,可以方便的支持这三种不同的实现,你只需要设置参数:Two.Types.canvas, Two.Types.svg, or Two.Types.webgl

下面是使用two.js生成的一个动画效果:

http://www.gbtags.com/gb/debug/592abb4d-6449-4654-a824-0232c0c3b110.htm

相关JS代码如下:

    var el = document.getElementById("main"),
two = new Two({
width: '800',
height: '600'
});
two.appendTo(el);

var earthAngle = 0,
moonAngle = 0,
distance = 30,
radius = 50,
padding = 100,
orbit…

标签: 分享, canvas, SVG, webgl

阅读更多

使用HTML5的Canvas画布来剪裁用户头像

使用HTML5的Canvas画布来剪裁用户头像

本文来自极客标签社区用户webgeek的一个在线HTML5web开发小技巧,帮助你使用html5的画布功能来切割用户上传的大头照。

在线调试

例如需要剪裁的图片如下:

webgeek

用来处理大头照的JS代码如下:

var canvas = document.getElementById('myavatar');
var context = canvas.getContext('2d');
var imageObj = new Image();

imageObj.onload = function() {
// draw cropped image
var sourceX = 60;
var sourceY = 0;
var sourceWidth = 180;
var sourceHeight = 180;
var destWidth = sourceWidth;
var destHeight = sourceHeight;
var destX = canvas.width / 2 - destWidth / 2;
var…

标签: HTML5, 分享, canvas

阅读更多

基于javascript和canvas(画布)的开源HTML5应用开发框架 - iio Engine

基于javascript和canvas(画布)的开源HTML5应用开发框架 - iio Engine

随着HTML5的发展,越来越多的基于HTML5技术的网页开发框架出现,在今天的这篇文章中,我们将介绍iio Engine,它是一款开源的创建HTML5应用的web框架。

整个框架非常的轻量级,只有45kb大小,并且整合了debug系统,并且跨平台支持。

不依赖任何第三方的类库,可以支持Box2D,拥有完整的文档支持。支持快速的开发。

使用这个类库你只需要使用10多行的代码就生成一个tic-tac的游戏,代码如下:

    TicTacToe = function(io){

var grid = io.addObj(new iio.ioGrid(0,0,3,3,120)
.setStrokeStyle('white'));
var xTurn=true;
io.canvas.addEventListener('mousedown', function(event){
var c = grid.getCellAt(io.getEventPosition(event),true);

标签: 分享, HTML5, 前端框架, canvas

阅读更多

分享10个超赞的画布Canvas,SVG和CSS3相关的jQuery插件

jQuery插件开发绝对是jQuery框架最强大的一个特性。数以万计的开发人员开发了各种不同功能和特性的jQuery插件,使得jQuery框架如此的成功和流行。随着HTML5,CSS3的发展,javascript在web开发中慢慢变得更加强大,并且更加的可控。在今天的这篇文章中,我们将介绍10款帮助你构建完美UI,特效和动画的jQuery插件。希望大家能够喜欢!

Percentage loader

在我们以前的文章中我们介绍过这个canvas实现的强大进度条,它拥有性感迷人的UI界面,并且能够提供给你方便的callback方法处理进度。相信大家一定会喜欢!

分享10个超赞的画布Canvas,SVG和CSS3相关的jQuery插件

Knob

Knob是另外一个超棒的旋钮式的UI组件,能够帮助你创建音响上的按钮效果。

分享10个超赞的画布Canvas,SVG和CSS3相关的jQuery插件

Real Shadow

使用这个插件,能够帮助你实现实时的阴影效果,而且能够产生动态阴影变化和颜色。

分享10个超赞的画布Canvas,SVG和CSS3相关的jQuery插件

Photon

一个帮助你实现3D光线效果的引擎。绝对让你震撼!

分享10个超赞的画布Canvas,SVG和CSS3相关的jQuery插件

jSignature

一个帮助你创建签名的jQuery插件,允许你的用户使用鼠标,手指或者铅笔生成签名。…

标签: jQuery plugin, jQuery插件, canvas, svg, css3

阅读更多

分享一个Javascript的keyframe动画类库 - Rekapi

分享一个Javascript的keyframe动画类库 - Rekapi

在线演示  在线调试 

今天我们带给大家一个javascript的keyframe动画类库 - Rekapi,使用这个类库你可以方便的构建基于<canvas>和DOM的动画效果。

什么是keyframe?

keyframe是一个使用指定时间点来定义状态的动画技巧。动画都被渲染成frame来显示到屏幕,keyframe允许你定义关键的点来支持动画变化动作。 

主要特性

  • 基于俩个js类库UnderscoreShifty 
  • 支持浏览器:IE7/8/9,现代浏览器
  • 支持node.js
  • Rekapi是对Kapi的重写,但不相同
  • 文档很全
Rekapi并不提供给你任何动画的功能,你可以自由的使用你喜欢的任何技术来生成动画。

标签: 动画, canvas, css3, rekapi

阅读更多

分享一个HTML5画布实现的超酷文字弹跳球效果

日期:2012/03/05  来源:GBin1.com

分享一个HTML5画布实现的超酷文字弹跳球效果

在线演示  本地下载

今天我们分享一个来自于html5canvastutorials的超酷弹跳球效果,这里我们使用纯HTML5的画布来实现动画及其图形。整个效果使用小球来组合生成字体,如果你的鼠标逼近这些小球,它们会四散而逃,当你的鼠标离开后,它们又自动复原,效果很酷,希望大家喜欢!

       <script>
window.requestAnimFrame = (function(callback){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame…

标签: HTML, HTML5, javascript, canvas, html5画布, 弹跳球, 画布

阅读更多

分享一个HTML5的高性能画布Javascript类库 - KineticJS

日期:2012/03/05  来源:GBin1.com

分享一个HTML5的画布Javascript类库 - KineticJS

在线演示

今天分享一个不错的针对HTML5的独立Javascript类库 - KineticJS,使用这个类库你可以轻松的进行图形和图片绘制和修改,执行动画效果,或者和图形图片进行互动。

针对比较大型的程序,这个类库还提供了性能测试的用例,你可以很直观的查看大量图片处理情况下的性能和效果。

当然,值得一提的是它拥有很多可直接使用的类库,这一点儿肯定会让大家喜欢的!

分享一个HTML5的画布Javascript类库 - KineticJS

主要特性

  • 支持所有现代浏览器
  • 不依赖任何js类库
  • API文档完整
  • 绘图快,性能非常好

分享一个HTML5的画布Javascript类库 - KineticJS

KineticJS的性能压力测试在线演示例子

分享一个HTML5的画布Javascript类库 - KineticJS

来源: 分享一个HTML5的高性能画布Javascript类库 - KineticJS

标签: KineticJS, HTML5, javascript, canvas, html5画布

阅读更多

分享一个HTML5实现的拼脸游戏

日期:2011/12/25  来源:GBin1.com

分享一个HTML5实现的拼脸游戏 by gbin1.com

在线演示  本地下载

今天我们介绍一篇来自script-tutorials的使用HTML5的Canvas实现的拼脸游戏,你可以自己选择设定,眉毛,鼻子,嘴,并且能够输出为图片。这篇教程将帮助你快速了解如何使用Canvas API。Enjoy!

使用方式: 请使用键盘方向键上下选择脸部器官,左右选择器官的不同类型。

Step 1. HTML

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>HTML5 Face Builder | Script Tutorials</title>

<link href="css/main.css"…

标签: canvas, 拼脸游戏, html5, toy

阅读更多

标签

© Copywrite by gbin1.com, all rights reserved.