|
[tr][td]这节讲canvas的画线。
0）基本结构先写好 [*] [*] [*] 你的浏览器不支持canvas! [*] [*] [*] 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 到第一个点。 下面利用上面的知识画一个三角形 [*] [*] [*] 你的浏览器不支持canvas! [*] [*] [*] 4）canvas的状态 每个上下文都包含一个绘图状态的堆，绘图状态包含下列内容： 当前的 transformation matrix. 当前的 clipping region 当前的属性值：fillStyle, font, globalAlpha, globalCompositeOperation, lineCap, lineJoin, lineWidth, miterLimit, shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY, strokeStyle, textAlign, textBaseline [*]context . restore() //弹出堆最上面保存的绘图状态 [*]context.save() //在绘图状态堆上保存当前绘图状态 举一个简单的例子，假如你设置了线条颜色为红色，然后context.save();然后设置线条颜色为绿色，再context.restore()一下，这时线条的颜色实际为红色，所以一般的画图方法是这样的 [*]context.save() ; [*]drawing codes… [*]context.restore(); 5）变换 [*]context.translate(x, y) //移动 Canvas 的原点到x,y处 [*]context.rotate(angle) //按给定的弧度旋转,按顺时针旋转 默认原点是0,0处,如果context.translate(10, 10)，canvas的原点就变成10,10了，rotate时也以10,10为中心旋转 下面利用变换画一个正N边型 [*] [*] [*] 你的浏览器不支持canvas! [*] [*] [*] [/td][/tr] |
|
