2016年08月_影子丝汀

转载 HTML5之Canvas 2D入门5 - 事件与动画

Canvas & SVG & DOM 　　Canvas与SVG都是2D绘图的利器，除此之外，使用CSS、DOM也可以实现某些性状的绘制，而且在动画中，也都可以使用这些技术实现动画效果。这里就简单比较一下这些技术。 •canvas：canvas是以画像素的形式画出图形，它没有shape和vector的概念。所以就没有对象去接受事件，它只是去绘制像素点。这是缺点，也是优点。 •SVG：SVG是基于v

2016-08-31 15:39:42 3300

转载 HTML5之Canvas 2D入门4 - 直接操作像素

前面的例子都是使用图片或者图形来绘图，这是相对高级的API，而且所有的操作和变换都是针对“网格坐标系”的。除此之外，canvas还支持直接操作每个像素(全部的，或者部分的)；毋庸置疑，这些操作是针对“像素坐标系”中的像素的，这些操作完全不受变换矩阵、阴影效果、全局透明度设置、裁剪路径、组合效果的影响，因为这些所有的效果都是针对“网格坐标系”的。操作完以后再放回canvas中，可以实现一些有趣的效果。

2016-08-31 14:52:10 3622

转载 HTML5之Canvas 2D入门3 - 变换与组合

