From 697515df27bb2e9b00fcaf20d514f1a894d2c657 Mon Sep 17 00:00:00 2001
From: wuzhihao <wuzhihao@finogeeks.com>
Date: Tue, 7 Dec 2021 10:34:32 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20canvas=20=E6=9B=B4=E6=96=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

feat: 添加 canvas imageData

feat: 完善 canvas api

fix: canvas example api

update: canvas

fix: fillText

feat: add createImage

feat: drawImage createPattern 调整

feat: rotate update

feat: color update

feat: update canvas prop
---
 packageAPI/pages/canvas/canvas.js   | 171 ++++++--
 packageAPI/pages/canvas/canvas.wxml |  47 ++-
 packageAPI/pages/canvas/canvas.wxss |  34 +-
 packageAPI/pages/canvas/example.js  | 615 +++++++++++++++++++++++-----
 pages/component/canvas/canvas.wxml  |  15 +-
 5 files changed, 728 insertions(+), 154 deletions(-)

diff --git a/packageAPI/pages/canvas/canvas.js b/packageAPI/pages/canvas/canvas.js
index c3ba3cb..8cf412c 100644
--- a/packageAPI/pages/canvas/canvas.js
+++ b/packageAPI/pages/canvas/canvas.js
@@ -1,5 +1,14 @@
 const example = require('./example.js')
 
