一切福田，不離方寸，從心而覓，感無不通。

Category Archives: JavaScript

wx.onMenuShareTimeline使用注意事项

我在开发测试过程中,发现使用wx.onMenuShareTimeline无效果,没有显示我定义的图片、title和链接,经过调试发现原因如下： 1.图片大小要大于300pix才能显示 2.这个方法必须先config成功，然后再wx.ready里才能调用。我直接放到$(function(){})里执行，实践证明是不行的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '{$appid}', // 必填，公众号的唯一标识 timestamp: "{$signPackage.timestamp}", // 必填，生成签名的时间戳
    nonceStr: '{$signPackage.nonceStr}', // 必填，生成签名的随机串
    signature: '{$signPackage.signature}',// 必填，签名，见附录1  
    jsApiList: ['checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2  
});
 
wx.ready(function () {
    wx.onMenuShareTimeline({
        title: '--{$info.name}', // 分享标题
        link: '{$url}__URL__/index?pid={$pid}&puid={$uid}', // 分享链接,将当前登录用户转为puid,以便于发展下线
        imgUrl: '{$url}__PUBLIC__/Uploads/{$goodsvo.image}', // 分享图标
        success: function () { // 用户确认分享后执行的回调函数
            alert('分享成功');
        },
        cancel: function () { // 用户取消分享后执行的回调函数  
        }
    });
 
    wx.error(function (res) { // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        alert("errorMSG:" + res);
    });
});

from:http://www.cnblogs.com/zhouyu629/p/4496065.html

龙生   30 Mar 2016
View Details

Navigator 对象

Navigator 对象 Navigator 对象包含有关浏览器的信息。 注释：没有应用于 navigator 对象的公开标准，不过所有浏览器都支持该对象。 Navigator 对象集合 集合 描述 plugins[] 返回对文档中所有嵌入式对象的引用。 该集合是一个 Plugin 对象的数组，其中的元素代表浏览器已经安装的插件。Plug-in 对象提供的是有关插件的信息，其中包括它所支持的 MIME 类型的列表。 虽然 plugins[] 数组是由 IE 4 定义的，但是在 IE 4 中它却总是空的，因为 IE 4 不支持插件和 Plugin 对象。 Navigator 对象属性 属性 描述 appCodeName 返回浏览器的代码名。 appMinorVersion 返回浏览器的次级版本。 appName 返回浏览器的名称。 appVersion 返回浏览器的平台和版本信息。 browserLanguage 返回当前浏览器的语言。 cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值。 cpuClass 返回浏览器系统的 CPU 等级。 onLine 返回指明系统是否处于脱机模式的布尔值。 platform 返回运行浏览器的操作系统平台。 systemLanguage 返回 OS 使用的默认语言。 userAgent 返回由客户机发送服务器的 user-agent 头部的值。 userLanguage 返回 OS 的自然语言设置。 Navigator 对象方法 方法 描述 javaEnabled() 规定浏览器是否启用 Java。 taintEnabled() 规定浏览器是否启用数据污点 (data tainting)。 from:http://www.w3school.com.cn/jsref/dom_obj_navigator.asp

龙生   24 Mar 2016
View Details

js移动设备手机跳转地址代码

1
2
3
4
5
6
7
8
9
10
11
12
13
if(/AppleWebKit.*mobile/i.test(navigator.userAgent) || (/MIDP|SymbianOS|NOKIA|SAMSUNG|LG|NEC|TCL|Alcatel|BIRD|DBTEL|Dopod|PHILIPS|HAIER|LENOVO|MOT-|Nokia|SonyEricsson|SIE-|Amoi|ZTE/.test(navigator.userAgent))){
    if(window.location.href.indexOf("?mobile")<0){
        try{
            if(/Android|webOS|iPhone|iPod|BlackBerry/i.test(navigator.userAgent)){
                window.location.href="手机页面";
            }else if(/iPad/i.test(navigator.userAgent)){
                window.location.href="平板页面";
            }else{
                window.location.href="其他移动端页面"
            }
        }catch(e){}
    }
}

