这节讲canvas的画线。
0)基本结构先写好
-
- var myCanvas = document.getElementById("myCanvas");
- var context = myCanvas.getContext("2d");
- script>
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 到第一个点。
下面利用上面的知识画一个三角形
-
- 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>
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边型
-
- var myCanvas = document.getElementById("myCanvas");
- var context = myCanvas.getContext("2d");
- function drawPath(x, y, n, r)
- {
- var i,ang;
- ang = Math.PI*2/n //旋转的角度
- context.save();//保存状态
- context.fillStyle ='rgba(255,0,0,.3)';//填充红色,半透明
- context.strokeStyle ='hsl(120,50%,50%)';//填充绿色
- context.lineWidth = 1;//设置线宽
- context.translate(x, y);//原点移到x,y处,即要画的多边形中心
- context.moveTo(0, -r);//据中心r距离处画点
- context.beginPath();
- for(i = 0;i < n; i ++)
- {
- context.rotate(ang)//旋转
- context.lineTo(0, -r);//据中心r距离处连线
- }
- context.closePath();
- context.stroke();
- context.fill();
- context.restore();//返回原始状态
- }
- drawPath(100, 100, 5, 40)//在100,100处画一个半径为40的五边形
- drawPath(200, 100, 3, 40)//在200,100处画一个半径为40的三角形
- drawPath(300, 100, 7, 40)//在300,100处画一个半径为40的七边形
- drawPath(100, 200, 15, 40)//在100,200处画一个半径为40的十五边形
- drawPath(200, 200, 4, 40)//在100,200处画一个半径为40的四边形
- script>