上篇简要介绍了svg.js的基本信息和基本用法,这篇开始详细讲解svg.js的用法. SVG元素 SVG元素主要包括各种形状.线条.文本.路径. 矩形——Rect Rects有两个参数,即矩形的宽度和高度: var rect = draw.rect(100, 100) 椭圆——Ellipse Ellipses就像矩形一样,有两个参数,横向和纵向的直径: var ellipse = draw.ellipse(200, 100) 圆——Circle Circles有一个参数,即圆的直径: var c

做毕设的时候,因为要使用到画图和自定义动画,所以接触到了SVG.网上关于SVG和Canvas的对比很多,具体的辨析这里就不赘言.网上关于SVG的所谓教程基本上都是SVG本身,但是却没有一个针对svg.js这样的集成的SVG库进行具体讲解的教程,做这件事的,本文应该是第一篇,也是给那些需要动态的使用SVG的兄弟们一点帮助. 简介: SVG.js是一个轻量级的JavaScript库,允许你轻松操作SVG和定义动画.  SVG(Scalable Vector Graphics,可缩放矢量图形)是基于X

js中settimeout方法加参数的使用. 简单使用看w3school  里面没有参数调用,  例子: <script type="text/javascript">  function timedMsg()  {  var a ="dd";  var t=setTimeout(function(){ cao(a);},3000)  }  function cao(a)  {  alert(a);  } www.jbxue.com </scrip