另外的三种： 版本1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script language="javascript">
//平台、设备和操作系统  
var system ={  
win : false,  
mac : false,  
xll : false  
};  
//检测平台  
var p = navigator.platform;  
system.win = p.indexOf("Win") == 0;  
system.mac = p.indexOf("Mac") == 0;  
system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);  
//跳转语句，如果是手机访问就自动跳转到caibaojian.com页面  
if(system.win||system.mac||system.xll){  
}else{  
window.location.href="http://caibaojian.com";  
}  
</script>

版本2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script language="javascript">
function is_mobile() {
    var regex_match = /(nokia|iphone|android|motorola|^mot-|softbank|foma|docomo|kddi|up.browser|up.link|htc|dopod|blazer|netfront|helio|hosin|huawei|novarra|CoolPad|webos|techfaith|palmsource|blackberry|alcatel|amoi|ktouch|nexian|samsung|^sam-|s[cg]h|^lge|ericsson|philips|sagem|wellcom|bunjalloo|maui|symbian|smartphone|midp|wap|phone|windows ce|iemobile|^spice|^bird|^zte-|longcos|pantech|gionee|^sie-|portalmmm|jigs browser|hiptop|^benq|haier|^lct|operas*mobi|opera*mini|320x320|240x320|176x220)/i;
  var u = navigator.userAgent;
  if (null == u) {
   return true;
  }
  var result = regex_match.exec(u);
 
  if (null == result) {
   return false
  } else {
   return true
  }
}
if (is_mobile()) {
  document.location.href= 'http://caibaojian.com';  //修改http://caibaojian.com为你所需跳转目标页地址
}
</script>

版本3 百度webapp版

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!---识别手机或电脑的js开始--->
<script language="javascript">
(function(){
    var res = GetRequest();
    var par = res['index'];
    if(par!='gfan'){
        var ua=navigator.userAgent.toLowerCase();
        var contains=function (a, b){
            if(a.indexOf(b)!=-1){return true;}
        };
//将下面的http://caibaojian.com改成你的wap手机版页面地址 如我的 http://caibaojian.com
        var toMobileVertion = function(){
            window.location.href = 'http://caibaojian.com/'
        }
 
        if(contains(ua,"ipad")||(contains(ua,"rv:1.2.3.4"))||(contains(ua,"0.0.0.0"))||(contains(ua,"8.0.552.237"))){return false}
        if((contains(ua,"android") && contains(ua,"mobile"))||(contains(ua,"android") && contains(ua,"mozilla")) ||(contains(ua,"android") && contains(ua,"opera"))
    ||contains(ua,"ucweb7")||contains(ua,"iphone")){toMobileVertion();}
    }
})();
function GetRequest() {
   var url = location.search; //获取url中"?"符后的字串
   var theRequest = new Object();
   if (url.indexOf("?") != -1) {
      var str = url.substr(1);
      strs = str.split("&");
      for(var i = 0; i < strs.length; i ++) {
         theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
      }
   }
   return theRequest;
}
</script>
<!---识别手机或电脑的js结束--->

龙生   23 Mar 2016
View Details

使用jquery获取父元素或父节点的方法

jquery获取父元素方法比较多，比如parent()，parents()，closest()这些都能帮你实现查找父元素或节点，下面我们来一一讲解： 先举个例子， 1.<ul class="parent1"> 2.<li><a href="#" id="item1">jquery获取父节点</a></li> 3.<li><a href="#">jquery获取父元素</a></li> 4.</ul>   我们的目的是通过 id 为 item1 的便签a取到 class 为 parent1 的ul元素，有以下几种方法： 1、parent([expr]) 取得一个包含着所有匹配元素的唯一父元素的元素集合。 你可以使用可选的表达式来筛选。 代码如下 1.$('#item1').parent().parent('.parent1'); 2、:parent 匹配含有子元素或者文本的元素 代码如下   1.$('li:parent');  3、parents([expr]) 取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。 代码如下  1.$('#items').parents('.parent1'); 4、closest([expr]) closest会首先检查当前元素是否匹配，如果匹配则直接返回元素本身。如果不匹配则向上查找父元素，一层一层往上，直到找到匹配选择器的元素。如果什么都没找到则返回一个空的jQuery对象。 closest和parents的主要区别是：1，前者从当前元素开始匹配寻找，后者从父元素开始匹配寻找；2，前者逐级向上查找，直到发现匹配的元素后 就停止了，后者一直向上查找直到根元素，然后把这些元素放进一个临时集合中，再用给定的选择器表达式去过滤；3，前者返回0或1个元素，后者可能包含0 个，1个，或者多个元素。 closest对于处理事件委派非常有用。 1.$('#items1').closest('.parent1'); from:http://www.cnblogs.com/weixing/archive/2012/03/20/2407618.html

