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

微信小程序开发(七) 第七章 绘图API 第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) 路径: + +路径(开始) Ctx.beginPath() +路径(填充) Ctx.fill() +路径(描边) Ctx.stroke() +路径(移点) Ctx.moveTo(x,y) +路径(连线) Ctx.lineTo(x,y) +路径(关闭) Ctx.closePath() 圆弧: + +画弧 Ctx.arc(x,y,r,startAngle,endAngle) 文字: + +写字 Ctx.fillText(‘text’,x,y) 图片: + +图片 Ctx.drawImage(img,x,y) 第2节:绘图设置: 渐变: + +渐变(线型) 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); 内边外: 内:填充样式;边:边框样式;外:阴影样式 + +样式(填充) Ctx.setFillStyle(style) +样式(边框) Ctx.setStrokeStyle(style) +样式(阴影) Ctx.setShadow(offsetX,offsetY,blur,color) 线 + +线样式(粗细) Ctx.setLineWidth(width) +线样式(端点) Ctx.setLineCap(“round”) +线样式(交接) Ctx.setLineJoin(“round”) +线样式(斜度) Ctx.setMiteLimit(degree) 文本: + +文本(字号) Ctx.setFontSize(size) +文本(对齐) Ctx.setTextAlign(“center”) 全局: + +透明度(全局) Ctx.setGlobalAlpha(value) 第3节:绘图变形: 缩放: + +缩放 Ctx.scale(w,h) 旋转: + +旋转 Ctx.rotate(x,y) 位移: + +位移 Ctx.tanslate(x,y) 第4节:小程序级: 创建画布 + +创建画布(常规) wx.createCanvasContentText(canvas-id) +创建画布(舍弃) wx.createContentText(canvas-id) 输出图片 + +输出图片 wx.canasToTempFilePath(path) 第5节:画布级: 绘制: + +绘制 Ctx.draw() 保存与恢复: + +保存 Ctx.save() +恢复 Ctx.restore() 清除绘图: + +清除 Ctx.clearAction()