大家都知道java是强类型语言,而js是弱类型语言,其实,它们之间的区别不止这一点,还有方法参数及调用问题,参看下例: js中:这里定义了一个query()方法 function query() { var blacklistNumber=$('#blacklistNumber').val(); var blacklistName=$('#blacklistName').val(); var blacklistSex = $('#blacklistSex').val(); queryObj.bl

js获取url的参数和值的N种有效方法 function getParameterByName(name) { name = name.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]"); var regexS = "[\\?&]" + name + "=([^&#]*)"; var regex = new RegExp(regexS); var results =

js中的方法如何传入多个参数 $(function () { let parameter1 = 1; let parameter2 = 'Hello World'; let parameter3 = false; $("#parameter"). append('<a onclick="testParameter(\''+ parameter1 +'\',\''+ parameter2 +'\',\''+ parameter3 +'\');">JS方法多

#import<JavaScriptCore/JavaScriptCore.h> #pragma mark UIWebViewDelegate - (void)webViewDidFinishLoad:(UIWebView *)webView { [SVProgressHUD dismissWithDelay:0.1]; JSContext *jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.j

什么是SVG? SVG 指可伸缩矢量图形 (Scalable Vector Graphics) SVG 用来定义用于网络的基于矢量的图形 SVG 使用 XML 格式定义图形 SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失 SVG 是万维网联盟的标准 SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体 简介: SVG.js是一个轻量级的JavaScript库,允许你轻松操作SVG和定义动画. SVG(Scalable Vector Graphics,可缩放矢量图形)是基

本文主要记录如何使用 svg.js 实现对图形的拖拽,选择,图像渲染及各类形状的绘制操作. 1.关于SVG SVG 是可缩放的矢量图形,使用XML格式定义图像,可以生成对应的DOM节点,便于对单个图形进行交互操作.比CANVAS更加灵活一点.关于SVG的基础知识,请参考SVG学习地址. 2.SVG.js 今天要说的主角是 SVG.js,它是对SVG本身的一个封装库,提供各种API使对SVG的使用更加方便,相当于JQuery对于JS,它的自我介绍是 轻量级,速度快,更具易读性.SVG.js官网介绍

一.transform()获取或设置矩阵变换 var draw = SVG('svg1').size(300, 300); //Transforming SVG元素矩阵变换 var rect = draw.rect(100, 100).move(100, 100); //transform() 获取或设置变换 //默认的变换是absolute,在原始基础上变换 rect.transform({ rotation: 125 //设置旋转 }).transform({ rotation: 37.5

一.属性操作Attributes var draw = SVG('svg1').size(300, 300); //attr() 属性操作 //设置属性的值 var rect = draw.rect(100, 100); rect.attr('x', 50).attr('y', 50); rect.attr({ fill: '#f06', 'fill-opacity': 0.5, stroke: '#000', 'stroke-width': 10 }); //删除属性 rect.attr('f

一.SVG.get() 根据id获取元素 var draw = SVG('svg1').size(300, 300); var circle = draw.circle(50); circle.fill('red').move(10, 10); //添加类 circle.addClass('circle'); //设置ID circle.id('circle'); //SVG.get() 获取Element对象 var circle2 = SVG.get('circle'); console.i

一.SVG.Pattern 图案设置 var draw = SVG('svg1').size(300, 300); //SVG.Pattern 图案设置 var pattern = draw.pattern(20, 20, function (add) { add.rect(20, 20).fill('#f06'); add.rect(10, 10); add.rect(10, 10).move(10, 10); }); //获取url的标识对象,returns 'url(#SvgjsPatte

一.SVG.Gradient 1.线性渐变.径向渐变,设置渐变的起始点,设置径向渐变的外层半径 var draw = SVG('svg1').size(300, 300); //SVG.Gradient 渐变处理 linear.radial //线性渐变 linear //径向渐变 radial var gradient = draw.gradient('radial', function (stop) { stop.at(0, '#f06'); stop.at(1, '#0f9'); });

一.创建a标签,为a标签添加内容 <div id="svg1"></div> <script> //SVG.A 链接创建 var draw = SVG('svg1').size(300, 300); var link = draw.link('http://www.gongjuji.net/'); var rect = link.rect(100, 100); </script> 二.修改链接的地址 <div id="sv

这段时间做的一个项目,需要在地图上绘制简单的图形.在学习高德地图JS API的过程中,发现高德地图提供的点.线等API并不能满足我的需求,还好它开放了自定义图层CustomLayer,官方说自定义图层支持canvas.svg.甚至dom,这里我用的是svg,多说无益,上代码. 一.高德地图 以下的步骤在官方文档中都有,而且官方文档比较齐全. 首先需要去高德API官网申请自己的key,此步略过. 拿到key后在页面中引入地图所用的js js <script type="text/javasc

fullPage.js中文api 配置参数 选项 类型 默认值 说明 verticalCentered 字符串 true 内容是否垂直居中 resize 布尔值 false 字体是否随着窗口缩放而缩放 slidesColor 函数 无 设置背景颜色 anchors 数组 无 定义锚链接 scrollingSpeed 整数 700 滚动速度,单位为毫秒 easing 字符串 easeInQuart 滚动动画方式 menu 布尔值 false 绑定菜单,设定的相关属性与 anchors 的值对应后,

window.resizeTo(800,600); //js设置浏览器窗口尺寸 window.open (function(){ resizeTo(640,480);//设置浏览器窗口尺寸 moveTo(0,0);//设置浏览器位置 })() screen.availHeight;//显示屏最高高度 screen.availWidth;//显示屏最宽宽度 /*窗口改变大小 事件*/ //js window.onresize = function() { if(resizeTimer==null)

原生bind方法 不同于jQuery中的bind方法只是简单的绑定事件函数,原生js中bind()方法略复杂,该方法上在ES5中被引入,大概就是IE9+等现代浏览器都支持了(有关ES5各项特性的支持情况戳这里ECMAScript 5 compatibility table),权威指南上提到在ES3中利用apply模拟该方法的实现(JS权威指南中函数那章), 但无法真实还原该方法, 这也是真bind方法中的有趣特性. (原文这边理解有问题, 这段话的意思如果结合犀牛书上下文的意思, 再结合犀牛书中

1.通过jsonp跨域2.通过修改document.domain来跨子域(iframe)3.隐藏的iframe+window.name跨域4.iframe+跨文档消息传递(XDM)5.跨域资源共享 CORS6.WebSockets JS跨域方法学习了很多,也实践了很多,一直没有完整的整理一下. js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被当作是不同的