Canvas画线实例.docxVIP

!DOCTYPE html?html??head???meta charset=gbk???titleCanvas画线技巧/title??/head?body???canvas id = myCanvasCanvas画线技巧/canvas???script????var myCanvas = document.getElementById(myCanvas);????var context = myCanvas.getContext(2d);???/script?/body/html1、为线条选上你喜欢的颜色?//可以选用CSS颜色字符串（rgb，rgba，hsl，hsla），只有CSS3以上有opacity属性????context.strokeStyle = rgba(0,0,0,0.5)? context.fillStyle = #FF0000//设置填充颜色?? 提示：RGBA是CSS3的新增属性值，就是在传统的RGB基础上增加了一个alpha透明值，代表透明度，值在0~1之间，0为完全透明，1为完全不透明，0.5为半透明。???HSLA（e.g:“hsla(0,50%,50%,0)”）是CSS3的新增属性值，其中H代表色相（值在0~360之间），S和L分别代表饱和度和亮度（值在0%~100%之间）。2、如何画线??之前说过，Canvas是绘制点阵图形的，所以，我们应该使用点阵坐标来确定位置和画图。? context.moveTo(x0, y0);//将画笔移到x0,y0处??context.lineTo(x1, y1);//从x0,y0到x1,y1画一条线??context.lineTo(x2, y2);//从x1,y1到x2,y2画条线??context.fill();//填充??context.stroke();//画线3、路径绘制? context.beginPath() //清空子路径??context.closePath() //闭合路径 ? beginPath——重设绘图上下文的子路径列表，并清空所有的子路径。? closePath——在绘图上下文没有子路径时，什么也不做；否则，它先把最后一个子路径标示为闭合，然后建立一个包含最后子路径的第一个点的子路径，并加入到绘图上下文。??有点拗口，一般可以看为，假如最后一个子路径，我们命名为N，假设N有多个点，则用直线连接N的最后一个点和第一个点，然后关闭此路径和moveTo到第一个点。现在，我们利于已经学到的知识，就可以简单的绘制一个三角形了。(点击看效果）?html??head??/head?body??canvas id = myCanvas width = 500 height = 500Canvas画线技巧/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怎么样？看上去是不是很简单？当然，这只是最基本的Canvas画线技巧，更精彩的还在下面。4、Canvas绘图状态Canvas绘图的时候，每个上下文都包含一个绘图状态的堆，绘图状态包含下列内容：（1）当前的transformation matrix；（2）当前的clipping region ；（3）当前的属性值：fillStyle, font, globalAlpha, globalCompositeOperation, lineCap, lineJoin, lineWidth, miterLimit, shadowBlur, shadowColor, shadowOffsetX, shadowOffsetY, strokeStyle, textAlign, textBaseline?context.restore() //弹出堆最上面保存的绘图状态?con