知识准备 - 坐标系　　在真正开始总结变换之前，我们需要先了解一下canvas的相关坐标系知识。“像素坐标系”：在HTML中，我们会设置canvas的属性：width和height，它们是以像素为单位的，它们描述了canvas最终的呈现区域，我形象称之为“像素坐标”(自创，不是很贴切，行家别见笑)，这个坐标系原点在canvas的左上角，这个坐标系当canvas创建完成以后，就不会变了(当然了，修改w

2016-08-31 14:46:09 866

转载 HTML5之Canvas 2D入门2 - Canvas绘制图形

canvas只支持一种基本形状——矩形，所有其它形状都是通过一个或多个路径组合而成，甚至是基本的矩形也可以通过路径组合成。一、设置画笔属性　　设想我们生活中画图的样子，我们首先是选取合适的颜料和笔，一样的道理，在canvas中画图同样也是根据需要，不断的去设置当前使用的颜色和线条类型。设置当前使用的颜色　　任何封闭的图形都是有轮廓部分和填充部分组成。设置当前的颜色也是分两部分设置：

2016-08-31 14:18:50 1998

转载 HTML5之Canvas 2D入门1 - Canvas绘制文本和图像

Canvas历史　　canvas是一个新的HTML元素，这个元素可以被脚本语言(通常是JavaScript)用来绘制图形。例如可以用它来画图、合成图象、或做动画。canvas最先在苹果公司(Apple)的Mac OS X Dashboard上被引入，而后被应用于Safari。后面被采用成为HTML5标准规范的一部分。这个元素的引入带来了非同凡响的影响：从此，浏览器原生支持图形绘制与动画了。can

2016-08-31 11:44:38 5552

转载 HTML5之SVG 2D入门13 - svg对决canvas

到目前为止，SVG与Canvas的主要特性均已经总结完毕了。它们都是HTML5中支持的2D图形展示技术，而且均支持向量图形。现在，我们就来比对一下这两种技术，分析一下它们的长处和适用场景。首先分析一下两种技术的显著特点，看下面的表格： Canvas SVG 基于像素（动态 .png）基于形状单个 HTML 元素多个图形元素，这些元素成为 DOM 的一部分仅通过

2016-08-31 10:51:41 715

转载 HTML5之SVG 2D入门11 - 动画

交互性 SVG拥有良好的用户交互性，例如：SVG能响应大部分的DOM2事件。SVG能通过cursor良好的捕捉用户鼠标的移动。用户可以很方便的通过设置svg元素的zoomAndPan属性的值来实现缩放等效果。用户可以很方便的把动画和事件结合起来，完成一些复杂的效果。通过给SVG元素挂接事件，我们可以使用脚本语言方便的完成一些交互任务。SVG支持大部分的DOM2事件，例如：onfocusi

2016-08-31 10:06:02 759

转载 HTML5之SVG 2D入门10 - 滤镜

滤镜称得上是SVG最强大的功能了，它允许你给图形(图形元素和容器元素)添加各种专业软件中才有的滤镜特效。这样你就很容易在客户端生成和修改图像了。而且滤镜并没有破坏原有文档的结构，所以维护性也很好。滤镜用filter元素定义；需要使用的时候，在需要滤镜效果的图形或容器上添加filter属性，引用相关滤镜即可。滤镜元素包含很多的滤镜原子操作；每个原子操作在传入的对象上执行

2016-08-31 09:48:56 1388

转载 HTML5之SVG 2D入门8 - 文档结构

前面介绍了很多的基本元素，包括结构相关的组合和重用元素，这里先对SVG的文档结构中剩下的相关元素简单总结一下，然后继续向前领略SVG的其他特性。SVG文档的元素基本可以分为以下几类：•动画元素：animate, animateColor, animateMotion, animateTransform, set； •解释元素：desc, metadata, title； •图形元素：circle

2016-08-30 18:20:26 835

转载 HTML5之SVG 2D入门7 - 重用与引用

前面介绍了很多的图形元素，如果很多图形本身是一样的，需要每次都去定义一个新的么？我们能否共用一些图形呢？这是这节的重点 - SVG元素的重用。组合 - g元素g元素是一种容器，它组合一组相关的图形元素成为一个整体；这样，我们就可以对这个整体进行操作。这个元素通常可以和desc和title元素配合使用，提供文档的结构信息。结构良好的文档通常可读性和渲染效率都不错。看一个小例子：<svg xmlns=

2016-08-30 17:07:12 1485

转载 HTML5之SVG 2D入门6 - 坐标与变换

坐标系统　　SVG存在两套坐标系统：视窗坐标系与用户坐标系。默认情况下，用户坐标系与视窗坐标系的点是一一对应的，都为原点在视窗的左上角，x轴水平向右，y轴竖直向下；如下图所示： SVG的视窗位置一般是由CSS指定，尺寸由SVG元素的属性width和height设置，但是如果SVG是存储在embedded对象中(例如object元素，或者其他SVG元素)，而且包含SVG的文档是用CSS或者XSL

2016-08-30 16:36:49 1483

转载 HTML5之SVG 2D入门5 - 颜色的表示

SVG和canvas中是一样的，都是使用标准的HTML/CSS中的颜色表示方法，这些颜色都可以用于fill和stroke属性。基本有下面这些定义颜色的方式： 1. 颜色名字：直接使用颜色名字red, blue, black… 2. rgba/rgb值：这个也很好理解，例如#ff0000,rgba(255,100,100,0.5)。 3. 十六进制值：用十六进制定义的颜色，例如#fff

2016-08-30 15:17:22 2073

转载 HTML5之SVG 2D入门4 - 笔画与填充

前面我们重点都在总结各类形状，文本和图片，接下来，我们还是和讨论canvas一样，总结一下颜色处理，也就是填充和边框效果；你会发现这里的内容与canvas基本上是一致的。这些属性既可以以属性的形式写在元素中，也可以以CSS的形式保存(这是与canvas不一样的地方)。填充色 - fill属性　　这个属性使用设置的颜色填充图形内部，使用很简单，直接把颜色值赋给这个属性就可以了。看例子：<rect

2016-08-30 11:59:27 891

转载 HTML5之SVG 2D入门3 - 文本与图像

SVG中渲染文本　　SVG的强大能力之一是它可以将文本控制到标准HTML页面不可能有的程度，而无须求助图像或其它插件。任何可以在形状或路径上执行的操作（如绘制或滤镜）都可以在文本上执行。尽管SVG的文本渲染如此强大，但是还是有一个不足之处：SVG不能执行自动换行。如果文本比允许空间长，则简单地将它切断。多数情况下，创建多行文本需要多个文本元素。　　此外，可以使用 tspan 元素可以将文本元素分

2016-08-30 11:39:52 596

转载 HTML5之SVG 2D入门2 - 图形绘制

基本形状　　SVG提供了很多的基本形状，这些元素可以直接使用，这一点比canvas好多了。废话不说了，直接看例子，这个最直接：<svg width="200" height="250"> <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/> <rect

2016-08-30 11:18:07 627

转载 HTML5之SVG 2D入门1 - SVG综述

位图与矢量图　　以前，浏览器中显示的图形，例如jpeg、gif等，都是位图，这些图像格式是基于光栅的。在光栅图像中，图像文件定义了图像中每个像素的颜色值。浏览器需要读取这些值并做出相应行动。这种图像的再现能力比较强，但是在某些情形下会显得不足。例如，当浏览器以不同大小显示一副图像时，通常会产生锯齿边缘，这时，浏览器不得不为那些在原始图像中不存在的像素插入或猜测数值；这样会导致图像失真。此外，针对位图

2016-08-30 10:26:54 476

转载 HTML5学习 - 管中窥豹

前面已经学习了WebSocket与canvas的内容，这里大略看一下HTML5的主体特性，理清以后的学习方向。HTML5是一个逐渐发展的标准，所以没有那一款浏览器完全支持所有的特性，但是总的来说，最新的Chrome、Firefox、Opera几款浏览器支持的最好；而且每个特性将来也可能会出现一些小的变化。HTML5的特性主要表现在下面几个方面。规则的变化　　HTML5制定了更加松散的文档规则，同

2016-08-30 10:18:47 429

原创 GIS算法--已知一点经纬度，方位角，距离求另一点

已知一个点A的经纬度坐标，点B相对与A的方位角，B到A的距离，求B的经纬度坐标，用Javascript语言来完成该算法，借用了一下openLCommonFunc.caculate={ VincentyConstants : { a: 6378137, b: 6356752.3142, f: 1/298.257223563 },

2016-08-24 10:44:39 24973 16

原创 javascript 设计模式学习笔记（三）--基础（闭包）

闭包是一个比较难懂的概念，闭包的形成与变量的作用域以及变量的生命周期密切相关。 1.变量的作用域var a=1;var func1=function(){ var b=2; var func2=function(){ var c=3; alert(b);//输出：2 alert(a);//输出：1 }; f

2016-08-23 18:54:21 478

原创 javascript 设计模式学习笔记（二）--基础（call，apply）

1.call和apply的区别他们的作用一模一样，区别在于传入参数的形式不同apply 接受两个参数，第一个参数指定了函数体内的this对象的指向，第二个参数为一个带下标的集合，可以为数组，也可以为类数组，apply方法把这个集合中的元素作为参数传递给被调用的函数var func=function(a,b,c){ alert([a,b,c]);};func.apply(null,[1

2016-08-23 18:16:42 407

原创 javascript 设计模式学习笔记（一）--基础（this）

在javascript编程中，this,Function.peototype.call和Function.peototype.apply都有着广泛的应用，在学习设计模式之前先理解一下这三个概念。1.thisjs中的this总是指向一个对象，而具体指向哪一个对象是在运行时基于函数的执行环境动态绑定的，而非函数被声明时的环境。1.1this的指向通常情况下this的指向大致可以分为以下4种：作为对象

2016-08-23 17:24:50 435

转载 jquery--call()&apply()函数

1. 定义call方法语法：call([thisObj[,arg1[,arg2[,[,..argN]]]]]) 定义：调用一个对象的一个方法，以另一个对象替换当前对象说明：call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。如果没有提供 thisObj

2016-08-22 16:54:00 7897

原创 jquery --$.proxy()函数

定义和用法接受一个已有的函数，并返回一个带特定上下文的新的函数。该方法通常用于向上下文指向不同对象的元素添加事件。提示：如果您绑定从 $.proxy 返回的函数，jQuery 仍然可以通过传递的原先的函数取消绑定正确的函数。实例强制执行 objPerson 内的 "test" 函数的上下文：$(document).ready(function(){ var objPerson = {

2016-08-19 18:04:33 674

转载 jQuery.extend函数

Jquery的扩展方法extend是我们在写插件的过程中常用的方法，该方法有一些重载原型一、Jquery的扩展方法原型extend(dest,src1,src2,src3...); 它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后，是修改了dest的结构的。如果想要得到合并的结果却又不想修改dest的结构，可以如下使用： var

2016-08-19 17:29:14 340

夕颜的专栏