欢迎光临，了解微信小程序开发，就上易用通！

当前位置： 易用通 > 开发文档 > 入门

小程序极速实战开发《二十七》canvas画布API

发布：2018-01-25 16:21浏览： 次来源：网络 作者：tianshu

接口说明:

<canvas />组件只能提供图像显示容器，不具备绘制能力，所以还需要使用脚本来完成实际的绘图任务，交由以下三个canvas API完成。

接口
说明
wx.createContext() 创建并返回绘图上下文context对象
wx.drawCanvas(OBJECT) 绘制画布
wx.canvasToTempFilePath(OBJECT) 把当前canvas上的内容保存为图片

wx.createContext()创建并返回一个context上下文对象，用于记录绘制操作，并返回actions数组，交给wx.drawCanvas(OBJECT)绑定<canvas />组件，并将actions绘制在<canvas />组件上；如果想将图像保存为图片，调用wx.canvasToTempFilePath(OBJECT)接口。

 

接口用法：
  • wx.drawCanvas绘制接口

参数
类型
说明
canvasId String 画布标识，传入<canvas />的canvas-id
actions Array 绘图动作数组，由 wx.createContext 创建的 context，调用 getActions 方法导出绘图动作数组。
reserve Boolean 本次绘制是否接着上一次绘制，即reserve参数为false，则在本次调用drawCanvas绘制之前native层应先清空画布再继续绘制；若reserver参数为true，则保留当前画布上的内容，本次调用drawCanvas绘制的内容覆盖在上面，默认 false

 

wxml

  1. <canvas canvas-id="canvas" ></canvas>

js

  1. var context = wx.createContext()
  2. wx.drawCanvas({
  3.     canvasId: 'canvas',
  4.     actions: context.getActions()
  5. })

  • wx.createContext接口返回对象的方法列表：

方法
说明
getActions 返回绘制操作记录actions数组
clearActions 清空context绘制操作记录
scale 横纵坐标会被缩放
rotate 以原点为中心，顺时针旋转当前坐标轴
translate 对当前坐标系的原点(0, 0)进行变换，默认的坐标系原点为页面左上角。
save 保存当前坐标轴的缩放、旋转、平移信息
restore 恢复之前保存过的坐标轴的缩放、旋转、平移信息
clearRect 在给定的矩形区域内，清除画布上的像素
fillText 在画布上绘制被填充的文本
drawImage 在画布上绘制图像
fill 对当前路径进行填充
stroke 对当前路径进行描边
beginPath 开始一个路径
closePath 关闭一个路径
moveTo 把路径移动到画布中的指定点，但不创建线条
lineTo 添加一个新点，然后在画布中创建从该点到最后指定点的线条
rect 添加一个矩形路径到当前路径
arc 添加一个弧形路径到当前路径，顺时针绘制
quadraticCurveTo 创建二次方贝塞尔曲线
bezierCurveTo 创建三次方贝塞尔曲线
setFillStyle 设置填充样式
setStrokeStyle 设置线条样式
setGlobalAlpha 设置全局画笔透明度
setShadow 设置阴影
setFontSize 设置字体大小
setLineCap 设置线条端点的样式
setLineJoin 设置两线相交处的样式
setLineWidth 设置线条宽度
setMiterLimit 设置最大倾斜

canvas缩放、旋转、平移



小程序极速实战开发《二十七》canvas画布API(图1)



wxml

 

  1. <canvas canvas-id="canvas_scale"></canvas>
  2. <canvas canvas-id="canvas_rotate"></canvas>
  3. <canvas canvas-id="canvas_translate"></canvas>

js

  1. onReady:function(){
  2.     var context = wx.createContext()
  3.     context.rect(5, 5, 30, 30)
  4.     context.stroke()
  5.     //缩放
  6.     context.scale(2,2)
  7.     context.stroke()
  8.     context.scale(2,2)
  9.     context.stroke()
  10.     wx.drawCanvas({
  11.       canvasId: 'canvas_scale',
  12.       actions: context.getActions()
  13.     })
  14.     context.clearActions()
  15.     context.rect(30, 30, 100, 100)
  16.     context.stroke()
  17.     //旋转
  18.     context.rotate(0.15)
  19.     context.stroke()
  20.     wx.drawCanvas({
  21.       canvasId: 'canvas_rotate',
  22.       actions: context.getActions()
  23.     })
  24.     context.clearActions()
  25.     context.rect(30, 30, 100, 100)
  26.     context.stroke()
  27.     //平移
  28.     context.translate(10, 10)
  29.     context.stroke()
  30.      wx.drawCanvas({
  31.       canvasId: 'canvas_translate',
  32.       actions: context.getActions()
  33.     })
  34.   }

