微信小程序开发 (七 ) 第七章绘图API
第 1 节:绘图内容 :
1.矩形 :
+矩形(路径)
Ctx.rect(x1,y1,x2,y2)
+矩形(内实)
Ctx.fillRect(x1,y1,x2,y2)
+矩形(内空)
2.路径 :
+路径(开始)
Ctx.beginPath()
+路径(填充)
Ctx.fill()
+路径(描边)
Ctx.stroke()
+路径(移点)
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”);
2.内边外 :
内 :填充样式 ;边 :边框样式 ;外:阴影样式
+样式(填充)
Ctx.setFillStyle(style)
+样式(边框)
Ctx.setStrokeStyle(style) 3.线
+线样式 (粗细 )
Ctx.setLineWidth(width)
+线样式 (端点 )
Ctx.setLineCap(“round” ) +线样式 (交接 )
4.文本 :
+文本(字号)
Ctx.setFontSize(size)
5.全局 :
+透明度 (全局 )
第 3 节:绘图变形 : 1.缩放 :
+缩放
2.旋转 :
+旋转
3.位移 :
+位移
第 4 节:小程序级 : 1.创建画布
+创建画布 (常规 )
wx.createCanvasContentText(canvas-id) +创建画布 (舍弃 )
2.输出图片
+输出图片
wx.canasToTempFilePath(path)
第 5 节:画布级 :
1.绘制 :
+绘制
Ctx.draw()
2.保存与恢复 :
+保存
Ctx.save()
3.清除绘图 :
+清除
Ctx.clearAction()。