有个方法是toDataURL(),原生的,先转换成图片再绘制。

但是pixi提供了一个BaseTexture,其构造函数的参数可以是一个canvas

因此可以直接使用如下代码绘制canvas

//微信共享canvas
let openDataContext = wx.getOpenDataContext();
let scanvas = openDataContext.canvas;
let btexture = new PIXI.BaseTexture(scanvas);
let sprite = new PIXI.Sprite(new PIXI.Texture(btexture));
sprite.x = game.stageCenterX;
sprite.y = game.stageCenterY;
sprite.anchor.set(0.5);
sprite.scale.set(1.5);
this.addChild(sprite);

微信小游戏开放作用域无法将数据传给主域,可以先在共享canvas绘制排行榜,再将共享canvas绘制到主canvas上,既可以添加事件,又可以用PIXI的交互。

PIXI如何绘制离屏canvas到舞台上的更多相关文章

  1. 离屏Canvas — 使用Web Worker提高你的Canvas运行速度

    离屏Canvas — 使用Web Worker提高你的Canvas运行速度 原文链接: developers.google.com 现在因为有了离屏Canvas,你可以不用在你的主线程中绘制图像了! ...

  2. 【HTML5 Canvas】计算元件/显示对象经过Matrix变换后在上级/舞台上的bounds(边界矩形rect)

    如上图所示,这样的一个简单矩形,边界矩形是(x:-28, y:-35, width:152, height:128),这是在这个元件/显示对象自己的坐标空间的范围. 那么把这个放到父元件(舞台)中,再 ...

  3. HTML5 Canvas核心技术 图形、动画与游戏开发学习总结

    save 和 restore 函数的应用 保存canvas和恢复canvas clip函数的应用 文字的绘制 背景图片的绘制 离屏canvas 基于时间的运动

  4. html2canvas实现浏览器截图的原理(包含源码分析的通用方法)

    DevUI是一支兼具设计视角和工程视角的团队,服务于华为云DevCloud平台和华为内部数个中后台系统,服务于设计师和前端工程师. 官方网站:devui.design Ng组件库:ng-devui(欢 ...

  5. 利用canvas阴影功能与双线技巧绘制轨道交通大屏项目效果

    利用canvas阴影功能与双线技巧绘制轨道交通大屏项目效果 前言 近日公司接到一个轨道系统的需求,需要将地铁线路及列车实时位置展示在大屏上.既然是大屏项目,那视觉效果当然是第一重点,咱们可以先来看看项 ...

  6. 【带着canvas去流浪(4)】绘制散点图

    目录 一. 任务说明 二. 重点提示 三. 示例代码 四.散点hover交互效果的实现 4.1 基本算法 4.2 参考代码 4.3 Demo中的小问题 示例代码托管在:http://www.githu ...

  7. canvas离屏技术与放大镜实现

    教程所示图片使用的是 github 仓库图片,网速过慢的朋友请移步>>> (原文)canvas 离屏技术与放大镜实现. 更多讨论或者错误提交,也请移步. 利用canvas除了可以实现 ...

  8. 带着canvas去流浪系列之四 绘制散点图

    [摘要] 用原生canvasAPI实现百度Echarts图表 示例代码托管在:http://www.github.com/dashnowords/blogs 一. 任务说明 使用原生canvasAPI ...

  9. canvas——离屏

    离屏操作: 1.创建一个新的离屏canvas; 2.把一些复杂额绘画操作(背景),画在离屏canvas上: 3.将离屏canvas通过drawImage(离屏canvas对象,x1,y1,offcan ...

随机推荐

  1. java:Mybatis框架1(基本配置,log4j,Junit4(单元测试))

    1.mybatis01: db.properties: driver=com.mysql.jdbc.Driver url=jdbc:mysql://localhost:3306/test userna ...

  2. lnmp 环境下 部署 laravel 项目

    出现错误 Warning: require(): open_basedir restriction in effect. File(/xxxx/vendor/autoload.php) is not ...

  3. Unity2D RPG游戏开发日志

    一.游戏构建设计 场景设计:地面的每一层用unity的TiledMap来设计,首先第一层为地面层,也就是地形的大部分区域的图块:第二层为覆盖层,如图中蓝色线圈起来的柱子的上半部分,由于玩家可以在柱子背 ...

  4. python 一周总结

    从7月27前就开始了Djangoj框架的学习到今天一个项目实战已经过了一半了, django给我的感觉就像一个成熟的mov 首先是是数据模型层,Django已经成熟的加入了很多的数据模型供我们所使用 ...

  5. SVM的推导和理解

    主要记录了SVM思想的理解,关键环节的推导过程,主要是作为准备面试的需要. 1.准备知识-点到直线距离 点\(x_0\)到超平面(直线)\(w^Tx+b=0\)的距离,可通过如下公式计算: \[ d ...

  6. centos6/7如何通过命令挑选出IP地址

    ifconfig ens33 |sed -n '2p'|sed 's/^.*intet //;s@ netmask.*$@@  直接挑出IP地址 选择第二行打印, ifconfig ens33|sed ...

  7. tableau单机版安装

    参考: https://help.tableau.com/current/server-linux/zh-cn/requ.htm   先将服务器防火墙80级8850端口打开 临时关闭SELinux/防 ...

  8. zabbix监控大数据

    参考: https://github.com/Staroon/zabbix-hadoop-template 支持监控HDFS.NameNode, YARN ResourceManager, Hive, ...

  9. [转帖]linux /proc目录下的文件为何无法用vi编辑保存

    linux /proc目录下的文件为何无法用vi编辑保存 https://blog.51cto.com/xlogin/1216914 学习一下 之前看过书 这一点 没太仔细看.. xlogin关注8人 ...

  10. thread 多线程2

    ###24.04_多线程(多线程程序实现的方式1)(掌握) * 1.继承Thread * 定义类继承Thread * 重写run方法 * 把新线程要做的事写在run方法中 * 创建线程对象 * 开启新 ...