wxss

  1. canvas{
  2.     border: 1px solid #E0E0E0;
  3.     margin-top: 10px;
  4. }

canvas绘制

小程序极速实战开发《二十七》canvas画布API(图2)



wxml

 

  1. <canvas canvas-id="canvas1"></canvas>
  2. <canvas canvas-id="canvas2"></canvas>

js

  1. onReady:function(){
  2.     var context = wx.createContext()
  3.     context.rect(15, 15, 100, 100)
  4.     context.fill()
  5.     context.stroke()
  6.     //清除指定范内的像素
  7.     context.clearRect(25, 25, 80, 80)
  8.     //显示文字
  9.     context.fillText('Text', 40, 40)
  10.     wx.drawCanvas({
  11.         canvasId: 'canvas1',
  12.         actions: context.getActions()
  13.     })
  14.     context.clearActions()
  15.     //显示图片
  16.     wx.chooseImage({
  17.       success: function(res) {
  18.         context.drawImage(res.tempFilePaths[0], 0, 0)
  19.         wx.drawCanvas({
  20.           canvasId: 'canvas2',
  21.           actions: context.getActions()
  22.         })
  23.       }
  24.     })
  25.   }

wxss

  1. canvas{
  2.     border: 1px solid lightgray;
  3.     margin-top: 10px;
  4. }

canvas路径

小程序极速实战开发《二十七》canvas画布API(图3)



wxml

 

  1. <canvas canvas-id="canvas1"></canvas>

js

  1. onReady:function(){
  2.     // 使用 wx.createContext 获取绘图上下文 context
  3.     var context = wx.createContext()
  4.     context.setStrokeStyle("#00ff00")
  5.     context.setLineWidth(5)
  6.     context.rect(0, 0, 200, 200)
  7.     context.stroke()
  8.     context.setStrokeStyle("#ff0000")
  9.     context.setLineWidth(2)
  10.     context.moveTo(160, 100)
  11.     context.arc(100, 100, 60, 0, 2 * Math.PI, true)
  12.     context.moveTo(140, 100)
  13.     context.arc(100, 100, 40, 0, Math.PI, false)
  14.     context.moveTo(85, 80)
  15.     context.arc(80, 80, 5, 0, 2 * Math.PI, true)
  16.     context.moveTo(125, 80)
  17.     context.arc(120, 80, 5, 0, 2 * Math.PI, true)
  18.     context.stroke()
  19.     wx.drawCanvas({
  20.       canvasId: 'canvas1',
  21.       actions: context.getActions()
  22.     })
  23.   }
  24.  

wxss

  1. canvas{
  2.     height: 500px;
  3. }

canvas样式

小程序极速实战开发《二十七》canvas画布API(图4)



wxml

 

  1. <canvas canvas-id="canvas1"></canvas>
  2. <button type="default" size="default" bindtap="saveas">另存</button>

js

  1. onReady:function(){
  2.     var context = wx.createContext()
  3.     context.setFillStyle("#FF00FF")
  4.     context.setStrokeStyle("#00FFFF")
  5.     context.setGlobalAlpha(1)
  6.     context.setShadow(10,10,10, '#000000')
  7.     context.setFontSize(18)
  8.     context.setLineWidth(3)
  9.     context.setLineCap('round');
  10.     context.setLineJoin('round')
  11.     context.rect(50, 50, 100, 100)
  12.     context.fill()
  13.     context.stroke()
  14.     wx.drawCanvas({
  15.       canvasId: 'canvas1',
  16.       actions: context.getActions()
  17.     })
  18.   },
  19.   //canvas另存为图片
  20.   saveas: function(e){
  21.     wx.canvasToTempFilePath({
  22.       canvasId: 'canvas1',
  23.       success: function(res){
  24.         console.log(res.tempFilePath)
  25.       }
  26.   }
  27.  





免责声明：本站所有文章和图片均来自用户分享和网络收集，文章和图片版权归原作者及原出处所有，仅供学习与参考，请勿用于商业用途，如果损害了您的权利，请联系网站客服处理。

相关文章
最新文章
推荐文章
随机文章
热门小程序
开发文档 | 运营教程 小程序模板 | 小程序应用 | 标签大全
Copyright © 2017 https://www.yiyongtong.com 易用通 版权所有