+function randomHexColor() {
+  var r = Math.floor(Math.random() * 256); //随机生成256以内r值
+  var g = Math.floor(Math.random() * 256); //随机生成256以内g值
+  var b = Math.floor(Math.random() * 256); //随机生成256以内b值
+  var alpha = Math.random() * 0.4 + 0.6; //随机生成1以内a值
+  return `rgba(${r},${g},${b},${alpha})`; //返回rgba(r,g,b,a)格式颜色
+
+}
+
 Page({
   onShareAppMessage() {
     return {
@@ -8,53 +17,165 @@ Page({
     }
   },
 
+  log1(e) {
+    console.log('ctx1:', e.type, e)
+  },
+
+  log2(e) {
+    console.log('ctx2:', e.type, e)
+  },
+
   onLoad() {
-    this.context = wx.createContext()
-    console.log('wx.createContext', this.context);
 
     const methods = Object.keys(example)
-    console.log(methods);
     this.setData({
       methods
     })
 
+    // 旧获取 canvas 方式
+    const ctx1 = wx.createCanvasContext('canvas1');
+    console.log('ctx1', ctx1)
+
+    // 新获取 canvas 方式
+    let ctx2
+    let canvas2
+    const query = wx.createSelectorQuery()
+    query.select('#canvas2').fields({ node: true, size: true }).exec((res) => {
+      canvas2 = res[0].node
+      ctx2 = canvas2.getContext('2d')
+
+      // 可以设置 dpr 的值，绘制高分辨率的图
+      const dpr = 1 || wx.getSystemInfoSync().pixelRatio
+      canvas2.width = res[0].width * dpr
+      canvas2.height = res[0].height * dpr
+      console.log('ctx2', ctx2)
+    })
+
+    // fino 基础库兼容新旧写法，两者均可获取到同样的 context
+    // 当 canvas 带 native 时，表示用原生组件
+    // 原生组件下，仅 putImageData 和 getImageData api 会有区别
+
     const that = this
     methods.forEach(function (method) {
       that[method] = function () {
-        // 写法1 官方文档有描述的写法， 微信基础库支持，我们不支持
-        // 
-        console.log('call action', method)
-        const ctx = wx.createCanvasContext('canvas');
-        example[method](ctx)
-        ctx.draw(false, (res) => { console.log(res) });
-        const actions = that.context.getActions()
-        console.log('that.context.getActions()', actions, ctx);
-        
-        // 写法2 更旧版本的写法 微信支持，fino基础库不支持
-        // wx.createContext 和 wx.drawCanvas 疑似已经被从官方基础库文档中移除，但是官方基础库依旧支持
+        console.log("run:", method)
+        let color = null
+        if (method === 'setRandom') {
+          color = randomHexColor()
+        }
+        example[method](ctx1, true, color)
+        // 旧版需要调用 draw 接口
+        ctx1.draw(true, (res) => { console.log('ctx1 draw finish:', res) });
 
-        // example[method](that.context)
-        // const actions = that.context.getActions()
-        // wx.drawCanvas({
-        //   canvasId: 'canvas',
-        //   actions
-        // })
-
-        // 写法3 同层渲染的原生canvas 就没实现
+        example[method](ctx2, false, color, canvas2)
+        try {
+          // 微信新的 canvas 没有 draw 方法，加个报错兼容
+          ctx2.draw(true, (res) => { console.log('ctx2 draw finish:', res) })
+        } catch (err) {
+        }
       }
     })
   },
 
   toTempFilePath() {
     wx.canvasToTempFilePath({
-      canvasId: 'canvas',
+      canvasId: 'canvas1',
       success(res) {
-        console.log(res)
+        console.log('canvas1', res)
       },
 
       fail(res) {
-        console.log(res)
+        console.log('canvas1', res)
       }
     })
+
+    const query = wx.createSelectorQuery()
+    query.select('#canvas2').fields({ node: true, size: true }).exec((res) => {
+      const canvas = res[0].node
+
+      wx.canvasToTempFilePath({
+        canvas,
+        success(res) {
+          console.log('canvas2', res)
+        },
+
+        fail(res) {
+          console.log('canvas2', res)
+        }
+      })
+    })
+  },
+  imageData() {
+
+    // 旧版
+    // 整一个绿色方块
+    const arr = new Array(100 * 100 * 4);
+    for (var i = 0; i < arr.length; i += 4) {
+      arr[i + 0] = 0;
+      arr[i + 1] = 255;
+      arr[i + 2] = 0;
+      arr[i + 3] = 255;
+    }
+    // 把绿色方块画到 0 0 坐标
+    wx.canvasPutImageData({
+      canvasId: 'canvas1',
+      x: 0,
+      y: 0,
+      width: 100,
+      height: 100,
+      data: new Uint8ClampedArray(arr),
+      success(res) {
+        console.log(res)
+      },
+      fail: console.log
+    })
+    // 获取 0 0 坐标，100 * 100 的图
+    wx.canvasGetImageData({
+      canvasId: 'canvas1',
+      x: 50,
+      y: 50,
+      width: 100,
+      height: 100,
+      success(res) {
+        console.log(res)
+        // 把获取到的，画到 200 0 坐标上
+        // 会出现两个绿色方块
+        wx.canvasPutImageData({
+          canvasId: 'canvas1',
+          x: 200,
+          y: 0,
+          width: 100,
+          height: 100,
+          data: res.data,
+          success(res) {
+            console.log(res)
+          },
+          fail: console.log
+        })
+      },
+      fail: console.log
+    })
+
+
+    // 新版
+    const query = wx.createSelectorQuery()
+    query.select('#canvas2').fields({ node: true, size: true }).exec((res) => {
+      const canvas = res[0].node
+      const context = canvas.getContext('2d')
+      // 一个绿色方块数据
+      const imgData = context.createImageData(100, 100);
+      for (var i = 0; i < imgData.data.length; i += 4) {
+        imgData.data[i + 0] = 0;
+        imgData.data[i + 1] = 255;
+        imgData.data[i + 2] = 0;
+        imgData.data[i + 3] = 255;
+      }
+
+      context.putImageData(imgData, 0, 0, 20, 20, 100, 100)
+
+      const image = context.getImageData(50, 50, 100, 100)
+      context.putImageData(image, 200, 0, 20, 20, 100, 100)
+    })
+
   }
 })
diff --git a/packageAPI/pages/canvas/canvas.wxml b/packageAPI/pages/canvas/canvas.wxml
index 7961737..d000dd0 100644
--- a/packageAPI/pages/canvas/canvas.wxml
+++ b/packageAPI/pages/canvas/canvas.wxml
@@ -2,16 +2,47 @@
 <import src="../../common/foot.wxml" />
 
 <view class="container">
-  <template is="head" data="{{title: 'createContext'}}"/>
-  <view>本demo使用官方文档中的CanvasContext的调用方式</view>
+  <template is="head"
+            data="{{title: 'createContext'}}" />
   <view class="page-body">
     <view class="page-section">
-      <canvas class="canvas-element" canvas-id="canvas"></canvas>
-      <scroll-view class="canvas-buttons" scroll-y="true">
-        <button class="canvas-button" bindtap="toTempFilePath">toTempFilePath</button>
-        <block wx:for="{{methods}}" wx:for-item="method">
-          <button class="canvas-button" bindtap="{{method}}" >{{method}}</button>
-        </block>
+      <!-- 旧 canvas 写法 -->
+      <canvas class="canvas-element"
+              style="border: 1rpx solid green;"
+              disable-scroll="{{true}}"
+              bindtouchstart="log1"
+              bindtouchmove="log1"
+              bindtouchend="log1"
+              bindtouchcancel="log1"
+              bindlongtap="log1"
+              binderror="log1"
+              canvas-id="canvas1"></canvas>
+      <!-- 新 canvas 写法 -->
+      <canvas native
+              class="canvas-element"
+              style="border: 1rpx solid rosybrown;"
+              id="canvas2"
+              disable-scroll="{{true}}"
+              bindtouchstart="log2"
+              bindtouchmove="log2"
+              bindtouchend="log2"
+              bindtouchcancel="log2"
+              bindlongtap="log2"
+              binderror="log2"
+              type="2d"></canvas>
+      <scroll-view class="canvas-buttons"
+                   scroll-y="true">
+        <view class="canvas-button-box">
+          <button class="canvas-button"
+                  bindtap="toTempFilePath">toTempFilePath</button>
+          <button class="canvas-button"
+                  bindtap="imageData">imageData</button>
+          <block wx:for="{{methods}}"
+                 wx:for-item="method">
+            <button class="canvas-button"
+                    bindtap="{{method}}">{{method}}</button>
+          </block>
+        </view>
       </scroll-view>
     </view>
   </view>
diff --git a/packageAPI/pages/canvas/canvas.wxss b/packageAPI/pages/canvas/canvas.wxss
index a389d5e..58ff35b 100644
--- a/packageAPI/pages/canvas/canvas.wxss
+++ b/packageAPI/pages/canvas/canvas.wxss
@@ -2,20 +2,32 @@
   display: block;
   margin-bottom: 50px;
 }
+
 .canvas-element {
   width: 100%;
-  height: 250px;
+  height: 200px;
   background-color: #ffffff;
-}
-.canvas-buttons {
-  padding: 15px 25px 5px;
-  width: 100%;
-  height: 330px;
   box-sizing: border-box;
 }
-.canvas-button {
-  float: left;
-  line-height: 2;
-  width: 150px;
-  margin: 8px 11px;
+
+.canvas-buttons {
+  padding: 5px;
+  width: 100%;
+  height: 450px;
+  box-sizing: border-box;
+}
+
+.canvas-button-box {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.canvas-button {
+  flex: 0 1 45% !important;
+  width: 45% !important;
+  line-height: 2;
+  padding: 4rpx;
+  margin: 0 4rpx 4rpx 0 !important;
+  border: 1rpx solid #666;
 }
diff --git a/packageAPI/pages/canvas/example.js b/packageAPI/pages/canvas/example.js
index 88cec11..f74649f 100644
--- a/packageAPI/pages/canvas/example.js
+++ b/packageAPI/pages/canvas/example.js
@@ -1,18 +1,211 @@
 const example = {}
 
-example.measureText = function (context) {
+example.setGreen = function (context, isOld) {
+  example.setRandom(context, isOld, 'green')
+}
+
+example.setRed = function (context, isOld) {
+  example.setRandom(context, isOld, 'red')
+}
+
+// 设置随机颜色
+example.setRandom = function (context, isOld, color) {
+  if (isOld) {
+    context.setFillStyle(color)
+    context.setStrokeStyle(color)
+    context.setFontSize(10)
+    context.setShadow(10, 10, 30, color)
+    context.setLineCap('butt')
+    context.setLineJoin('miter')
+    context.setLineWidth(1)
+    context.setMiterLimit(10)
+  } else {
+    context.fillStyle = color
+    context.strokeStyle = color
+    context.fontSize = 10
+    context.shadowColor = color
+    context.shadowBlur = 30
+    context.shadowOffsetX = 10
+    context.shadowOffsetY = 10
+    context.lineCap = 'butt'
+    context.lineJoin = 'miter'
+    context.lineWidth = 1
+    context.miterLimit = 10
+  }
+}
+
+// 重置颜色
+example.reset = function (context, isOld) {
+  context.beginPath()
+
+  if (isOld) {
+    context.setFillStyle('#000000')
+    context.setStrokeStyle('#000000')
+    context.setFontSize(10)
+    context.setShadow(0, 0, 0, 'rgba(0, 0, 0, 0)')
+    context.setLineCap('butt')
+    context.setLineJoin('miter')
+    context.setLineWidth(1)
+    context.setMiterLimit(10)
+  } else {
+    context.fillStyle = '#000000'
+    context.strokeStyle = '#000000'
+    context.fontSize = 10
+    context.shadowColor = 'rgba(0, 0, 0, 0)'
+    context.shadowBlur = 0
+    context.shadowOffsetX = 0
+    context.shadowOffsetY = 0
+    context.lineCap = 'butt'
+    context.lineJoin = 'miter'
+    context.lineWidth = 1
+    context.miterLimit = 10
+  }
+}
+
+example.transform = function (context, isOld) {
+  context.transform(1, 0, 0, 1, 30, 10)
+}
+
+example.measureText = function (context, isOld) {
   const data = context.measureText('123')
   console.log(`width: ${data.width}`)
 }
 
-example.rotate = function (context) {
+example.arc = function (context, isOld) {
   context.beginPath()
-  context.rotate(10 * Math.PI / 180)
-  context.rect(225, 75, 20, 10)
-  context.fill()
+  context.arc(75, 75, 50, 0, Math.PI * 2, true)
+  context.moveTo(110, 75)
+  context.arc(75, 75, 35, 0, Math.PI, false)
+  context.moveTo(65, 65)
+  context.arc(60, 65, 5, 0, Math.PI * 2, true)
+  context.moveTo(95, 65)
+  context.arc(90, 65, 5, 0, Math.PI * 2, true)
+
+  context.stroke()
 }
 
-example.scale = function (context) {
+example.arcTo = function (context, isOld) {
+  context.beginPath();
+  context.moveTo(20, 20);           // 创建开始点
+  context.lineTo(100, 20);          // 创建水平线
+  context.arcTo(150, 20, 150, 70, 50); // 创建弧
+  context.lineTo(150, 120);
+  context.arcTo(200, 120, 200, 170, 20); // 创建弧
+  context.stroke();
+}
+
+example.beginPath = function (context, isOld) {
+  context.beginPath()
+  context.moveTo(20, 75)
+  context.lineTo(250, 75)
+  context.stroke()
+
+  context.beginPath()
+  context.moveTo(50, 20)
+  context.lineTo(150, 130)
+  context.stroke()
+}
+
+example.bezierCurveTo = function (context, isOld) {
+  context.beginPath()
+  context.moveTo(20, 20)
+  context.bezierCurveTo(20, 100, 200, 100, 200, 20)
+  context.stroke()
+  context.beginPath()
+  context.moveTo(60, 60)
+  context.bezierCurveTo(60, 100, 200, 100, 200, 60)
+  context.stroke()
+}
+
+example.clearRect = function (context, isOld) {
+  context.beginPath()
+  context.rect(0, 0, 300, 150)
+  context.fill()
+  context.clearRect(20, 20, 100, 50)
+}
+
+example.clip = function (context, isOld) {
+  // 剪切矩形区域
+  context.rect(50, 20, 200, 120)
+  context.stroke()
+  context.clip()
+  context.fillRect(0, 0, 150, 100)
+}
+
+example.closePath = function (context, isOld) {
+  context.beginPath()
+  context.moveTo(20, 20)
+  context.lineTo(20, 100)
+  context.lineTo(70, 100)
+  context.closePath()
+  context.stroke()
+
+  context.beginPath()
+  context.moveTo(100, 100)
+  context.lineTo(120, 120)
+  context.lineTo(100, 200)
+  context.closePath()
+  context.stroke()
+}
+
+example.rotate = function (context, isOld) {
+  context.beginPath()
+  context.rotate(10 * Math.PI / 180)
+  context.rect(225, 75, 50, 50)
+  context.fill()
+  context.strokeStyle = 'red'
+  context.rect(225, 75, 50, 50)
+  context.stroke()
+}
+
+example.createCircularGradient = function (context, isOld) {
+  if (isOld) {
+    const grd = context.createCircularGradient(75, 50, 50)
+    grd.addColorStop(0, 'red')
+    grd.addColorStop(1, 'green')
+    context.setFillStyle(grd)
+    context.fillRect(10, 10, 150, 80)
+    context.draw()
+  } else {
+    const grd = context.createRadialGradient(75, 50, 5, 20, 20, 20);
+    grd.addColorStop(0, "red")
+    grd.addColorStop(1, "green")
+    context.fillStyle = grd
+    context.fillRect(10, 10, 150, 80)
+  }
+}
+
+example.createLinearGradient = function (context, isOld) {
+  const grd = context.createLinearGradient(0, 0, 170, 0)
+  grd.addColorStop(0, "black")
+  grd.addColorStop(1, "white")
+  if (isOld) {
+    context.setFillStyle(grd)
+  } else {
+    context.fillStyle = grd
+  }
+  context.fillRect(20, 20, 150, 100)
+}
+
+example.createPattern = function (context, isOld, color, canvas) {
+  if (isOld) {
+    const pat = context.createPattern('../../../image/icon_cloud_HL.png', "repeat")
+    context.setFillStyle(pat)
+    context.rect(0, 0, 150, 100)
+    context.fill()
+  } else {
+    const img = canvas.createImage()
+    img.onload = () => {
+      const pat = context.createPattern(img, "repeat")
+      context.fillStyle = pat
+      context.rect(0, 0, 150, 100)
+      context.fill()
+    }
+    img.src = '../../../image/icon_cloud_HL.png'
+  }
+}
+
+example.scale = function (context, isOld) {
   context.beginPath()
   context.rect(25, 25, 50, 50)
   context.stroke()
@@ -22,50 +215,58 @@ example.scale = function (context) {
   context.beginPath()
   context.rect(25, 25, 50, 50)
   context.stroke()
-}
 
-example.reset = function (context) {
+
+  context.scale(3, 3)
   context.beginPath()
+  context.rect(40, 40, 50, 50)
+  context.stroke()
 
-  context.setFillStyle('#000000')
-  context.setStrokeStyle('#000000')
-  context.setFontSize(10)
 
-  context.setShadow(0, 0, 0, 'rgba(0, 0, 0, 0)')
+  context.scale(1, 1)
 
-  context.setLineCap('butt')
-  context.setLineJoin('miter')
-  context.setLineWidth(1)
-  context.setMiterLimit(10)
 }
 
-example.translate = function (context) {
+example.translate = function (context, isOld) {
   context.beginPath()
   context.rect(10, 10, 100, 50)
   context.fill()
 
   context.translate(70, 70)
+  context.beginPath()
+  context.fill()
+
+  context.translate(120, 120)
 
   context.beginPath()
   context.fill()
 }
 
-example.save = function (context) {
+example.save = function (context, isOld) {
   context.beginPath()
-  context.setStrokeStyle('#00ff00')
+  if (isOld) {
+    context.setStrokeStyle('#00ff00')
+  } else {
+    context.strokeStyle = '#00ff00'
+  }
   context.save()
 
   context.scale(2, 2)
-  context.setStrokeStyle('#ff0000')
+  if (isOld) {
+    context.setStrokeStyle('#ff0000')
+  } else {
+    context.strokeStyle = '#ff0000'
+  }
   context.rect(0, 0, 100, 100)
   context.stroke()
   context.restore()
 
   context.rect(0, 0, 50, 50)
   context.stroke()
+  context.scale(1, 1)
 }
 
-example.restore = function (context) {
+example.restore = function (context, isOld) {
   [3, 2, 1].forEach(function (item) {
     context.beginPath()
     context.save()
@@ -76,27 +277,37 @@ example.restore = function (context) {
   })
 }
 
-example.drawImage = function (context) {
-  context.drawImage('/image/wechat.png', 0, 0)
+example.drawImage = function (context, isOld, color, canvas) {
+  if (isOld) {
+    context.drawImage('/image/wechat.png', 0, 0)
+  } else {
+    const img = canvas.createImage()
+    img.onload = () => {
+      context.drawImage(img, 0, 0)
+    }
+    img.src = '/image/wechat.png'
+  }
 }
 
-example.fillText = function (context) {
-  context.setStrokeStyle('#ff0000')
-
+example.fillText = function (context, isOld) {
   context.beginPath()
   context.moveTo(0, 10)
   context.lineTo(300, 10)
   context.stroke()
 
-  // context.save()
-  // context.scale(1.5, 1.5)
-  // context.translate(20, 20)
-  context.setFontSize(10)
-  context.fillText('Hello World', 0, 30)
-  context.setFontSize(20)
-  context.fillText('Hello World', 100, 30)
 
-  // context.restore()
+  if (isOld) {
+    context.setFontSize(10)
+  } else {
+    context.font = '10px arial'
+  }
+  context.fillText('Hello World', 0, 30)
+  if (isOld) {
+    context.setFontSize(20)
+  } else {
+    context.font = '20px arial'
+  }
+  context.fillText('Hello World', 100, 30)
 
   context.beginPath()
   context.moveTo(0, 30)
@@ -104,160 +315,281 @@ example.fillText = function (context) {
   context.stroke()
 }
 
-example.fill = function (context) {
+example.fill = function (context, isOld) {
   context.beginPath()
   context.rect(20, 20, 150, 100)
-  context.setStrokeStyle('#00ff00')
   context.fill()
 }
 
-example.stroke = function (context) {
+example.stroke = function (context, isOld) {
   context.beginPath()
   context.moveTo(20, 20)
   context.lineTo(20, 100)
   context.lineTo(70, 100)
-  context.setStrokeStyle('#00ff00')
   context.stroke()
 }
 
-example.clearRect = function (context) {
-  context.setFillStyle('#ff0000')
-  context.beginPath()
-  context.rect(0, 0, 300, 150)
-  context.fill()
-  context.clearRect(20, 20, 100, 50)
+example.strokeRect = function (context, isOld) {
+  context.strokeRect(20, 20, 150, 100)
+  context.strokeRect(160, 180, 200, 200)
 }
 
-example.beginPath = function (context) {
-  context.beginPath()
-  context.setLineWidth(5)
-  context.setStrokeStyle('#ff0000')
-  context.moveTo(0, 75)
-  context.lineTo(250, 75)
-  context.stroke()
+example.strokeText = function (context, isOld) {
+  context.font = "20px arial"
+  context.strokeText("Hello World!", 10, 50)
 
-  context.beginPath()
-  context.setStrokeStyle('#0000ff')
-  context.moveTo(50, 0)
-  context.lineTo(150, 130)
-  context.stroke()
+  context.font = "30px arial"
+  // 创建渐变
+  const gradient = context.createLinearGradient(0, 0, 200, 0)
+  gradient.addColorStop("0", "magenta")
+  gradient.addColorStop("0.5", "blue")
+  gradient.addColorStop("1.0", "red")
+  // 用渐变填色
+  if (isOld) {
+    context.setStrokeStyle(gradient)
+  } else {
+    context.strokeStyle = gradient
+  }
+  context.strokeText("finclip", 10, 90)
 }
 
-example.closePath = function (context) {
-  context.beginPath()
-  context.moveTo(20, 20)
-  context.lineTo(20, 100)
-  context.lineTo(70, 100)
-  context.closePath()
-  context.stroke()
-}
 
-example.moveTo = function (context) {
+example.moveTo = function (context, isOld) {
   context.beginPath()
   context.moveTo(0, 0)
   context.lineTo(300, 150)
   context.stroke()
+
+  context.beginPath()
+  context.moveTo(40, 40)
+  context.lineTo(200, 180)
+  context.stroke()
 }
 
-example.lineTo = function (context) {
+example.lineTo = function (context, isOld) {
   context.beginPath()
   context.moveTo(20, 20)
   context.lineTo(20, 100)
   context.lineTo(70, 100)
   context.stroke()
+
+  context.beginPath()
+  context.moveTo(40, 40)
+  context.lineTo(200, 180)
+  context.lineTo(70, 100)
+  context.stroke()
 }
 
-example.rect = function (context) {
+example.rect = function (context, isOld) {
   context.beginPath()
   context.rect(20, 20, 150, 100)
   context.stroke()
-}
 
-example.arc = function (context) {
   context.beginPath()
-  context.arc(75, 75, 50, 0, Math.PI * 2, true)
-  context.moveTo(110, 75)
-  context.arc(75, 75, 35, 0, Math.PI, false)
-  context.moveTo(65, 65)
-  context.arc(60, 65, 5, 0, Math.PI * 2, true)
-  context.moveTo(95, 65)
-  context.arc(90, 65, 5, 0, Math.PI * 2, true)
+  context.rect(40, 40, 180, 100)
   context.stroke()
 }
 
-example.quadraticCurveTo = function (context) {
+example.quadraticCurveTo = function (context, isOld) {
   context.beginPath()
   context.moveTo(20, 20)
   context.quadraticCurveTo(20, 100, 200, 20)
   context.stroke()
-}
 
-example.bezierCurveTo = function (context) {
   context.beginPath()
-  context.moveTo(20, 20)
-  context.bezierCurveTo(20, 100, 200, 100, 200, 20)
+  context.moveTo(60, 60)
+  context.quadraticCurveTo(30, 130, 200, 20)
   context.stroke()
 }
 
-example.setFillStyle = function (context) {
+example.setFillStyle = function (context, isOld) {
   ['#fef957', 'rgb(242,159,63)', 'rgb(242,117,63)', '#e87e51'].forEach(function (item, index) {
-    context.setFillStyle(item)
+    if (isOld) {
+      context.setFillStyle(item)
+    } else {
+      context.fillStyle = item
+    }
     context.beginPath()
     context.rect(0 + 75 * index, 0, 50, 50)
     context.fill()
   })
 }
 
-example.setStrokeStyle = function (context) {
+example.setStrokeStyle = function (context, isOld) {
   ['#fef957', 'rgb(242,159,63)', 'rgb(242,117,63)', '#e87e51'].forEach(function (item, index) {
-    context.setStrokeStyle(item)
+    if (isOld) {
+      context.setStrokeStyle(item)
+    } else {
+      context.strokeStyle = item
+    }
     context.beginPath()
     context.rect(0 + 75 * index, 0, 50, 50)
     context.stroke()
   })
 }
 
-example.setGlobalAlpha = function (context) {
-  context.setFillStyle('#000000');
+
+example.setTextAlign = function (context, isOld) {
+  // 在位置 150 创建蓝线
+  function setTextAlign(text) {
+    if (isOld) {
+      context.setTextAlign(text)
+    } else {
+      context.textAlign = text
+    }
+  }
+  context.moveTo(150, 20)
+  context.lineTo(150, 170)
+  context.stroke()
+
+  context.font = "15px Arial"
+
+  // 显示不同的 textAlign 值
+  setTextAlign("start")
+  context.fillText("textAlign=start", 150, 60)
+  setTextAlign("end")
+  context.fillText("textAlign=end", 150, 80)
+  setTextAlign("left")
+  context.fillText("textAlign=left", 150, 100)
+  setTextAlign("center")
+  context.fillText("textAlign=center", 150, 120)
+  setTextAlign("right")
+  context.fillText("textAlign=right", 150, 140)
+}
+
+example.setTextBaseline = function (context, isOld) {
+  // 在位置 150 创建蓝线
+
+  function setTextBaseline(text) {
+    if (isOld) {
+      context.setTextBaseline(text)
+    } else {
+      context.textBaseline = text
+    }
+  }
+  context.moveTo(5, 100)
+  context.lineTo(395, 100)
+  context.stroke()
+
+  context.font = "20px Arial"
+
+  // 显示不同的 textAlign 值
+  setTextBaseline("top")
+  context.fillText("Top", 5, 100)
+  setTextBaseline("bottom")
+  context.fillText("Bottom", 50, 100)
+  setTextBaseline("middle")
+  context.fillText("Middle", 120, 100)
+  setTextBaseline("alphabetic")
+  context.fillText("Alphabetic", 190, 100)
+  setTextBaseline("hanging")
+  context.fillText("Hanging", 290, 100)
+}
+
+example.setTransform = function (context, isOld) {
+  // 在位置 150 创建蓝线
+
+  context.fillRect(0, 0, 250, 100)
+
+  context.setTransform(1, 0.5, -0.5, 1, 30, 10)
+  if (isOld) {
+    context.setFillStyle('red')
+  } else {
+    context.fillStyle = 'red'
+  }
+  context.fillRect(0, 0, 250, 100);
+
+  context.setTransform(1, 0.5, -0.5, 1, 30, 10)
+  if (isOld) {
+    context.setFillStyle('blue')
+  } else {
+    context.fillStyle = 'blue'
+  }
+  context.fillRect(0, 0, 250, 100)
+}
+
+example.setGlobalAlpha = function (context, isOld) {
   [1, 0.5, 0.1].forEach(function (item, index) {
-    context.setGlobalAlpha(item)
+    try {
+      context.setGlobalAlpha(item)
+    } catch (e) {
+      context.globalAlpha = item
+    }
     context.beginPath()
     context.rect(0 + 75 * index, 0, 50, 50)
     context.fill()
   })
 }
 
-example.setShadow = function (context) {
+example.setShadow = function (context, isOld) {
   context.beginPath()
-  context.setShadow(10, 10, 10, 'rgba(0, 0, 0, 199)')
   context.rect(10, 10, 100, 100)
   context.fill()
+
+  context.beginPath()
+  context.rect(50, 50, 100, 100)
+  context.fill()
 }
 
-example.setFontSize = function (context) {
+example.setFontSize = function (context, isOld) {
   [10, 20, 30, 40].forEach(function (item, index) {
-    context.setFontSize(item)
+    if (isOld) {
+      context.setFontSize(item)
+    } else {
+      context.font = item + 'px arial'
+    }
     context.fillText('Hello, world', 20, 20 + 40 * index)
   })
 }
 
-example.setLineCap = function (context) {
-  context.setLineWidth(10);
+example.setLineCap = function (context, isOld) {
+  context.setLineWidth(10)
+  if (isOld) {
+    context.setLineWidth(10)
+  } else {
+    context.lineWidth = 10
+  }
   ['butt', 'round', 'square'].forEach(function (item, index) {
     context.beginPath()
-    context.setLineCap(item)
+    if (isOld) {
+      context.setLineCap(item)
+    } else {
+      context.lineCap = item
+    }
     context.moveTo(20, 20 + 20 * index)
     context.lineTo(100, 20 + 20 * index)
     context.stroke()
   })
 }
 
-example.setLineJoin = function (context) {
-  context.setLineWidth(10);
+example.setLineDash = function (context, isOld) {
+  context.beginPath()
+  context.setLineDash([5, 15])
+  context.moveTo(0, 50)
+  context.lineTo(300, 50)
+  context.stroke()
+
+  // Solid line
+  context.beginPath()
+  context.setLineDash([])
+  context.moveTo(0, 100)
+  context.lineTo(300, 100)
+  context.stroke()
+}
+
+example.setLineJoin = function (context, isOld) {
+  if (isOld) {
+    context.setLineWidth(10)
+  } else {
+    context.lineWidth = 10
+  }
   ['bevel', 'round', 'miter'].forEach(function (item, index) {
     context.beginPath()
-
-    context.setLineJoin(item)
+    if (isOld) {
+      context.setLineJoin(item)
+    } else {
+      context.lineJoin = item
+    }
     context.moveTo(20 + 80 * index, 20)
     context.lineTo(100 + 80 * index, 50)
     context.lineTo(20 + 80 * index, 100)
@@ -265,22 +597,34 @@ example.setLineJoin = function (context) {
   })
 }
 
-example.setLineWidth = function (context) {
+example.setLineWidth = function (context, isOld) {
   [2, 4, 6, 8, 10].forEach(function (item, index) {
     context.beginPath()
-    context.setLineWidth(item)
+    if (isOld) {
+      context.setLineWidth(item)
+    } else {
+      context.lineWidth = item
+    }
     context.moveTo(20, 20 + 20 * index)
     context.lineTo(100, 20 + 20 * index)
     context.stroke()
   })
 }
 
-example.setMiterLimit = function (context) {
-  context.setLineWidth(4);
+example.setMiterLimit = function (context, isOld) {
 
+  if (isOld) {
+    context.setLineWidth(4)
+  } else {
+    context.lineWidth = 4
+  }
   [2, 4, 6, 8, 10].forEach(function (item, index) {
     context.beginPath()
-    context.setMiterLimit(item)
+    if (isOld) {
+      context.setMiterLimit(item)
+    } else {
+      context.miterLimit = item
+    }
     context.moveTo(20 + 80 * index, 20)
     context.lineTo(100 + 80 * index, 50)
     context.lineTo(20 + 80 * index, 100)
@@ -288,4 +632,67 @@ example.setMiterLimit = function (context) {
   })
 }
 
+example.globalCompositeOperation = function (context, isOld) {
+  if (isOld) {
+    context.setFillStyle('red')
+  } else {
+    context.fillStyle = 'red'
+  }
+  context.fillRect(20, 20, 75, 50)
+  context.globalCompositeOperation = "source-over"
+  if (isOld) {
+    context.setFillStyle('blue')
+  } else {
+    context.fillStyle = 'blue'
+  }
+  context.fillRect(50, 50, 75, 50)
+
+  if (isOld) {
+    context.setFillStyle('red')
+  } else {
+    context.fillStyle = 'red'
+  }
+  context.fillRect(150, 20, 75, 50)
+  context.globalCompositeOperation = "destination-over"
+  if (isOld) {
+    context.setFillStyle('blue')
+  } else {
+    context.fillStyle = 'blue'
+  }
+  context.fillRect(180, 50, 75, 50)
+}
+
+example.createImage = function (context, isOld, color, canvas) {
+  if (isOld) {
+    context.fillText('createImage 不会生效', 20, 20)
+  } else {
+    // 本地路径 1
+    const img = canvas.createImage()
+    img.src = '../../../image/wechat.png'
+    img.onload = () => {
+      context.drawImage(img, 0, 0, 100, 100)
+    }
+
+    wx.getImageInfo({
+      src: 'http://img.daimg.com/uploads/allimg/210526/3-2105261P1490-L.jpg',
+      success(res) {
+        const img = canvas.createImage()
+        img.src = res.path
+        // finfile
+        img.onload = () => {
+          context.drawImage(img, 120, 0, 100, 100)
+        }
+      }
+    })
+
+    // 网络路径
+    const img2 = canvas.createImage()
+    img2.src = 'http://img.daimg.com/uploads/allimg/211113/3-2111131612510-L.jpg'
+    img2.onload = () => {
+      context.drawImage(img2, 240, 0, 100, 100)
+    }
+
+  }
+}
+
 module.exports = example
diff --git a/pages/component/canvas/canvas.wxml b/pages/component/canvas/canvas.wxml
index 85c6ad4..8225ec2 100644
--- a/pages/component/canvas/canvas.wxml
+++ b/pages/component/canvas/canvas.wxml
@@ -2,32 +2,35 @@
 <import src="../../common/foot.wxml" />
 
 <view class="container">
-  <template is="head" data="{{title: 'canvas'}}"/>
+  <template is="head"
+            data="{{title: 'canvas'}}" />
 
   <view class="page-body">
     <view class="page-section page-section-gap">
       <view class="page-section-title">绘制</view>
       <view class="body-view">
-        <canvas canvas-id="canvas" class="canvas"></canvas>
+        <canvas canvas-id="canvas"
+                class="canvas"></canvas>
       </view>
     </view>
 
     <view class="page-section page-section-gap">
       <view class="page-section-title">绘制图片</view>
       <view class="body-view">
-        <canvas canvas-id="canvas2" class="canvas"></canvas>
+        <canvas canvas-id="canvas2"
+                class="canvas"></canvas>
       </view>
     </view>
 
     <view class="page-section page-section-gap">
       <view class="page-section-title">绘制图片-高清</view>
       <view class="body-view">
-        <canvas canvas-id="canvas3" class="canvas" hidpi></canvas>
+        <canvas canvas-id="canvas3"
+                class="canvas"
+                hidpi></canvas>
       </view>
     </view>
   </view>
 
   <template is="foot" />
 </view>
-
-