html5 canvas (三)

这节讲canvas的画线。
0）基本结构先写好

<html>
<body>
<canvas id = "myCanvas">你的浏览器不支持canvas!</canvas>
<script>
var myCanvas = document.getElementById("myCanvas");
var context = myCanvas.getContext("2d");
</script>
</body>
</html>

1）首先设置线条颜色

context.strokeStyle = "rgba(0,0,0,.2)"//可以使用css颜色字串（rgb,rgba,hsl,hsla）
context.fillStyle = "#ff9966"//设置填充颜色//和上面一样

RGBA就是传统的RGB多了个alpha值，代表透明度（值在0~1之间，0为完全透明，1为完全不透明）
HSLA（e.g:“hsla(0,50%,50%,0)”）是css3中新增的，其中H代表色相（值在0~360之间），S和L分别代表饱和度和亮度（值在0%~100%之间）

2）画线方法

context.moveTo(x0, y0);//画笔移到x0,y0处
context.moveTo(x1, y1);//从x0,y0到x1,y1画条线
context.moveTo(x2, y2);//从x1,y1到x2,y2画条线
context.fill();//填充形状
context.stroke();//画线

3）绘制路径

context . beginPath() //清空子路径
context . closePath() //闭合路径

beginPath 方法重设绘图上下文的子路径列表，并清空所有的子路径。
closePath 方法在绘图上下文如果没有子路径时，什么也不做；否则，
它先把最后一个子路径标示为闭合，然后建立一个包含最后子路径的第一个
点的子路径，并加入到绘图上下文。有点拗口，其一般可以看为，假如最后
一个子路径，我们命名为 spN，假设 spN 有多个点，则用直线连接 spN 的最
后一个点和第一个点，然后关闭此路径和 moveTo 到第一个点。
下面利用上面的知识画一个三角形

<html>
<body>
<canvas id = "myCanvas" width = '500' height = '500'>你的浏览器不支持canvas!</canvas>
<script>
var myCanvas = document.getElementById("myCanvas");
var context = myCanvas.getContext("2d");
context.fillStyle ='rgba(255,0,0,.3)';//填充颜色：红色，半透明
context.strokeStyle ='hsl(120,50%,50%)';//线条颜色：绿色
context.lineWidth = 13;//设置线宽
context.beginPath();
context.moveTo(200,100);
context.lineTo(100,200);
context.lineTo(300,200);
context.closePath();//可以把这句注释掉再运行比较下不同
context.stroke();//画线框
context.fill();//填充颜色
</script>
</body>
</html>

4）canvas的状态
每个上下文都包含一个绘图状态的堆，绘图状态包含下列内容：
当前的 transformation matrix.
当前的 clipping region
当前的属性值：fillStyle, font, globalAlpha,
globalCompositeOperation, lineCap, lineJoin,
lineWidth, miterLimit, shadowBlur, shadowColor,
shadowOffsetX, shadowOffsetY, strokeStyle, textAlign,
textBaseline