canvas的学习

canvas的学习

一、 //获取画布
var mycanvasEle = document.getElementById("mycanvas");
二、 //内容
var ctx = mycanvasEle.getContext("2d");
三、矩形
//(x, y, width, heiht)
ctx.rect(200, 200, 100, 100);//生成一个矩形，把矩形加入缓存
//设置颜色
ctx.fillStyle = "gray";
//填充
ctx.fill();//画上去

ctx.rect(50, 50, 100, 100);//把矩形放入缓存
//设置颜色
ctx.strokeStyle = "gray";
//描边
ctx.stroke();//画上去，这个地方画了两个矩形

//创建并画矩形
ctx.fillRect(50, 200, 100, 100);//不会放入缓存
ctx.strokeRect(200, 50, 100, 100);
四、线条
//把笔头挪动到某个位置
ctx.moveTo(100, 20);
//从当前位置画到某个位置
ctx.lineTo(100, 100);
五、画圆
ctx.beginPath();
/*
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
x：圆的中心的 x 坐标。
y：圆的中心的 y 坐标。
r：圆的半径。
sAngle：起始角，以弧度计。（弧的圆形的三点钟位置是 0 度）。
eAngle：结束角，以弧度计。
counterclockwise：可选。规定应该逆时针还是顺时针绘图。False = 顺时针，true = 逆时针。
*/
ctx.arc(100, 100, 20, 0.5 * Math.PI, 2 * Math.PI);
ctx.stroke();
//ctx.fill();//从结束点到起始点全部填满
六、文字
ctx.font = "20px 微软雅黑";
ctx.textBaseline = "top";
ctx.shadowBlur = 10;
ctx.shadowColor="black";
ctx.fillText("阿杰，你好！！", 0, 0);
七、套路
ctx.rect(50, 50, 100, 100);
ctx.arc(50, 50, 50, 0, Math.PI * 2);
ctx.beginPath();//清空缓存的图形（矩形、线条、原型）
ctx.stroke();

ctx.moveTo(50, 150);
ctx.lineTo(50, 250);
ctx.lineTo(100, 250);
ctx.closePath();//回到起点
ctx.stroke();

//套路：一块整体中，先beginPath开头，closePath结束
八、save和restore
ctx.save();//保存当前状态
ctx.rect(100, 100, 100, 100);
ctx.fillStyle = "yellow";//状态1~~~
ctx.translate(100, 100);//状态2~~~
ctx.restore();//回到上一个save的状态
ctx.fill();

//save和restore要搭配使用，不然要出问题
九、对象
举例说明:
<script>
function Student(name, age) {
this.name = name;
this.age = age;
this.rects = [];
this.fillStyle = "yellow";
this.study = function() {
console.info("我叫" + this.name);
}
this.rect = function() {
this.rects[this.rects.length] = "新的矩形";
}
this.fill = function() {
for (var i = 0, len = this.rects.length; i < len; ++i) {
console.info("画" + this.fillStyle + "色的" + this.rects[i]);
}
}
}

var stu = new Student("zhangsan", 18);
stu.study();
stu.rect();//创建矩形
stu.rect();//创建矩形

// console.info(stu.rects);

stu.fill();//画
</script>