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

      2020-09-17 04:34      HTML5

您所在的位置:

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

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

绘图是每个移动应用必备的技术,基本上和Android,IOS,等移动开发都是相同的,创建个上下文,给你个画布再上画,官网给的小例子都比较全了自己去看吧,drawImage时没有反应不知道是BUG还是电脑不能测试待定,

屏幕就像是数学上的坐标轴,且在第四象限,以屏幕左上角为圆点,X轴向右为正向左为负,Y轴向下为正向上为负(这点和数学上相反的)以圆点为基点画个距离圆点上下50宽高100的矩形来演示canvas基本用法

微信小程序这里提供了两个API

绘图中可以进行变形,绘制,路径,样式,这些个东西有点多官网有例子,这里通过一个例子引入

wxml

<!--画布 canvas-id为画布标识,当绘制时通过canvas-id找到画布 --><canvascanvas-id="identify"/>

js

Page({ data:{ text:"Pagecanvas" }, onLoad:function(options){ //页面初始化options为页面跳转所带来的参数 }, onReady:function(){ //页面渲染完成 //第一步创建个上下文容器 varcontext=wx.createContext();//第二步绘制这里我们绘制个矩形 //x,y,widht,height context.rect(50,50,100,100);//绘制的样式进行描边绘制,fill为填充位置 context.stroke();/** *调用wx.drawCanvas,通过canvasId指定在哪张画布上绘制,通过actions指定绘制行为 * *注意convasId可以为数字表示也可以用字符串表示,就是一个绘制对象的标识,并且可以指定多个 *actions是从context上下文中获取的绘制行为,即为第二步操作 */ wx.drawCanvas({//画布标识,传入<canvas/>的cavas-id canvasId:'identify',//获取绘制行为,就相当于你想做到菜context.getActions()就是食材 actions:context.getActions(), })}, onShow:function(){ //页面显示 }, onHide:function(){ //页面隐藏 }, onUnload:function(){ //页面关闭 } })

  下面就跟大家推荐一个有趣好玩的微信小程序:嗨图

  嗨图功能

  1、专题——DIY图片的模板,点击可以生成使用,分享到朋友圈。

  2、分享墙——用户上传的自己DIY作品。

  3、立即制作——可以用自己的图来DIY。

  4、告诉我——告诉产品的改进,内容的增加。

  想要体验怎么制作属于自己个性朋友圈照片的用户,扫一扫下面的二维码就可以啦!还等什么,赶紧扫码体验,开启你的嗨图之旅吧!


猜你喜欢

微信小程序相关教程

微信小程序相关新闻

相关下载

推荐阅读

热门软件热门关键字