摘要: (原文地址:http://www.cnblogs.com/idealer3d/p/LearningRaphaelJSVectorGraphics.html) 前面3篇博文里面,我们讲解了一本叫做《Instant RaphaelJS Starter》的书,那本书里我们将RaphaelJS里面的基本内容都进行了比较详细的讲解。但是,坦白的说,那本书通俗易懂却太过浅显。现在我们下一本叫做《Learning Raphael JS Vector Graphics》的书,算是上一本的进阶。当然,它里面大部分篇幅也是基本内容。因为一本书不能去讲一个写复杂的业务问题,你所要做的也是学会基本内容然后自... 阅读全文
posted @ 2014-01-14 14:50 3D理想家 阅读(11967) 评论(1) 推荐(1) 编辑
摘要: 画一个点 function main(){ var canvas = document.getElementById('webgl');//获得canvas元素 var param = ['webgl', 'experimental-webgl', 'webkit-3d', 'moz-webgl']; var gl; for (var i = 0; i < param.length; i++) { gl = canvas.getContex... 阅读全文
posted @ 2014-01-10 15:42 3D理想家 阅读(1074) 评论(0) 推荐(0) 编辑
摘要: (目前发现一些文章被盗用的情况,我们将在每篇文章前面添加原文地址,本文源地址:http://www.cnblogs.com/idealer3d/p/tomAndJerryRaphaelVectorGraphics.html)经过前面3个博文的介绍,这里我们尝试来做一些简单的图片,并添加一些效果。效果图:由于本人美术天赋实在是惨绝人寰,这里就直接从百度搜了个素描图然后通过inkscape的图像轮廓工具把素描图的轮廓给转换成为了path。做法是导入图片--点击选中图片--Shift+Alt+B,点击确定、更新就可以了。然后我们导出svg文件,找到里面的path标签部分(svg文件格式就是xml格式 阅读全文
posted @ 2014-01-09 14:46 3D理想家 阅读(1799) 评论(1) 推荐(1) 编辑
摘要: (目前发现一些文章被盗用的情况,我们将在每篇文章前面添加原文地址,本文源地址:http://www.cnblogs.com/idealer3d/p/Instant_RaphaelJS_Starter3.html) 上篇博文我们讲解到了Raphael的动画、图形变换和鼠标事件的内容,本篇介绍介绍你使用Raphael过程中会高频用到的方法。那些你必须知道的Raphael方法Element 方法 这些方法由元素调用。比如我们前面的rect.click()。animate() animate() 方法是用来在特定时间内通过动画效果来变换元素的属性的方法。语法如下:element.animat... 阅读全文
posted @ 2014-01-08 20:08 3D理想家 阅读(3101) 评论(1) 推荐(3) 编辑
摘要: (目前发现一些文章被盗用的情况,我们将在每篇文章前面添加原文地址,本文源地址:http://www.cnblogs.com/idealer3d/p/Instant_RaphaelJS_Starter2.html) 上篇博文我们讲述了使用RaphaelJS去绘制一些静态矢量图的知识,从现在开始我们来讲述如何去操作这些画好的矢量图。本篇内容对应原书的33页及以后内容。已经拿到英文原版书的同学们也可以对应着去试读这篇博文。我也是边学边写,所以如果发生一些错误翻译和理解偏差,还得请大家及时指出以便修改。 操作Raphael元素的样式 在上篇的内容中,我们已经提到了一个方法是attr()方法,是... 阅读全文
posted @ 2014-01-07 20:32 3D理想家 阅读(2294) 评论(0) 推荐(1) 编辑
摘要: (目前发现一些文章被盗用的情况,我们将在每篇文章前面添加原文地址,本文源地址:http://www.cnblogs.com/idealer3d/p/3508251.html)这一章主要通过创建一个三角形的例子说明WebGL基本的用法,以下是书中例子的效果图:创建一个基本的WebGL应用需要以下的步骤:1.WritesomebasicHTMLcodethatincludesatag.ThetagprovidesthedrawingareaforWebGL.ThenyouneedtowritesomeJavaScriptcodetocreateareferencetoyourcanvassoyou 阅读全文
posted @ 2014-01-07 10:07 3D理想家 阅读(1104) 评论(0) 推荐(0) 编辑
摘要: (目前发现一些文章被盗用的情况,我们将在每篇文章前面添加原文地址,本文源地址:http://www.cnblogs.com/idealer3d/p/Instant_RaphaelJS_Starter.html) Raphael Javascript是一个 Javascript的矢量库。 它可以处理SVG、VML格式的矢量图,它使用SVG W3C推荐标准和VML作为创建图形的基础,你可以用Javascript 操作Dom 很容易的创建出复杂的柱状图、走势图、曲线图等各种图表,可以画图,可以画出任意复杂度的图像,以及图表或图像裁剪和旋转等复杂操作。 目前网上已经可以找到对面Rapha... 阅读全文
posted @ 2014-01-06 19:55 3D理想家 阅读(6164) 评论(3) 推荐(4) 编辑