摘要: 原文地址:canvas图表(3) - 饼图 这几天把canvas图表都优化了下,动画效果更加出色了,可以说很逼近Echart了。刚刚写完的饼图,非常好的实现了既定的功能,交互的动画效果也是很棒的。 效果请看:饼图 功能点包括: 组织数据; 画面绘制; 数据动画的实现; 鼠标事件的处理。 使用方式 饼 阅读全文
posted @ 2017-11-23 11:41 Jeff.Zhong 阅读(2410) 评论(0) 推荐(0) 编辑
摘要: 原文地址:canvas图表(2) - 折线图 话说这天气一冷啊, 就患懒癌, 就不想码代码, 就想着在床上舒舒服服看视频. 那顺便就看blender视频, 学习下3D建模, 如果学会了建3D模型, 那我的webGL技术就大有用处啊,可以独立开发小游戏了😂, 当然是玩笑了。但首先还是把canvas图 阅读全文
posted @ 2017-11-21 13:56 Jeff.Zhong 阅读(1917) 评论(0) 推荐(0) 编辑
摘要: 原文地址:WebGL学习(2) - 3D场景 经过前面*WebGL学习(1) - 三角形的学习,我们已经掌握了webGL的基础知识,也已经能够画出最基本的图形,比如点,线,三角形,矩形等。有了2D绘图的基础,现在终于可以进入精彩的3D世界了,来看一下这一节要实现的3D的效果吧。 实际效果:webGL 阅读全文
posted @ 2017-11-15 09:53 Jeff.Zhong 阅读(2623) 评论(0) 推荐(1) 编辑
摘要: 原文地址:canvas图表(1) - 柱状图 前几天用到了图表库,其中百度的ECharts,感觉做得最好,看它默认用的是canvas,canvas图表在处理大数据方面比svg要好。那我也用canvas来实现一个图表库吧,感觉不会太难,先实现个简单的柱状图。 效果请看:柱状图 主要功能点包括: 文本的 阅读全文
posted @ 2017-11-13 14:51 Jeff.Zhong 阅读(2643) 评论(4) 推荐(1) 编辑
摘要: 原文地址:WebGL学习(1) - 三角形 还记得第一次看到canvas的粒子特效的时候,真的把我给惊艳到了,原来在浏览器也能做出这么棒的效果。结合《HTML5 Canvas核心技术》和网上的教程,经过半年断断续续的学习,对canvas的学习终于完结,对常用的canvas特效基本能做到信手拈来的。 阅读全文
posted @ 2017-11-09 10:51 Jeff.Zhong 阅读(1634) 评论(1) 推荐(0) 编辑
摘要: css3,canvas 和 webGL 学习过程中做的demo和特效,一部分是对网上的特效进行重写,以加深对知识点的理解,具体内容请看:Jeff Zhong's Demo 阅读全文
posted @ 2017-11-07 13:49 Jeff.Zhong 阅读(1611) 评论(0) 推荐(1) 编辑
摘要: 原文地址:canvas图形编辑器 使用canvas进行开发项目,我们离不开各种线段,曲线,图形,但每次都必须用代码一步一步去实现,显得非常麻烦。有没有一种类似于PS,CAD之类的可视化工具,绘制出基本的图形,然后输出代码。之后我们就可以在这个生成的图形场景的基础上去实现功能,那将是多么的美妙的事啊。 阅读全文
posted @ 2017-11-06 17:17 Jeff.Zhong 阅读(14286) 评论(9) 推荐(8) 编辑
摘要: 原文地址:canvas绘制太阳系 学习canvas有一段时间了,顺便写个小项目练手,该项目用到的知识点包括: ES6面向对象 基本的三角函数 canvas部分有:坐标变换,渐变,混合模式,线条和图形的绘制。 实际效果: solar system(推荐在chrome或safari下运行) --> 场景 阅读全文
posted @ 2017-10-27 09:14 Jeff.Zhong 阅读(2345) 评论(2) 推荐(4) 编辑
摘要: 再次写了个焦点图的轮播效果, 效果:图片轮播图2 更多:Jeff Zhong's Demo html如下: 1 <div class="container"> 2 <div class="wrap"> 3 <div class="left" title="前一张"><i class="icon-le 阅读全文
posted @ 2014-11-01 12:18 Jeff.Zhong 阅读(880) 评论(2) 推荐(0) 编辑
摘要: 今天有点空,写了个图片轮播的效果,使用了jq,直接上代码吧。 效果: 图片轮播图 更多特效:Jeff Zhong's Demo html如下: 1 <div class="wrap"> 2 <div id="leftBtn" class="btn fl"><i class="icon-left-op 阅读全文
posted @ 2014-10-31 23:00 Jeff.Zhong 阅读(958) 评论(0) 推荐(0) 编辑