html5 像素风画板,【前端酷站】分享一个纯 Javascript 的图表库与立体像素风制作~...

在首页有完整的说明,也专门的例子进行讲解,如果有一定前端基础,可以很快上手。而没有经验的,照模画样也可以弄出来。

一般性的例子里面包含了常用的一般性表格,点击进去就可以看到代码。修改后点击刷新就能得到修改后的样子

在特别例子和画廊里,有官方的精美例子,而Gallery里面则是用户自己制作的一些精美图形来进行分享。你所需要做的,就是过去拷贝代码拿来用。

大家可以欣赏欣赏特效案例:

a9217e8535775905195974aba355d9c1.png

351cd0074d4922c7487cceb281b6ada9.png

96499f3194d65bf5187342979918e298.png

8e8193aed36c2aaba83dadd866ac0747.png

ee844a7f57317a12920b15bc5d600a80.png

eb9318cb1218e6f648765e4367d431ee.png

e03965465e9a1ba3b9a1299bba554f8e.png

还可以进行立体像素风案例制作:

选一张色彩丰富的颜料图作为原始素材

7f29d89c4d5ed6810684cf609e0fb82e.gif

接下来就是见证奇迹的时刻~

f19682ac42765eb97f72d9c4b76702e1.png

可以通过鼠标拖动来改变视角,通过滚轮来放大缩小图像~~

5ba7eaaf7bfbbfc75a98e59284392316.png

是不是超酷呢?再调整一下参数试试~~

1f4347d3c0b0c88ed1644e45e81b7b25.png

简直整容术~~再稍微调整一下,然后只需要在画面中心右键,图片另存为,大功告成~~

3fac3d58567cbfe3a4de05d6c6de93cd.png

ad9565ad9dcc1ba7da7e7f83b4d9ad61.png

sChart.js:一个小型简单的图表库

介绍 sChart.js 作为一个小型简单的图表库,没有过多的图表类型,只包含了柱状图.折线图.饼状图和环形图四种基本的图表.麻雀虽小,五脏俱全.sChart.js 基本可以满足这四种图表的需求.而它 ...

准备开发一个基于canvas的图表库,记录一些东西(一)

开源的图表库已经有很多了,这里从头写个自己的,主要还是 提高自己js的水平,增加复杂代码组织的经验 首先写一个画图的库,供以后画图表使用.经过2天的开发,算是能拿出点东西了,虽然功能还很弱,但是有了一 ...

分享一个CSS+JavaScript框架materializecss

一.内容: CSS+JavaScript框架materializecss. 二.网址:http://materializecss.com 三.图片:

分享一个纯css制作的动画化,在网页(手机)载入等的时候能够引用!

CSS代码例如以下: /* Custom Stylesheet */ body, html { margin: 0; -webkit-font-smoothing: antialiased; back ...

gRaphael——JavaScript 矢量图表库:两行代码实现精美图表

gRaphael 是一个致力于帮助开发人员在网页中绘制各种精美图表的 Javascript 库,基于强大的 Raphael 矢量图形库.你只需要编写几行简单的代码就能创建出精美的条形图.饼图.点图和曲 ...

前端开发者常用的9个JavaScript图表库

当前,数据可视化已经成为数据科学领域非常重要的一部分.不同网络系统中产生的数据,都需要经过适当的可视化处理,以便更好的呈现给用户读取和分析. 对任何一个组织来说,如果能够充分的获取数据.可视化数据和分 ...

轻量高效的开源JavaScript插件和库 【转】

图片 布局 轮播图 弹出层 音频视频 编辑器 字符串 表单 存储 动画 时间 其它 加载器 构建工具 测试 包管理器 CDN 图片 baguetteBox.js - 是一个简单易用的响应式图像灯箱效果 ...

ECharts JavaScript图表库 ECharts

ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值 ...

JavaScript 加解密库(crypto-js)

1. 概述 1.1 说明 crypto-js(GitHub)是谷歌开发的一个纯JavaScript的加密算法类库,可以非常方便的在前端进行其所支持的加解密操作.目前crypto-js已支持的算法有:M ...

随机推荐

Java

2016-12-17  21:10:28 吉祥物:Duke(公爵)    Logo:咖啡(爪哇岛盛产咖啡)  An overview of the software development proce ...

Servlet学习笔记

在这里记录最重要的要点 1,tomcat-->conf-->server.xml里面的东西是什么?(tomcat怎么知道“谁”去处理客户端来的请求?) 最主要的是一个依赖的控制,换句话说什 ...

hdu4970 Killing Monsters (差分数列)

2014多校9 1011 http://acm.hdu.edu.cn/showproblem.php?pid=4970 Killing Monsters Time Limit: 2000/1000 M ...

BC之The mook jong

Problem Description ZJiaQ want to become a strong man, so he decided to play the mook jong.ZJiaQ wan ...

Android 多渠道打包原理和使用

每次中午吃饭总会和技术同学聊天.当做 iOS 开发的做安卓开发的人员在一起的时候,他们中间又多了一个话题:iOS 开发难还是安卓开发难. 这个时候做安卓开发的同学最激动说安卓开发要自己画界面.机型复杂 ...

postgresql 多实例运行

创建新的实例, (下面所用到的9.1版本,如果为其他版本,可以用版本号替换9.1) sudo /usr/bin/pg_createcluster -U postgres                 ...

applet部署,无需修改客户端设置。

1  开发applet程序,编译成jar包 2  给jar包做数字签名: (1).用keytool生成密钥: keytool -genkey -keystore myapplet.keystore - ...

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值