微信小程序开发(七).doc

精品微信小程序开发(七)第七章 绘图API第1节:绘图内容:1. 矩形:+矩形(路径)Ctx.rect(x1,y1,x2,y2)+矩形(内实)Ctx.fillRect(x1,y1,x2,y2)+矩形(内空)Ctx.strokeRect(x1,y1,x2,y2)+矩形(清空)Ctx.clearRrct(x1,y1,x2,y2)2. 路径:+路径(开始)Ctx.beginPath()+路径(填充)Ctx.fill()+路径(描边)Ctx.stroke()+路径(移点)Ctx.moveTo(x,y)+路径(连线)Ctx.lineTo(x,y)+路径(关闭)Ctx.closePath()3. 圆弧:+画弧Ctx.arc(x,y,r,startAngle,endAngle)4. 文字:+写字Ctx.fillText(text,x,y)5. 图片:+图片Ctx.drawImage(img,x,y)第2节:绘图设置:1. 渐变:+渐变(线型)Ctx.createLinearGradient(x1,y1,x2,y3)+渐变(中心)Ctx.createCircularGradient(x,y,r)+渐变(实例)Var ctx=wx.createCanvasContext(“myCanvas”);Var grd=ctx.createLinearGradient(0,0,100,0);Grd.addColorStop(0,”red”);Grd.addColorStop(1,“white”);Ctx.setFillStyle(grd);Ctx.fillRect(5,5,120,25);2. 内边外:内:填充样式;边:边框样式;外:阴影样式+样式(填充)Ctx.setFillStyle(style)+样式(边框)Ctx.setStrokeStyle(style)+样式(阴影)Ctx.setShadow(offsetX,offsetY,blur,color)3. 线+线样式(粗细)Ctx.setLineWidth(width)+线样式(端点)Ctx.setLineCap(“round”)+线样式(交接)Ctx.setLineJoin(“round”)+线样式(斜度)Ctx.setMiteLimit(degree)4. 文本:+文本(字号)Ctx.setFontSize(size)+文本(对齐)Ctx.setTextAlign(“center”)5. 全局:+透明度(全局)Ctx.setGlobalAlpha(value)第3节:绘图变形:1. 缩放:+缩放Ctx.scale(w,h)2. 旋转:+旋转Ctx.rotate(x,y)3. 位移:+位移Ctx.tanslate(x,y)第4节:小程序级:1. 创建画布+创建画布(常规)wx.createCanvasContentText(canvas-id)+创建画布(舍弃)wx.createContentText(canvas-id)2. 输出图片+输出图片wx.canasToTempFilePath(path)第5节:画布级:1. 绘制:+绘制Ctx.draw()2. 保存与恢复:+保存Ctx.sav