HTML Canvas学习笔记

HTML Canvas学习笔记。

<canvas>
    这里是画布空间。
</canvas>

canvas元素是HTML5新增的一个HTML元素，canvas元素强大的并不在其本身，而是它背后站着的，为它封装好的一系列 javascript API。

就像一幅画，重要的从来就不是承载着画的那张纸，而是画在纸上的浓墨重彩。

如何使用canvas呢？

很简单，只需两步就可以搞定。

一：在HTML中声明一个canvas标签（就像作画之前，先去把纸买回来一样。）

<canvas width="500px" height="500px" id="mycanvas">
    //声明了一个canvas元素
</canvas>

二：利用javascript获取2D渲染上下文（就像准作画之前，先去把笔买回来）。

    $(funtion(){
        var mycanvas=$("#mycanvas");
        var context=mycanvas.get(0).getContext("2D");
})

到了现在，所有东西都准备好了（已经买好纸和笔），接下来就是准备作画！

一幅无论多么复杂的画，它也不是天生就是這样，最初也是在一张白纸上，由画家一笔一画勾画出来。现在，我们就是画家，canvas元素表示的空间就是我们的画纸，而获取到的context就是我们的画笔（因为它是个封装了很多API的对象。）

从這里开始我们就开始学习作为一位画家的基本功。

前提：明白坐标系统。

如图所示，默认情况下，坐标原点（0，0）是在左上角，向右延伸，X轴正数增大。向下延伸，Y轴正数增大。

注意：默认情况下，坐标系统中的每个单位代表的都是一个像素（px），故后面很多都 不用写单位。

1.绘制矩形

context.ract(x,y,width,height)
//绘制矩形
context.fillRect(x,y,width,height)
//绘制“被填充”的矩形。
context.strokeRect(x,y,width,height)
//绘制“未填充”的矩形。

rect：矩形的意思。

X,Y是矩形左上角的坐标，也就是原点，width和height指的便是矩形的宽和高，都是以像素为单位。

1. 绘制路径（通俗点讲就是绘制线条。）

context.beginPath();
context.moveTo(X,Y);
context.lineTO(X,Y);
context.closePath();
context.strck();

以上就是画一条直线的代码了，来逐条解释一下。

context.beginPath();

代表开始画路径了，用人话就是：现在，我准备开始画一条线条，但是哪里开始画呢？

context.moveTo(X,Y);

代表路径的起点，用人话就是：哦，好的，这這个坐标（x,y）开始画，但是到哪里结束了。

context.lineTO(X,Y);

代表路径的终点，用人话就是：嗯，就画到這里结束。
這个可以有多个结束，就会绘制出多边形。

context.closePath();

代表画线条這个动作到这里结束了，这个也可以不写，不写就代表线条不闭合。

注意：以上四条都只是在脑海里设定好起点和终点，还并没有下笔画线。

context.strck();

这就是画线的方法了，没有它，想的再多也不会在纸上落下一个点。

总结：一条直线本身并没有什么神奇，但是无数条直接组合在一起后就可以画出最神奇的图案。

2.1 除了上面画线条的几个方法，以下还有几个和线条有关的方法。

context.fill();
//填充当前的路径，默认颜色是黑色。
context.arc()
//绘制圆，或弧，下面有讲
context.clip()；
从原始画布中任意形状或尺寸，以后再学。

2.2 绘制圆形或圆弧。

context.arc(x,y,r,sAngle,eAngle,counterclockwise)

以上就是画圆。

3 修改样式。

以上学了，画矩形，画直线，画弧，实际上有了上面三个方法已经可以画出大部分的图形。

但是我发现上面所有画法的样式都好丑，颜色都是黑色，宽度也是固定大小。

幸好，API提供了修改样式的方法。

3.1修改颜色样式

contest.fillStyle="color/gadient/pattern"
//设置或返回填充绘画的颜色，渐变，模式。
context.strokeStyle="color/gadient/pattern"
//设置或返回填充绘画的颜色，渐变，模式。

以上两个就是改变填充颜色和线条颜色的方法。

3.2修改线条样式。

