Canvas

//绘制图
drawImage
例子：
// 二维码

wx.downloadFile({
  url: "http://192.168.0.133/immages/wechat.gif",
  success: function (res) {
    if (res.statusCode === 200) {
      ctx.drawImage(res.tempFilePath, winW-90, winH-90, 80, 80)
    }
  }
})

//绘制字
font
setTextBaseline
setTextAlign
fillStyle
fillText
例子：

ctx.font = "16px sans-serif";
ctx.setTextBaseline("top");
ctx.setTextAlign("left");　　　　　　　　//(left,center,right是根据x轴定义的)
ctx.fillStyle = '#fff';
let fontHeight = 90
ctx.fillText('我在加里顿', winW - 200, fontHeight, 60);

beginPath
开始创建一个路径。需要调用 fill 或者 stroke 才会使用路径进行填充或描边
clostPath
关闭一个路径。会连接起点和终点。如果关闭路径后没有调用 fill 或者 stroke 并开启了新的路径，那之前的路径将不会被渲染。

其他方法：
setFontSize
strokeText(fillText)

setShadow
shadowBlur
shadowColor
shadowOffsetX
shadowOffsetY

// 开始绘制
ctx.draw()

1.绘制线

ctx.beginPath()　　　　　//创建新路径
ctx.moveTo(10, 10)
ctx.lineTo(100, 10)
ctx.lineTo(100, 100)
ctx.closePath()   　　　　 //关闭路径后没有调用 fill 或者 stroke 并开启了新的路径，那之前的路径将不会被渲染
ctx.stroke()

2.绘制圆(实心或空心圆fill() / stroke())

　　arc(number x, number y, number r, number sAngle, number eAngle, number counterclockwise)

3.绘制椭圆等

　　arcTo(number x1, number y1, number x2, number y2, number radius)     ctx.moveTo(20,20); ctx.lineTo(100,20);一起用

4.绘制矩形(实心或空心圆fill() / stroke())

ctx.beginPath()
ctx.setFillStyle(color);
ctx.fillRect(x, y, w, h);
ctx.closePath()

　　

引擎three.js

THREE.WebGLRenderer 参数

---

 

微信小程序canvas绘制流程

// ①.初始化

let ctx = wx.createCanvasContext('id');    // canvas-id

// ②.绘制

ctx.draw();

// ③.保存为临时图片

wx.canvasToTempFilePath

// ④.查看是否授权相册

wx.getSetting  >  if (!res.authSetting['scope.writePhotosAlbum']) > wx.authorize({scope: 'scope.writePhotosAlbum',success (res) { console.log(res) }})

// ⑤.保存到相册

wx.saveImageToPhotosAlbum({})

// 绘制完成
    function endDraw() {
      console.log('真正绘图')
      ctx.draw(true, function (res) {
        console.log(res)
        wx.canvasToTempFilePath({
          // destWidth: 750,
          // destHeight: 2540,
          canvasId: 'shareFri',
          fileType: 'jpg',
          quality: 1,
          success(res) {
            console.log('图片生成成功')
            let canvasPic = res.tempFilePath
            // 查看是否授权相册
            wx.getSetting({
              success: function (res) {
                if (!res.authSetting['scope.writePhotosAlbum']) {
                  wx.authorize({
                    scope: 'scope.writePhotosAlbum',
                    success: function () {
                      console.log('图片授权成功')
                      // console.log(res)
                      wx.saveImageToPhotosAlbum({
                        filePath: canvasPic,
                        success: function (result) {
                          // console.log(result)
                          wx.hideLoading()
                          setTimeout(function () {
                            wx.showToast({
                              title: '保存成功'
                            })
                          }, 500)
                        },
                        fail: function () {
                          wx.hideLoading()
                          wx.showModal({
                            title: '保存失败'
                          })
                        }
                      })
                    }
                  })
                } else {
                  wx.saveImageToPhotosAlbum({
                    filePath: canvasPic,
                    success: function (result) {
                      // console.log(result)
                      wx.hideLoading()
                      setTimeout(function () {
                        wx.showToast({
                          title: '保存成功'
                        })
                      }, 500)
                    },
                    fail: function () {
                      wx.hideLoading()
                      wx.showModal({
                        title: '保存失败'
                      })
                    }
                  })
                }
              }
            })
          },
          complete(res) {
            // console.log(res)
          }
        })
      })
    }

　　

 

 

 

 

 

微信小程序封装

①、#字体(换行)

// 对象、字体样式、字体颜色、字体,字体x,y轴，换行宽度、字体对齐方式、字体大小
function fontDraw(obj, sFont, sColor, array, align, fontWidth) {
  obj.font = sFont;
  obj.fillStyle = sColor;
  obj.setTextBaseline("top");
  obj.setTextAlign("left");
  if (fontWidth) {
    obj.setFontSize(fontWidth);
  }
  if (align) {
    obj.setTextAlign(align);
  }
  if (array.length > 120) {
    array.substr(0, 120);
  }
  let aArr = array;

  // 字体换行
  if (aArr[0]) {
    if (typeof aArr[0] == 'string') {
      var chr = aArr[0].split('');
    } else {
      var row = aArr[0];
      obj.fillText(row, aArr[1], aArr[2], aArr[3]);
      return;
    }
  } else {
    return;
  }

  var temp = "";
  var row = [];
  for (let a = 0; a < chr.length; a++) {
    // a的前一个为逗号，后两个为顿号时
    if (chr[a-1] == '，' && chr[a+2] == '、') {
      row.push(temp);
      temp = "";
      a = a + 1 // 去除逗号后面的空格
    } else if (obj.measureText(temp).width < aArr[3]) {
      // 全部字体长度加起来 小于 字体设置宽度 不做字体切割
    } else {
      // console.log(temp);
      row.push(temp);
      temp = "";
    }
    temp += chr[a];
  }

  row.push(temp);
  for (let b = 0; b < row.length; b++) {
    obj.fillText(row[b], aArr[1], aArr[2] + b * 40, aArr[3]);
  }
}    

 

②、#绘制矩形

function rectDraw(obj, color, array, arrayShadow) {
  // obj.beginPath()
  obj.setFillStyle(color);
  if (arrayShadow) {
    obj.setShadow(arrayShadow[0], arrayShadow[1], arrayShadow[2], 
    arrayShadow[3]);
  } else {
    obj.setShadow(0, 0, 0, '#fff');
  }
  obj.fillRect(array[0] * 2, array[1] * 2, array[2] * 2, array[3] * 2);
  // obj.closePath();
  // obj.fill();
}

　　

③、#绘制圆

function circleDraw(obj, color, array, type) {
  if (type == 'stroke') {
    obj.beginPath()
    obj.arc(array[0], array[1], array[2], array[3], array[4])
    obj.setStrokeStyle(color)
    obj.closePath()
    obj.stroke()
  } else {
    obj.beginPath()
    obj.setFillStyle(color)
    obj.setShadow(0, 0, 0, '#fff');
    obj.arc(array[0], array[1], array[2], array[3], array[4])
    obj.closePath()
    obj.fill()
  }
}

　　

④、#绘制直线

function lineDraw(obj, color, array, width) {
  obj.beginPath()
  if (width) {
    obj.setLineWidth(width)
  }
  obj.moveTo(array[0], array[1])
  obj.lineTo(array[2], array[3])
  obj.stroke()
  obj.closePath()
}

　　

 设置阴影影响全局？