canvas笔记.doc

画直线 beginPath-----重新开始一条新的路径，当绘制一个封闭的图形中，closePath()写上之后会自动与开始的第一个点进行锚点连接 封闭图形 颜色的填充 注意：如果需要描边，请把填充的代码放到前边，否则会被覆盖边框 写代码的时候把状态放到一起，把绘图放到一起 描边：strokeStyle stroke(); 填充：fillStyle fillel(); 封装自己的矩形方法 效果图 -------当然，绘制矩形没有那么麻烦，有专门的方法 绘制矩形 会调用之前定义过的strokeStyle和fillStyle的属性值 如果发生重叠之后，后面绘制的图形会遮挡掉前面绘制的，重叠模式可以改，后期再讲 封装一个绘制矩形的方法 效果图： 设置直线的属性 Round,butt,square 圆角头 默认 方形头 lineCap只能用与线段的开头和结尾处, 而不是用于连接处 画一个五角星 自己慢慢体会计算的过程 线段连接处的拐角样式 lintJoin=’miter’; //默认值 当lineJoin的值为miter的时候会受到miterLimit的限制，值为整数 miterLimit=20 图形变换和状态设置 context.save(); //保存当前的状态 //独立的图形 context.restore(); //释放设置的状态 如下例子，加上之后，下面的矩形的变换不会收到第一个的影响 旋转，缩放，变换 注意： 1、旋转是弧度，需要转换为弧度(角度/180*π) 2、scale是x轴和y轴的缩放倍数 难点：变换矩阵 Cxt.transform(a,b,c,d,e,f); 参数说明： a，d 水平垂直的缩放倍数 b，c 水平垂直的倾斜 e ，f 水平，垂直的位移 实例： 解决重复变换叠加的问题 setTransform（）； 填充样式 -------线性渐变 fillStyle可以设置渐变色，纯色 var linearGred=context.createLinearGradient(sx,sy,ex,ey); 绘制渐变线 linearGred.addColorStop(stop,color); //第一个参数取值0-1 表示颜色的起止位置0最开始，1为最末端 例子 #f00的渐变开始位置在0，0到200，200的中间开始 ------图片填充 var bg=context.createPattern(image,repeat); //createPattren(image,’no-repeat); 写文字 fillText(“中国”,100,100,100); //x,y,压缩成100像素 采用渐变色去绘制文字 设置文本的对齐方式 textAlign 水平设置 left center right textBaseline 垂直设置 middle top bottom 计算文本的长度像素 var text=cxt.measureText(我们是一个人).width; 绘图高级 绘制阴影 设置所有的图形透明读 层叠顺序的设置 开始绘制的在下面 开始绘制的在下面 另外还有其他 剪辑图形（蒙板）