context.lineCap="butt/round/square"
context.lineJoin="round/bevel/mitel"
context.lineWidth="以像素为单位的数值"
context.miterLimit="以像素为单位的数值"

3.2.1设置或返回线条末端的线帽。

context.lineCap="butt/round/square"
//设置或返回线条末端线帽的样式。

3.2.2当两条线条相交时，设置或返回线条拐角的样式。

context.lineJoin="round/bevel/mitel"

3.2.3设置或返回线条的宽度。

context.lineWidth="以像素为单位的数值"

4.擦除。
有时候画错了想清除怎么办？撤销代码？找不到代码呢？

是的，可以使用橡皮擦。

context.clearRect(X,Y,width,height);
//这是一个矩形的橡皮擦，X,Y是原点（橡皮擦矩形的左上角），后面两个是橡皮擦大小。

注意：该方法的效果是遮蔽在该矩形范围内的所有像素。
注意：当重新设置一个canvas元素的width和height时，canvas就会完全重置Canvas上的所有内容，包括样式和颜色。

Canvas的一些高级功能。

1.保存和恢复绘图状态。
这里首先要明白一个名词：绘图状态
在画布中，绘图状态是指描述某一时刻2D渲染上下文外观的整套属性，从简单的颜色值到复杂的变换矩阵及其他特性。
用于描述绘图状态的全部属性为：
fillStyle=”“
strokeStyle=”“
lineWidth=
lineCap
lineJoin
miteLimit
变换矩阵
裁剪区域
globalAlpha:透明度
globalCompositeOperation:
shadowOffsetX
shadowOffsetY
shadowBlur
shadowColor
font
textAlign
textBaseline

1.1保存绘图状态

context.save();
//将当前的绘图状态进栈。

绘图状态是保存在绘图状态栈中的。
1.2恢复绘图状态

context.restore();
//让绘图状态栈的栈顶绘图状态出栈。

2.变形

2.1 平移。

context.translate(x,y)

首先要明确一点，平移的是整个画布的原点。

2.2 缩放

context.scale(x,y)；

注意：缩放的是整个画布空间，而不是当个图案。

2.3 旋转

context.rotate(//以弧度为单位);

注意： 旋转是以原点为中心的整张画布的旋转，且单位是弧度，不是角度。

角度和弧度的互换：1度=π/180 弧度。

小技巧：20度=20*Math.PI/180；

2.4 变换矩阵

context.transform(a,b,c,d,e,f);

注意：
（a,d）代表缩放。
（b,c）代表倾斜。
（e,f）代表平移。

context.settransform();
//這个暂时放下。

---

5.合成

5.1 全局阿尔法值globalAlpha=”0~1”

context.globalAlpha="0~1";

简单的说，這个属性影响的是将要绘制对象的透明度。

5.2 合成操作：globalCompositeOperation=”字符串”

context.globalCompositeOperation="字符串"

這个属性的值有很多。

5.3 阴影
阴影主要由下面四个方法设置或返回。

context.shadowBlur=""
context.shadowColor=""
context.shadowOffsetX=""
context.shadowOffsetY=""

5.3.1

context.shadowBlur=模糊级别数
//设置模糊级别数。
例：
context.shadowBlur=20;

context.shadowColor="颜色值"
//设置或返回用于阴影的颜色,通常和**shadowBlur**一起用。
例：
context.shadowColor="red";

context.shadowOffsetX=number
//设置或形状的水平距离，接受正负值。
context.shadowOffsetY=number
//设置或形状的垂直距离，接受正负值。

6. 渐变

6.1 线性渐变

var gradient=context.createLinearGradient(X,Y,X,Y)
//前一个(X,Y)是渐变起点坐标，后一个是渐变终点坐标。
gradient.addColorStop(0,"颜色值")；
//参数第一个值为0，代表渐变的起始颜色。
gradient.addColorStop(1,"颜色值")；
//参数第一个值是1，代表渐变的终点颜色。

context.fillStyle=gradient;
//将渐变赋值给填充样式，那么以后画图形的颜色样式就是该渐变颜色。

7.复杂路径（曲线）