挨踢前端 - 博客园

canvas知识点总结

摘要：现把canvas的知识点总结如下，以便随时查阅。1、填充矩形 fillRect(x,y,width,height);2、绘制矩形边框 strokeRect(x,y,width,height);3、擦除矩形 clearRect(x,y,width,height);4、填充样式 fillStyle="red"; 样式可以为颜色、渐变和图像。5、描边样式 strokeStyle="red";6、描边线条的宽度 lineWidth=4;7、线条末端形状 lineCap="butt"; butt(对接)/round(圆)/square(方)，默阅读全文

posted @ 2012-10-18 00:46 挨踢前端阅读(1376) 评论(0) 推荐(0)

HTML5实战——canvas 绘制钟表

摘要：用canvas绘制了一个钟表，废话不多说了，直接上代码吧。效果图如下：canvas钟表如果你看到这段文字，说明你的浏览器弱爆了！阅读全文

posted @ 2012-10-17 17:18 挨踢前端阅读(6584) 评论(7) 推荐(0)

HTML5实战—canvas绘图之贝塞尔曲线

摘要： 1、二次贝塞尔曲线 quadraticCurveTo(cpx,cpy,x,y) //cpx，cpy表示控制点的坐标,x，y表示终点坐标；数学公式表示如下：二次方贝兹曲线的路径由给定点P0、P1、P2的函数B（t）追踪：代码实例：<!DOCTYPE html><html><head><meta charset="utf-8"><title>canvas直线</title><meta name="Keywords" content=""><meta 阅读全文

posted @ 2012-10-15 21:53 挨踢前端阅读(18518) 评论(1) 推荐(4)

canvas画布的宽高应写在<canvas>标签里

摘要：以前用canvas画图时，都是直接在canvas标签里直接写上宽高，没有问题，但也没有探究过为什么宽高要直接写在canvas标签里，因为各个资料的例子上都是这么写的。今天王sir提出了一个问题：如果把宽高写在<style>里，看看会有什么不同。自己试了以下，果然有问题。先看一下代码：<!DOCTYPE html><html><head><meta charset="utf-8"><title>canvas</title><meta name="Keywords" c 阅读全文

posted @ 2012-10-15 14:25 挨踢前端阅读(3509) 评论(1) 推荐(3)

利用Xcode建立PhoneGap应用程序环境

摘要：本文主要介绍在苹果系统上利用Xcode建立PhoneGap应用程序环境和工作流程所需的步骤。1.首先确定你的电脑上有Xcode.2.安装PhoneGap　我现在安装的是phonegap-1.8版本，浏览至已解压缩文件的 lib/ios/ 文件夹，并双击Cordova-1.8.0.dmg包安装程序。这个安装比较简单，直接下一步下一步，知道安装完成。3.在Xcode中创建工程项目（重点）（1）单击Xcode欢迎屏幕上的Create A New Xcode Project（2）在iOS > Application下找到并选中PhoneGap-based Application模板，然后单击Ne 阅读全文

posted @ 2012-10-09 19:43 挨踢前端阅读(8511) 评论(1) 推荐(0)

原生js图片滚动

摘要：在网页中，大图滚动的例子用到可以说非常广泛。以下是学js时，用原生js写的大图滚动的例子，写的例子可能有些简陋，但一般网页中的大致效果是这样的。此例子中，引用了tween算法。这时，可能就有童鞋要说了，大图滚动，我用JQ写，用你四分之一的代码就能搞定了，效果还比你的炫。嗯，我想说：好像是这样吧。一方面，我这里只是介绍一种方法，一种学习过程，如果没有扎实的原生js基础，你对JQ的理解肯定也不会很深刻。只有掌握原生的js,才能在工作中解决更多新问题。另一方面，你确定用JQ写的代码真的比原生js的少吗？难道你引用的JQ就不是代码了，相对于咱这个小例子，JQ的代码其实是非常多的。浏览器... 阅读全文

posted @ 2012-09-23 22:01 挨踢前端阅读(1991) 评论(0) 推荐(0)

优秀的Web开发人员是这样炼成的（share）

