微信小程序開發(fā)(七)

1、精品文檔微信小程序開發(fā) ( 七)第七章繪圖 API第 1節(jié):繪圖內(nèi)容 :1. 矩形 :+矩形 (路徑 )Ctx.rect(x1,y1,x2,y2)+矩形 (內(nèi)實 )Ctx.fillRect(x1,y1,x2,y2)+矩形 (內(nèi)空 )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)+路徑

2、 (關閉 )Ctx.closePath()3. 圓弧 :。1歡迎下載精品文檔+畫弧Ctx.arc(x,y,r,startAngle,endAngle)4. 文字 :+寫字Ctx.fillText(text ,x,y)5. 圖片 :+圖片Ctx.drawImage(img,x,y)第 2節(jié):繪圖設置 :1. 漸變 :+漸變 (線型 )Ctx.createLinearGradient(x1,y1,x2,y3)+漸變 (中心 )Ctx.createCircularGradient(x,y,r)+漸變 (實例 )Var ctx=wx.createCanvasContext(“myCanvas”);Va

3、r 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. 內(nèi)邊外 :內(nèi): 填充樣式 ; 邊 : 邊框樣式 ; 外: 陰影樣式。2歡迎下載精品文檔+樣式 (填充 )Ctx.setFillStyle(style)+樣式 (邊框 )Ctx.setStrokeStyle(style)+樣式 (陰影 )Ctx.setShadow(offsetX,offsetY,blur

4、,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歡迎下載精品文檔第 3節(jié):繪圖變形 :1. 縮放 :+縮放Ctx.sca

5、le(w,h)2. 旋轉 :+旋轉Ctx.rotate(x,y)3. 位移 :+位移Ctx.tanslate(x,y)第 4節(jié):小程序級 :1. 創(chuàng)建畫布+創(chuàng)建畫布 (常規(guī) )wx.createCanvasContentText(canvas-id)+創(chuàng)建畫布 (舍棄 )wx.createContentText(canvas-id)2. 輸出圖片+輸出圖片wx.canasToTempFilePath(path)。4歡迎下載精品文檔第 5節(jié):畫布級 :1. 繪制 :+繪制Ctx.draw()2. 保存與恢復 :+保存Ctx.save()+恢復Ctx.restore()3. 清除繪圖 :+清除Ctx.cl