微信小程序开发 (七) 第七章 绘图 API第 1 节:绘图内容 :1. 矩形 :2. 路径 :+矩形(路径)Ctx.rect(x1,y1,x2,y2)+矩形(内实)Ctx.fillRect(x1,y1,x2,y2)+矩形(内空)3. 圆弧 :4. 文字 :5. 图片 :+写字Ctx.fillText(‘text’,x,y)+画弧Ctx.arc(x,y,r,startAngle,endAngle)+路径(开始)Ctx.beginPath()+路径(填充)Ctx.fill()+路径(描边)Ctx.stroke()+路径(移点)第 2 节:绘图设置 :1. 渐变 :2. 内边外 :内:填充样式 ;边:边框样式 ;外:阴影样式+渐变(线型)Ctx.createLinearGradient(x1,y1,x2,y3)+渐变(中心)Ctx.createCircularGradient(x,y,r)+渐变(实例)Var ctx=wx.createCanvasContext(“myCanvas”);+图片Ctx.drawImage(img,x,y)3. 线4. 文本 :5. 全局 :+文本(字号)Ctx.setFontSize(size)+线样式 (粗细 )Ctx.setLineWidth(width)+线样式 (端点 )Ctx.setLineCap(“round”)+线样式 (交接 )+样式(填充)Ctx.setFillStyle(style)+样式(边框)Ctx.setStrokeStyle(style)第 3 节:绘图变形 :1. 缩放 :2. 旋转 :3. 位移 :第 4 节:小程序级 :1. 创建画布+位移+旋转+缩放+透明度 (全局 )2. 输出图片第 5 节:画布级 :1. 绘制 :2. 保存与恢复 :3. 清除绘图 :+保存Ctx.save()+绘制Ctx.draw()+输出图片wx.canasToTempFilePath(path)+创建画布 (常规 )wx.createCanvasContentText(canvas-id)+创建画布 (舍弃 )+清除Ctx.clearAction()
