Canvas:绘制文本

Canvas除了能绘制图片之外,还有绘制文本的基本功能,如填充和描边,向Canvas放置文本信息,以及一些其他控制文本布局的方法,如环形文本等。

在Canvas中的CanvasRenderingContext2D对象中提供了填充和描边两种文本绘制方法:

-fillText(text,x,y,maxWidth):绘制填充文本
-strokeText(text,x,y,maxWidth):绘制描边文本

然后Canvas可以设置类似于CSS的一些属性,比如:

-fillStyle/strokeText = value:填充/描边颜色
-font = value:字体大小、样式,类似cssfont
-textAlign = value:文本对齐方式,类似于csstext-align
-textBaseline = value:文本基线对齐设置
-direction = value:文本方向设置

除此之外还提供了一个measureText(text)的测量方法,用来测量文本的宽度;
返回数据:TextMetrics {width: xxxx}

CSS设计指南笔记(3)

一.盒模型

所谓盒模型,就是浏览器为页面中每个HTML元素生成的矩形盒子。这些盒子们都要按照可见版式模型(visual formatting model)在页面上排布。可见的页面版式主要由三个属性控制:
position属性:控制页面上元素之间的位置关系。
display属性:控制元素是堆叠,并排还是根本不在页面显示。
float属性:提供控制的方式,以便把元素组成成多栏布局。

二.浮动与清除

浮动,意思就是把元素从常规文档流中拿出来。一是可以实现传统出版物上那种文字绕排图片的效果,二是可以让原来上下堆叠的块级元素,变成左右并列,从而实现布局中的分栏。
浮动元素脱离了常规文档流后,原来紧跟其后的元素就会在空间允许的情况下,向上提升到与浮动元素平起平坐。

CSS设计指南笔记(2)

一.层叠

层叠,就是层叠样式表中的层叠,是CSS的核心机制,是一种样式在文档层次中逐层叠加的过程,目的是让浏览器面对某个标签特定属性值的多个来源,确定最终使用哪个值。

1.浏览器层叠各个来源样式的顺序

浏览器默认样式表>用户样式表>作者链接样式表>作者嵌入样式>作者行内样式(这个顺序也就是样式的优先级吧)

CSS设计指南笔记(1)

一.CSS基本概念

当元素的同一个样式属性有多种样式值的时候,css就要靠层机制来决定最终应用哪种样式。
CSS(Cascading Style Sheets),也叫层叠样式表,就是一种先选定html元素,然后给该元素设定css属性的一种机制。css选择符和要应用的样式构成一条css规则。

二.给文档添加样式的三种方法

1.写在元素标签里(也叫行内样式)
2.写在<style>标签里(也叫嵌入样式)
3.写在单独的样式表中(也叫链接样式)

三.CSS规则命名惯例:

CSS规则由选择符和声明组成,选择符用于指出规则所要选择的元素,而声明包括属性和值,属性指规则要改变元素的哪方面的样式,
而值就是属性的一个新状态

jquery设置checkbox为checked状态不改变的解决办法

使用jQuery设置checkbox为选择状态时,我们通常会使用

1
2
3
$(this).attr("checked", true);
//或者
$(this).attr("checked", checked);

但是当你的jquery版本大于1.6的时候,这种只能生效一次,后面你只会看到checkbox的checked属性会增加checked但是现实的状态是没有打钩的。这种情况下你就不能使用$(this).attr(“checked”, checked)这种方法了,需要使用下面的代码:

1
$(this).prop("checked", true);

prop()是jquery1.6以上版本的新方法,为什么会有这个方法呢?

prop和attr的区别

prop(propertyName) —— 获取匹配集合中第一个元素的Property的值
它还有另外几种重构函数,如下:

1
2
3
prop(propertyName, value)
prop(map)
prop(propertyName, function(index, oldPropertyValue))

上面的方法是给匹配元素集合设定一个或多个属性。

关于jQuery1.6和1.6.1中Attributes模块变化的描述,以及.attr()方法和.prop()方法的首选使用,如下所示:

js变量提升

在JS中函数的定义可以分为两种:

  1. 函数声明
    1. 函数表达式

根据你的代码,下面的代码就是函数的声明(当然另外一段代码是函数表达式):
function a (){
alert(123);
}

根据JS中的语法特性(注意哦,是js的语法特点,要记住):
在javascript函数体内(执行作用域)声明的变量,无论在函数体何处声明,它将都会被提升到函数的顶部,我们称这种现象为变量提升。 函数呢,它也有这种特性,即无论在函数体何处声明另一个函数,它将都会被提升到函数的顶部。只是采用函数表达式和函数声明所体现的函数提升的内容是有差别的:函数表达式和变量提升类似,只会提升函数的变量,不提升函数的定义;而函数声明提升时,不仅仅会提升函数的声明,函数的定义也会被提升

根据以上特性,你的代码在执行时,

jQuery编写插件

如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了。至于使用jquery好处这里就不再赘述了,用过的都知道。今天我们来讨论下jquery的插件机制,jquery有着成千上万的第三方插件,有时我们写好了一个独立的功能,也想将其与jquery结合起来,可以用jquery链式调用,这就要扩展jquery,写成插件形式了,如下面就是一个简单扩展Jquery对象的demo:

1
2
3
4
5
6
7
8
9
10
11
//sample:扩展jquery对象的方法,bold()用于加粗字体。
(function ($) {
$.fn.extend({
"bold": function () {
///<summary>
/// 加粗字体
///</summary>
return this.css({ fontWeight: "bold" });
}
});
})(jQuery);

调用方式:

这是一个非常简单的扩展。接下来我们一步步来解析上面的代码。

一、jquery的插件机制

为了方便用户创建插件,jquery提供了jQuery.extend()和jQuery.fn.extend()方法。

  1. jQuery.extend() 方法有一个重载。