龙生   01 Feb 2016
View Details

jQuery Ajax 简单的实现跨域请求

html 代码清单： <script type="text/javascript" src="http://www.youxiaju.com/js/jquery-1.4.2.min.js"></script> <script type="text/javascript"> $(function(){ $.ajax(     {         type:’get',         url : 'http://www.youxiaju.com/validate.php?loginuser=lee&loginpass=123456',         dataType : 'jsonp',         jsonp:"jsoncallback",         success  : function(data) {             alert("用户名："+ data.user +" 密码："+ data.pass);         },         error : function() {             alert('fail');         }     } ); }) </script> 服务端 validate.php 代码清单： <?php header('Content-Type:text/html;Charset=utf-8'); $arr = array(     "user" => $_GET['loginuser'],     "pass" => $_GET['loginpass'],     "name" => 'response' ); echo $_GET['jsoncallback'] . "(".json_encode($arr).")"; 效果图：   from:http://blog.csdn.net/liruxing1715/article/details/18707605

龙生   06 Jan 2016
View Details

推荐 14 款基于 JavaScript 的数据可视化工具

俗话说，一图胜千言。图形化的信息可以让人们对数据有更加直观清晰的理解，让信息发布者更加高效地展示自己的核心内容。在前端开发中，如果缺少合适 工具，制作数据可视化图表会十分复杂。然而随着数据可视化概念逐年火热，有较多优秀的图表开源库和制作工具脱颖而出。下面，我们就拿其中比较有名的 14个产品进行简要介绍。 AnyChart 链接：http://www.anychart.com/ AnyChart 是基于 Flash/JavaScript(HTML5) 的图表解决方案，它可以轻松地跨浏览器、跨平台工作。除了基础的图表功能外，它还有收费的交互式图表和仪表功能。它可以通过 XML 格式获取数据，该方式让开发人员非常灵活地控制图表上的每一个数据点，而当图表数据点数量偏大时，则可以采用 CSV 数据输入，减小数据文件大小和图表加载时间。 amCharts 链接：http://www.oschina.net/p/amcharts amCharts 是一款高级图表库，致力于对 Web 上的数据可视化提供支持。它所支持的图表包括柱状图、条状图、线图、蜡烛图、饼图、雷达、极坐标图、散点图、燃烧图和金字塔图等等。amCharts 库是一款完全独立的类库，在应用中不依赖任何其他第三方类库，就可直接编译运行。除了提供最基本的规范要素外，amCharts 还提供了交互特性。用户在浏览基于 amCharts 制作的图表时，用鼠标 hover 图表内容，可以与其进行交互，使图表展示细节信息，其中呈现信息的容器被叫做 Balloon（气球）。除此之外图表可以动态动画的形式被绘制出来，带来了了非常好的展示效果。 Cesium 链接：http://www.oschina.net/p/cesiumjs Cesium 同样专注于地理数据可视化，它是一个 Javascript 库，可以在 Web 浏览器中绘制 3D/2D 地球。无需任何插件即可基于 WebGL 来进行硬件加速。除此之外，它还有跨平台、跨浏览器的特性。Cesium 本身基于 Apache 开源协议，支持商业及非商业项目。 Chart.js 链接：http://www.oschina.net/p/chartjs Chart.js 是一个简单、面向对象，为设计和开发者准备的图表绘制工具库。它提供了六种基础图表类型。基于 Html5，响应式，支持所有现代浏览器。同时它不依赖任何外部工具库，本身轻量级，且支持模块化，即开发者可以拆分 Chart.js 仅引入自己需要的部分进入工程。在小巧的身段中它同时支持可交互图表。 Chartist.js 链接：http://www.oschina.net/p/chartist-js Chartist.js 是一个非常简单而且实用的 JavaScript 图表生成工具，它支持 SVG 格式，图表数据转换灵活，同时也支持多种图表展现形式。在工程中，Chartist.js 的 CSS 和 JavaScript 分离，因此代码比较简洁，在应用时配置流程十分简单。它生成的是响应式图表，可以自动支持不同的浏览器尺寸和分辨率，更多的是，它也支持自定义 SASS 架构。 D3 链接：http://www.oschina.net/p/d3 2011年，Mike Bostock、Vadim Ogievetsky 和 Jeff Heer 发布了 D3，它是目前 Web 端评价最高的 Javascript 可视化工具库。D3 能够向用户提供大量线性图和条形图之外的复杂图表样式，例如 Voronoi 图、树形图、圆形集群和单词云等等。它的优点是实例丰富，易于实现调试数据同时能够通过扩展实现任何想到的数据可视化效果，缺点是学习门槛比较高。与 jQuery 类似，D3 直接对 DOM 进行操作，这是它与其它可视化工具的主要区别所在：它会设置单独的对象以及功能集，并通过标准 API 进行 DOM […]

龙生   28 Dec 2015
View Details

javascript:history.go()和History.back()的区别

<input type=button value=刷新 onclick="window.location.reload()"> <input type=button value=前进 onclick="window.history.go(1)"> <input type=button value=后退 onclick="window.history.go(-1)"> <input type=button value=前进 onclick="window.history.forward()"> <input type=button value=后退 onclick="window.history.back()"> 后退+刷新<input type=button value=后退 onclick="window.history.go(-1);window.location.reload()">在C# Web程序中，如为页面按钮写返回上一页代码 this.RegisterClientScriptBlock("E", "<script language=javascript>history.go(-2);</script>"); 其中，history.go(-2)，要写为-2，因在按钮事件触发前，已刷新一次页面，所以应是-2。 Response.Write("<script language=javascript>history.go(-2);</script>"); 此处也要写为“-2”。跟直接写脚本的有所不同。history.back()是会上一页 i=1 history.go(i)去指定的某页 如果是history.go(0)那就是刷新这两个属于JS代码，相当于IE的前进、后退功能。 具体的用处就要看什么时候需要这个就用上。比如用户注册时的验证是后台验证，不符合要求的时候就可以用这个，可以最大限度保证用户少重复输入数据。 例如：载入页面： function onLoadPage(){ if(event.srcElement.tagName=="SPAN"){ oFrame=top.window.middle.frames[2]; oTxt=event.srcElement.innerText; switch(oTxt){ case "前 进": oFrame.history.go(1); case "后 退": oFrame.history.back(); case "刷 新": oFrame.location.reload(); } } } 打开一个jsp页面,肯定是用客户端脚本进行刷新了。 Javascript刷新页面的几种方法： 1 history.go(0) 2 location.reload() 3 location=location 4 location.assign(location) 5 document.execCommand('Refresh') 6 window.navigate(location) 7 location.replace(location) 8 document.URL=location.href   from:http://www.mikebai.com/Article/2009-11/757.html

龙生   18 Nov 2015
View Details

JS兼容各个浏览器的本地图片上传即时预览效果

很早以前 在杭州银行工作曾经碰到这么一个需求，当时也是纠结了很久，也是google了很久，没有碰到合适的demo，今天特意研究了下这方面的的问题，所以也就做了个简单的demo来实现 本地上传图片即时预览效果。其在标准浏览器(firefox,chrome，IE10等其他浏览器)用了HTML5中的内容实现图片即时预览效果。在IE10以下浏览器用了滤镜来解决图片显示问题。在看代码之前，先让我们来了解以下知识点： HTML5中的FileReader对象： FileReader对象主要是把文件读入内存中，并且读取文件中数据。目前为止，firefox3.6+ chrome6+ Safari5.2+ Opera11+及IE10浏览器支持FileReader对象。它有以下5种方法： 1. readBinaryString 2. readAsText 3. readAsDataURL  将对象或文件中的数据读取为一串DataURL字符串，就是将数据以一种特殊格式的URL地址形式直接读入页面。 4. readAsArrayBuffer 5. abort. 而我们现在要用的是第三种，所以解释了下，其他的具体可以看相关的资料，这里不多解释。 IE：document.selection    即资料解释如下： selection   对象 代表了当前激活选中区，即高亮文本块，和/或文档中用户可执行某些操作的其它元素。 selection   对象的典型用途是作为用户的输入，以便识别正在对文档的哪一部分正在处理，或者作为某一操作的结果输出给用户。 用户和脚本都可以创建选中区。用户创建选中区的办法是拖曳文档的一部分。脚本创建选中区的办法是在文本区域或类似对象上调用   select   方法。要获取当前选中区，请对   document   对象应用   selection   关键字。要对选中区执行操作，请先用   createRange   方法从选中区创建一个文本区域对象。 一个文档同一时间只能有一个选中区。选中区的类型决定了其中为空或者包含文本和/或元素块。尽管空的选中区不包含任何内容，你仍然可以用它作为文档中的位置标志。 下面是JSFiddle 中的DEMO链接如下： 下面是HTML代码如下：

1
2
3
4
5
6
7
8
<form enctype="multipart/form-data" name="form1">
    <input id="f" type="file" name="f" onchange="change()" />
    <div class="upload">上传图片</div>
    <p>预览:</p>
    <p>
        <img id="preview" alt="" name="pic" />
    </p>
</form>

  JS代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
    function change() {
        var pic = document.getElementById("preview"),
            file = document.getElementById("f");
 
        var ext=file.value.substring(file.value.lastIndexOf(".")+1).toLowerCase();
 
        // gif在IE浏览器暂时无法显示
        if(ext!='png'&&ext!='jpg'&&ext!='jpeg'){
            alert("图片的格式必须为png或者jpg或者jpeg格式！");
            return;
        }
        var isIE = navigator.userAgent.match(/MSIE/)!= null,
            isIE6 = navigator.userAgent.match(/MSIE 6.0/)!= null;
 
        if(isIE) {
            file.select();
            var reallocalpath = document.selection.createRange().text;
 
            // IE6浏览器设置img的src为本地路径可以直接显示图片
            if (isIE6) {
                pic.src = reallocalpath;
            }else {
                // 非IE6版本的IE由于安全问题直接设置img的src无法显示本地图片，但是可以通过滤镜来实现
                pic.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod='image',src=\"" + reallocalpath + "\")";
 
                // 设置img的src为base64编码的透明图片 取消显示浏览器默认图片
                pic.src = 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
            }
        }else {
            html5Reader(file);
        }
    }
 
    function html5Reader(file){
        var file = file.files[0];
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function(e){
            var pic = document.getElementById("preview");
            pic.src=this.result;
        }
    }

  from:http://www.2cto.com/kf/201402/281430.html

龙生   16 Nov 2015
View Details

HTML5 基础知识，第 3 部分: HTML5 API 的强大功能

什么是 API？ 应用程序编程接口 是编程指令集合和访问软件应用程序的标准。通过一个 API，您可以利用 API 提供的服务设计出强大的产品。 HTML5 提供了一些新的 API。例如： 用于渲染图形或其他可视图像的新 canvas 元素所使用的 2D 绘图 API 支持离线 Web 应用程序的缓存 API 使用新 video 和 audio 元素来播放视频和音频的 API 支持浏览历史访问和添加页面的历史 API draggable 属性支持的拖放 API contenteditable 属性支持的编辑 API 使用 JavaScript API 进行键-值对存储的客户端存储及嵌入式 SQL 数据库 本文主要关注于两个 API：Geolocation 和 Web Worker。首先，本文将分析 API；然后，再创建一个使用这两种 API 的页面。 商机无处不在：Geolocation 您可以使用 Geolocation API 来确定和分享地理位置。这个 API 会返回经度和纬度坐标 — 企业可以利用这些信息向这个坐标附近的区域提供服务。这些服务一般指的是基于位置的服务 (LBS)。 LBS 指的是用于确定所监控设备的物理位置的地理数据源，因此也可以确定该位置的人们。这个功能最有趣的地方是它使人们能够围绕某些关注的地理位置点周围的市场进行交互。 企业实际上是为客户创造优质、实用的服务和价值，同时为利益干系人、债权人、股东、员工和供应商创造经济和财务效益。由 Geolocation 支持的 LBS 能够使用非浏览器设备或浏览器来简化对货物或人的追踪和监控。在商业应用上，地理位置指的是利用地理信息来确定人或事的位置，然后将这些信息销售给任何需要使用这些信息的人， 他们可能利用这个位置信息来进行社交活动、商业应用或其他用途，前提是这些信息的拥有者已经授权使用这些信息。 如何获取地理信息 Geolocation API 是基于新增加的全局对象 navigator：navigator.geolocation。JavaScript 对象 navigator 包含了很有用的有关访问者的浏览器和系统的信息。Geolocation 可以使用 IP 地址、基于 Web 的数据库、无线网络连接和三角测量或 GPS 技术来确定经度和纬度。一定要注意 Geolocation 所提供信息的精确性会由于获取信息的方式不同而有所差别。有时候，您可能无法精确地读取某些位置的地理信息，甚至完全无法读取。 脚本可以使用 navigator.geolocation 对象来确定用户所使用设备的位置信息。在获得了位置信息之后，脚本会基于所获得的数据创建和生成一个位置对象。 navigator.geolocation 对象具有 […]

龙生   15 Nov 2015
View Details

HTML5 基础知识，第 4 部分: 最后的完善

HTML5 作者集设计者和开发者于一身，他们的主要任务就是构建高效的丰富 Internet 应用程序 (RIA)，尤其是富 UI。我所说的高效 是指进行系统的、全面的改进，以数字的方式为站点所有者、所有者代理和站点使用者之间的对话提供便利。 RIA 是满足用户体验的本源和工具，因此也是任何以网络为中心的成功企业的关键组成部分。实质上，以网络为中心的活动在某种程度上是协作性的活动。当机构想在各个级别（包括市场营销和管理）上取得成功时，实现数字协作的成功方法至关重要。站点的成功主要取决于站点满足访问用户的质量要求的效率。 如您所见，HTML5 是专门为实现具有跨平台功能、融合电信、统一语言、广泛计算和开源系统的协作式 “网络世界” 而量身定制的。本系列的前 3 篇文章主要关注语义、适合的编码方法、输入在关键转换过程中所扮演的角色以及站点管理的最佳实践，所有这些都是为创建有组织的、符合逻辑的 RIA 打下基础。贯穿每篇文章共同线索是丰富用户体验的创建和管理对于实现站点所有者的代理目标的重要性。HTML5 Canvas 在开发高效 RIA 的过程中扮演重要角色。 常用缩略语 2D：二维 Ajax：异步 JavaScript + XML API：应用编程接口 HTML：超文本标记语言 HTML5：HTML 版本 5 UI：用户界面 什么是 Canvas？ HTML5 Canvas 是一个极其有用的绘制和动画元素。Canvas 使用 JavaScript 直接在页面上绘制图形。Canvas 能够定义和控制矩形区域，并允许以动态方式或通过脚本呈现 2D 形状和位图。 对于生成能够增强 UI、图表、相册、图形、动画和嵌入式绘制应用程序的出色视觉材料而言，HTML5 Canvas 非常完美。Canvas 元素可以通过几种方法来绘制路径、矩形、圆形和字符。 Canvas 坐标 在画布上进行绘制的前提条件是熟悉网格和坐标空间。空间区域的长度和宽度的单位为像素。用户可以围绕 x 和 y 坐标构建画布。当坐标为x=0, y=0 时，画布位于左上角。 矩形画布区域的默认宽度为 300 像素，高度为 150 像素，但您可以通过修改这两个属性来获得所需的画布大小。图 1 显示了如何实现 x 和 y 坐标。 图 1. 画布坐标 图 1 显示了长宽都为 100 像素的画布区域： 左上角的坐标为 x=0, y=0。 x 值在水平方向增加，而 y 值在垂直方向增加。 右下角的坐标为 x=100, y=100。 中心点的坐标为 […]

龙生   15 Nov 2015
View Details
1 … 22 23 24 … 37

Copyright © 2025 Longsheng All rights reserved