有个方法是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. springmvc 使用Jackson框架的配置

    <!--start:使用Jackson 1.x的配置,需要导入的jar包:jackson-core-lpgl-xxx.jar.jackson-mapper-lgpl-xxx.jar --> ...

  2. linux中权限对文件和目录的影响?

    #########  rwx 权限对文件和目录的含义  ############ 代表字符          权限                  对文件的含义               对 目录 ...

  3. 【Deep Learning Nanodegree Foundation笔记】第 1 课:INTRODUCTION Welcome

    Welcome to the Deep Learning Nanodegree Foundations Program! In this lesson, you'll meet your instru ...

  4. 【Qt开发】Qt控件之进度条

    QT 进度条操作实例是本文要介绍的内容,在QT中可以用QProgressBar或着QProgressDialog来实现进度条. QProgressBar的使用   首先在designer中拖一个按钮和 ...

  5. centos7 中如何查看、打开、关闭防火墙。

    首先是看centos7的防火墙的状态,查看的命令为: sudo systemctl status firewalld. 查看后,看到active(running)就意味着防火墙打开了, 如果想关闭防火 ...

  6. MySql数据库优化-汇总

    各位,不喜勿喷,和气生财- 数据库优化,是一种综合性的技术,不是通过某一种方式让数据库效率提高很多,而是通过各个方面的优化,来是数据库效率明显的稳步的提高. 主要包括以下: 1.库表的设计优化(三种范 ...

  7. [BZOJ 1013] [JSOI2008]球形空间产生器

    [BZOJ 1013] [JSOI2008]球形空间产生器 题面 给出一个n维球体上的n+1个点,求球心坐标 分析 设球心坐标为\((x_1,x_2,\dots x_n)\),由于一个球体上的所有点到 ...

  8. numpy-查找操作大全

    本文记录日常工作中遇到的查找操作,持续更新. 注意:输入必须是 数组,不能是 list 极值 min,max 返回极值 argmin(a, axis=None, out=None), 返回极值所在的位 ...

  9. 2018icpc宁夏邀请赛_L_Continuous Intervals

    题意 给定一个序列,定义连续区间为区间的数排序后,任意两个相邻的数之差不超过1. 分析 假设区间最大值为\(max\),最小值为\(min\),不同数个数为\(cnt\),那么问题转化为求满足\(ma ...

  10. 企业面试题|最常问的MySQL面试题集合(三)

    分区表的原理 分库分表的原理 延伸: MySQL的复制原理及负载均衡 分区表的工作原理 对用户而言,分区表是一个独立的逻辑表,但是底层MySQL将其分成了多个物理子表,这对用户来说是透明的,每一个分区 ...