理解SVG的viewport,viewBox,preserveAspectRatio
发表于
svg
分类，标签:
25
06月
2015
0
by zhangxinxu from http://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpress/?p=4323万丈高楼平地起，基础很重要。viewport表示SVG可见区域的大小，或者可以想象成舞台大小，画布大小。<svg width="500" height="300"></svg>上面的SVG代码定义了一个视区，宽500单位，高300单位。注意这里的措辞是“单位”，不是“像素”。虽然说，width/height如果是纯数字，使用的就是“像素”作为单位的。也就是说，上面SVG的视区大小就是500px*300px.当然，故弄“单位”这个措辞，潜台词就是你可以使用其他类型的单位，涵盖常见CSS单位：单位...
深度掌握SVG路径path的贝塞尔曲线指令
发表于
svg
分类，标签:
25
06月
2015
by zhangxinxu from http://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpress/?p=4197一、数字、公式、函数、变量，哦，NO!又又一次说起贝塞尔曲线（英语：Béziercurve，维基百科详尽中文释义戳这里），我最近在尝试实现复杂的矢量图形动画，发现对贝塞尔曲线的理解馒头那么厚，是完全不能承受富有创意的创作的，至少得有我当年追我老婆的脸皮厚才行。然而，瞅瞅维基百科上的释义，或者其他一些相关的技术文章，总是离不开各种公式，一大堆变量……例如下面维基截图缩略图：完全是数学爱好者的菜啊！我想，要是让UI设计师们去学习这些东西，估计还不如一刀来个痛快的！这就是爱好领域与能力掌握的悖论！从思维方式以及理论根基上来讲，设计师更能做出细腻、灵动的动画效果。在传统动画领域，往往都...
SVG矢量绘图 path路径详解（贝塞尔曲线及平滑）
发表于
JS
分类，标签:
25
06月
2015
转自http://xbingoz.com/194.htmlDx.YangWebFront-endEngineerMenuSkiptocontentSVG矢量绘图path路径详解（贝塞尔曲线及平滑）2013年1月16日上午8:33维基百科：贝塞尔曲线以二次贝塞尔曲线的公式为例：js函数：12345678//p0、p1、p2三个点，其中p0为起点，p2为终点，p1为控制点//它们的坐标用数组表示[x,y]//t的范围是0-1functionqBerzier(p0,p1,p2,t){ varx=(1-t)*(1-t)*p0[0]+2*t*(1-t)*p1[0]+t*t*p2[0]; vary=(1-t)*(1...
深度掌握SVG路径path的贝塞尔曲线指令
发表于
JS
分类，标签:
25
06月
2015
by zhangxinxu from http://www.zhangxinxu.com本文地址：http://www.zhangxinxu.com/wordpress/?p=4197一、数字、公式、函数、变量，哦，NO!又又一次说起贝塞尔曲线（英语：Béziercurve，维基百科详尽中文释义戳这里），我最近在尝试实现复杂的矢量图形动画，发现对贝塞尔曲线的理解馒头那么厚，是完全不能承受富有创意的创作的，至少得有我当年追我老婆的脸皮厚才行。然而，瞅瞅维基百科上的释义，或者其他一些相关的技术文章，总是离不开各种公式，一大堆变量……例如下面维基截图缩略图：完全是数学爱好者的菜啊！我想，要是让UI设计师们去学习这些东西，估计还不如一刀来个痛快的！这就是爱好领域与能力掌握的悖论！从思维方式以及理论根基上来讲，设计师更能做出细腻、灵动的动画效果。在传统动画领域，往往都...
API链接收录
发表于
API
分类，标签:
25
06月
2015
http://codepen.io/xueyan/pen/bgtyu/Snap.svg.js中文api http://www.zhangxinxu.com/GitHub/demo-Snap.svg/demo/basic/Element.add.phpraphaeljs.jsapi http://raphaeljs.com/reference.html#Animation.delay http://dmitrybaranovskiy.github.io/raphael/reference.html pixi.js apihttp://pixijs.github.io/examples/index.html svg 属性apihttps://developer.mozilla.org/en-US...
正则表达式记忆技巧
发表于
JS
分类，标签:
24
06月
2015
8速记理解技巧编辑.[]^$四个字符是所有语言都支持的正则表达式，所以这个四个是基础的正则表达式。正则难理解因为里面有一个等价的概念，这个概念大大增加了理解难度，让很多初学者看起来会蒙，如果把等价都恢复成原始写法，自己书写正则就超级简单了，就像说话一样去写你的正则了： 等价： ?,*,+,\d,\w都是等价字符 ？等价于匹配长度{0,1} *等价于匹配长度{0,} +等价于匹配长度{1,} \d等价于[0-9] \w等价于[A-Za-z_0-9]。常用运算符与表达式： ^开始 （）域段 []包含,默认是一个字符长度 [^]不包含,默认是一个字符长度 {n,m}匹配长度 .任何单个字符(\.字符点) |或 \转义 $结尾 [A-Z]26个大写字母 [a-z]26个小写字母 [0-9]0至9数字[A-Z...
Snap.svg-SVG实战学习必修课-实例与文档讲解
发表于
JS
分类，标签:
24
06月
2015
（本文转自：http://www.zhangxinxu.com/GitHub/demo-Snap.svg/demo/basic/Element.add.php）一、关于Snap.svg2013年10月23日，第3届（如果我没记错的话）HTML5全球开发者大会在旧金山举办。Adobe在此次大会上宣布了一件事情：建立了一个名叫Snap.svg的开源项目。其目的在于摒弃Flash插件，将Flash的特性带到web上。Adobe表示，”Snap.svg是一个强大且直观的SVG动画内容操纵API，支持屏蔽、裁剪、全梯度和组别等使得内容更具吸引力和交互性的功能”。Adobe支持的项目，自然其产品中会有体现，例如DreamWeaver中的PhoneGap,这里的Snap.svg应该也会集成在其Web开发工具中，例如Edge.我早在半年前的文章中就说过，SVG貌似要兴起，其判断来自国外最新的技术文章中S...
使用javascript动态创建SVG对象的问题
发表于
JS
分类，标签:
23
06月
2015
使用javascript动态创建SVG对象的问题,平时的一些研究，有时也会颇费功夫.<!DOCTYPE HTML><html><head><meta charset="UTF-8"><title></title></head><body><svg id="s" xmlns="http://www.w3.org/2000/svg"/><script type="text/javascript" src="scripts/jQuery.v1.11.1.min.js">&l...
Javascript 的addEventListener()及attachEvent()区别分析
发表于
JS
分类，标签:
23
06月
2015
Mozilla中：addEventListener的使用方式：target.addEventListener(type,listener,useCapture); target：文档节点、document、window或XMLHttpRequest。type：字符串，事件名称，不含“on”，比如“click”、“mouseover”、“keydown”等。listener：实现了EventListener接口或者是JavaScript中的函数。useCapture：是否使用捕捉，一般用false。例如：document.getElementById("testText").addEventListener("keydown",function(event){alert(event.k...
canvas学习笔记
发表于
JS
分类，标签:
23
06月
2015
很多知识不用就会忘记，现在因为有了个人网站，所以都可以记录在这里。现在又的重新温习一下canvas知识了。//加载onload函数functionaddEvent(func){if(typeofwindow.onload==="function"){varorigin=window.onload;window.onload=function(){alert("zhixing")origin();func();}}else{window.onload=function(){func();}}}//画画当然需要画布，所以首先应该获得画布getContext()方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。//参数2d或者3d具体用法：var ctx=document.getE...