有个方法是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. pytest -- 测试的参数化

    目录 1. @pytest.mark.parametrize标记 1.1. empty_parameter_set_mark选项 1.2. 多个标记组合 1.3. 标记测试模块 2. pytest_g ...

  2. 奉献pytorch 搭建 CNN 卷积神经网络训练图像识别的模型,配合numpy 和matplotlib 一起使用调用 cuda GPU进行加速训练

    1.Torch构建简单的模型 # coding:utf-8 import torch class Net(torch.nn.Module): def __init__(self,img_rgb=3,i ...

  3. PMP项目正常估算时间

    最佳时间段+正常时间段*+最差时间段)/=正常估算时间. 项目经理小李对某活动工期进行估算时,发现人员的熟练程度和设备供应是否及时对工期至关重要.如果形成最有利组合时,预计17天可以完成:如果形成最不 ...

  4. Spring(四)--bean的属性赋值

    bean的属性赋值 1.需要的实体类 2.需要的配置文件 <?xml version="1.0" encoding="UTF-8"?> <be ...

  5. 140. 后缀数组(hash + 二分 / 后缀数组)

    题目链接 : https://www.acwing.com/problem/content/description/142/ Hash + 二分 #include <bits/stdc++.h& ...

  6. java实现spark常用算子之cogroup

    import org.apache.spark.SparkConf;import org.apache.spark.api.java.JavaPairRDD;import org.apache.spa ...

  7. 如何把maven文件pom.xml中的java包下载下来

    右击pom.xml文件,选择Run As-->Maven build- 在打开的页面中,如图输入"dependency:copy-dependencies",后点击" ...

  8. js 判断图片是否存在

    有的时候  虽然图片的路径是正确的 但是有可能由于某些原因  导致图裂了 或者网络加载失败   那这样的应该怎么判断呢? 如下: function isHasImg(pathImg){ var Img ...

  9. 手把手教你上传文件到GitHub上(已获取ssh密钥)

    如何提交一个文件到GitHub(已经生成ssh key) 1.新建一个文件夹,当作本地仓库 2.初始化仓库 $git init 3.将想要上传的东西复制到仓库中 4.将文件提交到暂存区 $git ad ...

  10. day04-jQuery

    jQ宗旨:write less do more jq是js的框架,底层封装了js代码. jq引入: <script type="text/javascript" src=&q ...