锐客网

  1. 首页 > 睿知 > >

微信小程序新手教程之canvas API

睿知

微信小程序新手教程之canvas API，本篇默认已经成功安装微信小程序工具，来和小编一起看看吧

微信小程序新手教程之canvas API

文章插图
绘图是每个移动应用必备的技术，基本上和Android，IOS，等移动开发都是相同的，创建个上下文，给你个画布再上画，给的小例子都比较全了自己去看吧，drawImage时没有反应不知道是BUG还是电脑不能测试待定，http://wxopen.notedown.cn/api/api-canvas.html【微信小程序新手教程之canvas API】屏幕就像是数学上的坐标轴，且在第四象限，以屏幕左上角为圆点，X轴向右为正向左为负，Y轴向下为正向上为负（这点和数学上相反的）以圆点为基点画个距离圆点上下50宽高100的矩形来演示canvas基本用法
微信小程序这里提供了两个API
wx.createContext()创建并返回绘图上下文context对象
getActions获取当前context上存储的绘图动作，对应wx.drawCanvas(object)中的actions
clearActions清空当前的存储绘图动作
wx.drawCanvas(object)绘制
canvasId画布标识，传入的cavas-id，这里的标识可以为Number，也可以是String
actions绘图动作数组，由wx.createContext创建的context，调用getActions方法导出绘图动作数组 。
绘图中可以进行变形，绘制，路径，样式，这些个东西有点多有例子，这里通过一个例子引入
wxml
js
Page({data:{text:"Page canvas"},onLoad:function(options){// 页面初始化 options为页面跳转所带来的参数},onReady:function(){// 页面渲染完成//第一步创建个上下文容器var context = wx.createContext();//第二步绘制这里我们绘制个矩形//x, y, widht, heightcontext.rect(50, 50, 100, 100);//绘制的样式进行描边绘制，fill为填充位置context.stroke();/***调用wx.drawCanvas，通过canvasId指定在哪张画布上绘制，通过actions指定绘制行为**注意convasId可以为数字表示也可以用字符串表示，就是一个绘制对象的标识，并且可以指定多个*actions 是从context上下文中获取的绘制行为，即为第二步操作*/wx.drawCanvas({//画布标识，传入的cavas-idcanvasId: 'identify',//获取绘制行为，就相当于你想做到菜context.getActions()就是食材actions: context.getActions(),})},onShow:function(){// 页面显示},onHide:function(){// 页面隐藏},onUnload:function(){// 页面关闭} })下面就跟大家推荐一个有趣好玩的微信小程序：嗨图
嗨图功能
微信小程序新手教程之canvas API

文章插图
1、专题——DIY图片的模板，点击可以生成使用，分享到朋友圈 。
2、分享墙——用户上传的自己DIY作品 。
3、立即制作——可以用自己的图来DIY 。
4、告诉我——告诉产品的改进，内容的增加 。
想要体验怎么制作属于自己个性朋友圈照片的用户，扫一扫下面的二维码就可以啦!还等什么，赶紧扫码体验，开启你的嗨图之旅吧!

    推荐阅读


    上一篇：不想更新到Win11？微软官方教你阻止升级Win11系统方法

    下一篇：柚子皮泡茶可以降血糖吗