王志新的博客

微信小游戏canvas画图

王志新 2018-08-09 11:19:22
正文点这评论(0 人参与)
微信小游戏canvas画图

前景:以前开发一直没有用到过canvas,所以对于canvas画图还是小白,在这里记录下微信小游戏canvas的简单操作

小程序遵循js canvas的基本用法,参考文档,传送门

以下只记录下我自己的个人理解,勿喷


//创建canvas对象
var canvas = wx.createCanvas();

//个人理解创建画笔
var canvasText = canvas.getContext('2d');

//开始一个画布中的一条新路径(或者子路径的一个集合)
//个人理解起始标签 类似于 <div>
canvasText.beginPath();

//如果当前子路径是打开的,就关闭它
//跟人理解结束标签 类似于</div>
canvasText.closePath();

//沿着当前路径绘制或画一条直线。
//个人理解 把路径构造好后,路径是不显示的要用该函数将构造的路径画出来才能显示
canvasText.stroke();

//设置当前位置并开始一条新的子路径。
//个人理解抬起你的画笔,重新放置一个起始位置
canvasText.moveTo();

//画圆形
//例子:mainText.arc(100, 70, 16, 0, 2 * Math.PI);
canvasText.arc(x, y, radius, startAngle, endAngle, counterclockwise)

注意:微信小游戏 第二次创建画布的时候需要将第二个画布 画到第一块画布上才会显示
微信官方有明确的说明。


下面是我简单的画了一个小人的源代码

WX20180809-111729.png

auto.js.zip


打赏

评论

评论
搜索
网站分类
最近发表
  • mac系统VirtualBox + Vagrant + 宝塔 Linux虚拟开发环境
  • Mac系统VirtualBox中CentOS启用共享文件夹
  • centos虚拟机配置静态IP网络
  • ssh远程连接服务器异常修复(WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED!)
  • vsCode+Homestead开启xdebug调试
  • PHP Laravel Homestead安装
  • php+Xunsearch中文检索
  • array_filter()
  • array_fill_keys()
  • array_fill()
  • 常用工具
    软件下载
    友情链接

    X
    我知道了