摘要：如果你已经是一名优秀的Web开发人员，那请路过即可。如果你还是一个准备入行或刚入行的菜鸟，那本文倒值得一读。要成为一名优秀的Web开发人员，没有捷径可走，本文就是为那些还在苦苦寻找学习目标的人编写的。第一步：学好HTMLHTML(超文本标记语言)是网页的核心，因此你首先应该学好它，不要害怕，HTML很容易学习的，但也很容易误用，学懂容易要学精还得费点功夫，但学好HTML是成为Web开发人员的基本条件。学习资源：HTML Dog (http://htmldog.com/)HTML入门指南 (http://www.w3.org/MarkUp/Guide/)W3C HTML学习教程 (http 阅读全文

posted @ 2012-09-23 21:21 挨踢前端阅读(750) 评论(0) 推荐(1)

JavaScript编程风格（share）

摘要：今天复习了一下javascript方面的一点知识。从文档中发现了这样一篇文章，也不记得当时是从哪下载的了。拿来与大家分享一下，首先向原作者致敬！所谓“编程风格”（programming style），指的是编写代码的样式规则。不同的程序员，往往有不同的编程风格。有人说，编译器的规范叫做“语法规则”（grammar），这是程序员必须遵守的；而编译器忽略的部分，就叫“编程风格”（programming style），这是程序员可以自由选择的。这种说法不完全正确，程序员固然可以自由选择编程风格，但是好的编程风格有助于写出质量更高、错误更少、更易于维护的程序。所以，有一点应该明确，"编程风格阅读全文

posted @ 2012-09-23 20:46 挨踢前端阅读(767) 评论(0) 推荐(2)

this 的使用方法 —— javascript中的this讲解！（share）

摘要：我一同学总结的关于this的用法，个人感觉总结的挺全面的，和大家分享一下。原文：http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201251935720333/从自己刚刚开始学习javascript到现在已经很久了，今天得益于新酱的细心讲解，总算是把this这个“雾中花”看清晰了。在此首先感谢新酱的讲解下面将this的一些基本使用和大家分享一下：查看this指向的一句话法则：永远指向其所在函数的所有者如果没有所有者时，指向window。理解this的要点：关键在于将函数与函数名分开看待。同一个函数，在不同的执行方法下，会有不阅读全文

posted @ 2012-09-23 20:05 挨踢前端阅读(1419) 评论(0) 推荐(0)

常见浏览器的兼容问题

摘要：初学html和css时，每天切图，总会遇到很多浏览器兼容性问题。最近一直关注移动平台开发，就html和css来说，不用考虑那么多浏览器兼容性问题。到现在，以至于很多浏览器兼容性几乎忘光了。今天把以前总结的知识拿来分享一下，顺便自己也复习一下。当然，其中肯定有很多不足，望指正啊。1 ie6.0横向... 阅读全文

posted @ 2012-09-23 19:36 挨踢前端阅读(30811) 评论(3) 推荐(14)

JavaScript框架是什么（share）

摘要：刚初学js时，总会听到关于框架的一些事情。等学完JQ后我才知道什么是框架。一下是转载的一篇文章，希望对还迷茫的童鞋们有点帮助。【转自】http://www.ibm.com/developerworks/cn/web/wa-jsframeworks/什么是 JavaScript 框架？JavaScript 本身就是一种功能强大的语言，您不需要额外的框架就可创建富互联网应用程序（RIA）。然而使用 JavaScript 并不是件容易的事，主要是由于支持多个 Web 浏览器产生的复杂性。与 HTML 和 CSS一样，不同的浏览器有不同的 JavaScript 实现。让 JavaScript 代码实现阅读全文

posted @ 2012-09-23 19:07 挨踢前端阅读(5381) 评论(0) 推荐(0)

css3属性 -webkit-filter

摘要： -webkit-filter是css3的一个属性，Webkit率先支持了这几个功能，感觉效果很不错。下面咱们就学习一下filter这个属性吧。现在规范中支持的效果有：grayscale 灰度值为0-1之间的小数sepia 褐色值为0-1之间的小数saturate 饱和度值为numhue-rotate 色相旋转值为angleinvert 反色值为0-1之间的小数opacity 透明度值为0-1之间的小数brightness 亮度值为0-1之间的小数contrast 对比度值为numblur 模糊 ... 阅读全文

posted @ 2012-09-20 00:53 挨踢前端阅读(16197) 评论(0) 推荐(4)

ie6下浮动使绝对定位元素莫名消失的问题

摘要：这是我以前博客里写的东西，现在搬过来和大家分享一下！逐步解决遇到的各种bug，是web前端开发者逐步成长的过程！今天在做项目时，遇到了ie6下绝对定位元素莫名消失的问题，在此写个简单的例子说明一下此类问题的解决办法。如果我们想得到如下效果该怎么办呢？1 首先是基本的布局，此处不细说了。如果我们想让最外面的框具有可扩展性，即红色的框不设置高度，我们该怎么办呢？通常我们有一下几个办法来解决浮动子标签自动撑开父标签高度的问题：a 在子标签最后加一个清浮动的div{}。b 父标签css样式添加{overflow：hidden；}。d 给父标签设置float属性。（如果父标签浮动了，可能对布局有影响，阅读全文

posted @ 2012-09-04 17:04 挨踢前端阅读(3508) 评论(1) 推荐(0)

css3实践—创建3D立方体

摘要：要想实现3D的效果，其实非常简单，只需指定一个元素为容器并设置transform-style：preserve-3d，那么它的后代元素便会有3D效果。不过有很多需要注意的地方，这里把我学习的方法，过程分享给大家。再讲知识点之前，还是先弄清楚3D的坐标系吧，从网上搜了一张经典坐标系图，供大家回顾一下。1、3D试图 transform-style：flat(默认，二维效果) / preserve-3d(三维效果)。设置一个元素的transform-style:preserve-3d；只影响这个元素的子元素(如果孙元素也有3d效果，那么还必须给子元素设置preserve-3d)。这样所有子元素... 阅读全文

posted @ 2012-08-30 16:29 挨踢前端阅读(20196) 评论(3) 推荐(6)

css3 transform属性及其二维变换矩阵

摘要： transform属性实现了一些可用SVG（可缩放矢量图形）实现的同样的功能。它可用于内联(inline)元素和块级(block)元素。它允许我们旋转、缩放和移动元素，并且该元素下的所有子元素随着参数的设置旋转、缩放和移动。(1) rotate(旋转)，1个参数，参数是度数。允许你通过传递一个度数值来转动一个对象；其值可取正、负。正值代表顺时针旋转,负值代表逆时针旋转。例如：rotate(20deg) 顺时针旋转20度。rotateX(旋转),1个参数，参数是度数。沿X轴旋转。rotateY(旋转),1个参数，参数是度数。沿X轴旋转。 div { transform: rotate(. 阅读全文

posted @ 2012-08-27 18:35 挨踢前端阅读(2597) 评论(0) 推荐(0)

原生js--放大镜效果

摘要：在淘宝上购物时，总会看到类似放大镜的效果。以下为原生js写的一个放大镜效果，其中肯定有很多不足，请大牛们指正，谢啦！我的大体思路是：时时监听鼠标的坐标，当鼠标移动时，透明层随着鼠标移动，大图片相对透明层的移动而移动。不废话了，看代码。 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>放大镜</title> 6 <meta name="Keywords" content="&q 阅读全文

posted @ 2012-08-21 23:43 挨踢前端阅读(6388) 评论(2) 推荐(1)

css、js压缩方法

摘要：在写项目时，为了清晰有条理，css和js会写的很有条理加了很多注释，但当网站上线时，就必须对这些代码进行精简压缩，除去注释和空格，目的是让网页加载速度更快。压缩代码可以使用YUI Compressor等压缩工具，童鞋们可以看看YUI Compressor的使用指南http://www.36ria.com/3948，个人感觉不错。后续：现在很多在线的压缩软件很多，google下“js压缩”，就会找到很多，这更快捷点吧。 js、css压缩工具下载：http://pan.baidu.com/share/link?shareid=697922842&uk=688556984 （注：选中. 阅读全文

posted @ 2012-08-21 15:59 挨踢前端阅读(2299) 评论(2) 推荐(0)

如何检测当前浏览器的类型及版本

摘要： 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>判断浏览器类型及版本</title> 6 <meta name="Keywords" content=""> 7 <meta name="author" content="@my_programmer"> 8 <script src="http:/ 阅读全文

posted @ 2012-08-20 22:24 挨踢前端阅读(2034) 评论(3) 推荐(1)

javascript测试题总结

摘要： 1.js的几种数据类型？判断基本数据类型的操作符是什么？　答案：Number,String,bool,undefined,obejct(此处为null类型属于object，所以此处写object) typeof2.列举你知道的JS浏览器兼容问题。　(1)ie不支持ClassName取标签，非ie支持　(2)获取非ie窗口的scrolltop值通过document.body.scrollTop 获取ie窗口的scrolltop值通过document.documentElement.scrollTop　(3)通过childNodes获取子节点，ie不能取到回车节点，非ie可以。　(4)... 阅读全文

posted @ 2012-08-20 21:39 挨踢前端阅读(3283) 评论(1) 推荐(0)

博客开园

摘要：在web这条路上走的越远越发现，知识点的繁多凌乱，越来越感受的及时总结的重要性。自己是一个不善于整理归纳的人，导致自己的知识体系越来越臃肿，很没有条理性，知识遗忘的很多。以此博客来记录自己web路上的点滴知识和经验。阅读全文

posted @ 2012-08-20 14:56 挨踢前端阅读(231) 评论(2) 推荐(0)

Hello World

公告

导航