canvas 笔记(1)

By hiluluke on

初步

首先需要在html中定义html结构

1
<canvas id="mycanvas" width="600" height="300"></canvas>

然后需要在js上获取canvas和定义动画类型

1
2
var canvas = document.getElementById("mycanvas"); //获取canvas
var context = canvas.getContext("2d");//定义2d动画

然后就可以进行一些绘图操作:

1
2
3
4
5
context.lineWidth = 10;定义线条宽度
context.strokeStyle = "blue";//定义线条样式(颜色)
context.moveTo(50, canvas.height);移动光标
contex.lineTo(x,y)//从光标的位置画一条线到(x,y)
context.stroke()绘图

less note

By hiluluke on

less比较好入门,看了2-3个小时的文档,觉得已经7788了。东西并不是很多。这个笔记比较干,比较精简,建议还是看文档好些,反正不难。

less基础

  • less运行
    其可以在html中嵌入一个less.js文件或则使用node工具lessc,也可以用gulp,grunt在部署之前编译。

lessc

1
sudo npm install -g lessc

然后就可以使用命令行编译less了。

1
lessc test.less test.css

上面代码就会将test.less编译输出在当前目录下test.css。

javascript继承

By hiluluke on

本文主要是自己在阅读javascript高级程序设计之后所做的笔记。

js的继承主要依靠原型链的方式实现,与一般的oo语言有些不一样。

原型链

利用原型让一个引用类型继承另一个引用类型的属性和方法。让原型对象等于另一个类型的实例。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function SuperType(){
this.property = true;
}
SuperType.prototype.getSuperValue = function(){
return this.property;
};
function SubType(){
this.subproperty = false;
}
//继承了 SuperType
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function (){
return this.subproperty;
};
var instance = new SubType();
alert(instance.getSuperValue());//true

gulp note

By hiluluke on

前几天公司一个同事说了gulp用着太爽了,比grunt语法好很多。然后就猴急的尝试了下,并在公司之前的一个项目上做了实验。觉得有下面几点优点:

  • 更像是就是js语法,写起来很顺
  • 代码执行顺序更清晰
  • 代码量更少,主要是因为grunt各种大小括号换行导致其看起来很臃肿。
  • gulp.watch 太好用了。。

当然有几点grunt也是有优点,比如本省就支持在代码上面添加banner,但是gulp需要使用插件。

最后,推荐小伙伴也尝试着去使用gulp。下面是我自己的一些笔记。

gulp常用插件

安装插件和grunt一样就用npm了,不啰嗦。

javascript对象

By hiluluke on

主要是因为再重新读了一遍《javascript高级程序设计》(后文称其为js高)后对js的对象有了进一步认识,所以想写点东西总结下。

js对象基础

理解对象

创建对象的方式有很多种,通常有以下三种:

  • 通过创建一个Object实例然后再添加属性和方法
  • 通过对象字面量的方式的方式:
1
2
3
4
5
6
7
8
var person = {
name: "Nicholas",
age: 29,
job: "Software Engineer",
sayName: function(){
alert(this.name);
}
};
  • 通过函数的方式
1
2
3
4
5
6
7
8
9
10
11
function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.sayName = function(){
alert(this.name);
};
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
}