关键词：
一：什么是Pixi
Pixi是一个超快的2D渲染引擎。它会帮助你用JavaScript或者其他HTML5技术来显示媒体，创建动画或管理交互式图像，从而制作一个游戏或应用。它拥有语义化的，简洁的API接口并且加入了一些非常有用的特性。比如支持纹理贴图集和为精灵（交互式图像）提供了一个简单的动画系统。它也提供了一个完备的场景图，你可以在精灵图层里面创建另一个精灵，当然也可以让精灵响应你的鼠标或触摸事件。最重要的的是，Pixi没有妨碍你的编程方式，你可以自己选择使用多少它的功能，你可以遵循你自己的编码风格，或让Pixi与其他有用的框架无缝集成。
Pixi不仅仅能做游戏 —— 你能用这个技术去创建任何交互式媒体应用
二：安装 Pixi
首先去官网下载 pixi.min.js文件 下载地址
下面就是基本的HTML页面，您可以使用它来链接Pixi并测试它是否正常运行。(这里假设pixi.min.js在一个名为pixi的文件夹中)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<script src="../pixi/pixi.min.js"></script>
<body>
<script type="text/javascript">
let type = "WebGL"
if(!PIXI.utils.isWebGLSupported())
type = "canvas"
PIXI.utils.sayHello(type)
</script>
</body>
</html>如果Pixi链接正确，通常会在浏览器的JavaScript控制台中显示类似于下面的内容。
三：创建一个精灵
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>sprites（精灵）与stage（舞台）</title>
</head>
<script src="../pixi/pixi.min.js"></script>
<body>
</body>
<script>
let app = new Application(
width: 400,
height: 400,
antialiasing: true,
transparent: false,
resolution: 1
);
document.body.appendChild(app.view);
loader
//调用一个add方法来加载数组中的图片
.add('../images/cat.png')
.on("progress", loadProgressHandler)
.load(loadingFinish);
// 每次加载一个文件时，progress事件就会被调用一次
function loadProgressHandler(loader, resource)
console.log("loading: " + resource.url);
console.log("progress: " + loader.progress + "%");
//加载完成回调
function loadingFinish()
console.log("All files loaded");
// 创建一个精灵
let sprite = new Sprite(resources['../images/cat.png'].texture);
sprite.x = 50; //定位 偏移左上角x方向
sprite.y = 50; //定位 偏移左上角y方向
sprite.width = 100; //设置精灵宽度
sprite.height = 100; //设置精灵高度
sprite.scale.set(0.3, 0.3); //scale.set对精灵进行缩放 按顺序会覆盖上面的设置
sprite.rotation = 0.1; // 旋转精灵
// sprite.anchor.set(0.5, 0.5); //更改精灵锚点位置 默认锚点就是精灵的左上角 也就是旋转中心的位置
// sprite.pivot.set(32, 32) //pivot轴心点设置了精灵的原点。 改变一个精灵的原点，你也就改变了它的坐标
app.stage.addChild(sprite);
sprite.visible = true; //使精灵消失的一种更简单、更有效的方法
</script>
</html>但是当你直接运行上面的文件内容时控制台有可能会报下面的错
此时有两个解决方案：
1: 将图片地址换成可以远程访问的图片地址，而不是去本地图片 例如 (注意： 我的图片是放到github上面的访问有可能需要梯子呦)
loader.add('https://raw.githubusercontent.com/zlzbt/Pixi_myFirst/master/images/Doraemon1.jpg').load(setup);2：如果你是用的编辑器是vacode的话 直接在vscode里面下载一个插件即可 Live Server；然后直接找到右下角的 有个 Go live 点击一下就好了,下面就是正常展示的图片
四：总结
具体学习文档请参考 Pixi.js中文网
以及 Pixi学习demo
解决image在canvas以及audiovideo在audiocontext下跨域问题(代码片段)
媒体元素嘛，在对应的标签或对象上加上 crossOrigin=‘anonymous‘即可。例如Image在canvas上绘制时会跨域：<imgcrossOrigin="anonymous"src="yourImageurl"></img>如果并非页面上的元素而是利用Image对象的的话：constimg=newImage();img.crossOr... 查看详情
解决跨域问题以及django中post传递参数错误(代码片段)
...的url来进行相同path的处理，揭示了前后端分析的关键点以及跨域解决的本质，即对相同的path进行不同的url的拼接，通过control的控制来调度相同的path。后端通过可以接受的url，来对其进行路由映射2.方法2.1后端解决跨域Django实例... 查看详情
gateway网关(快速入门断言工厂过滤器工厂全局过滤器)，解决跨域问题(代码片段)
...，属于响应式编程的实现，具备更好的性能。2.gateway快速入门演示下网关的基本路由 查看详情
项目出现跨域问题，如何解决(代码片段)
现象昨天在做下载图片的时候，出现下图的现象.昨天在做下载图片的时候，出现下图的现象.后端数据库存储的是图片的url，要根据这个url请求图片服务器得到图片进行下载。为什么会出现跨域？像上面的情况就... 查看详情
ajax基础4--什么是跨域以及如何解决跨域(代码片段)
同源策略和jsonp同源策略(⭐⭐⭐)什么是同源什么是同源策略跨域(⭐⭐⭐)什么是跨域浏览器对跨域请求的拦截如何实现跨域数据请求`JSONP`什么是`JSONP`(⭐⭐⭐)`JSONP`的实现原理(⭐⭐⭐)自己实现一个简单的`JSO... 查看详情
photo-sphere-viewer全景插件解决图片动态路径跨域问题(代码片段)
...但远程动态的话就一直报错。在网上找了很多资料，还是解决不了。最后机缘巧合之下找到了解决方法，差点没哭出来。解决方法： 首先要修改three.js的源码在THREE.ImageLoader.prototype添加im 查看详情
vue-cli以及axios实现跨域访问(代码片段)
...马上就要开始做项目了，最后来解决一下路由的问题以及遇到的问题。 我这次主要解决的就是路由问题，这里推荐的是axios，他可以算一门单独的技术，node里面可以用ng里面也可以用，vue里面更可以用相比vu... 查看详情
springsecurity系列教程解决springsecurity环境中的跨域问题(代码片段)
...中，一一哥给各位讲解了同源策略和跨域问题，以及跨域问题的解决方案，在本篇文章中，我会带大家进行代码实现，看看在SpringSecurity环境中如何解决跨域问题。一.启用SpringSecurity的CORS支持1.创建web接口我先... 查看详情
实习跨域问题(代码片段)
...配置，得以解决。因为涉及公司项目内容就不提背景以及解决方法。借这个机会总结一下这个网络中的“跨域问题”。参考：https://blog.csd 查看详情
h5在canvas中绘制图片时候遇到跨域问题(代码片段)
...过还是绘制失败。经过一波XXX式的试探和查找，找到一个解决方案。在在iis中配置响应头，可能是之前获取图片的时候没有能够通过允许的类型。Access-Control-Allow-Credentials:trueAccess- 查看详情
springboot+mybatis+多数据源入门搭建+跨域集成以及过滤器配置的方式和过滤器加载顺序控制(代码片段)
Springboot+mybatis+多数据源入门搭建+跨域集成以及过滤器配置的方式和过滤器加载顺序控制由于项目需要，最近研究了一下springboot的项目搭建，下面和大家说说项目搭建的心得体会开发环境： JDK1.8 ... 查看详情
项目出现跨域问题，如何解决(代码片段)
...跨资源的引入，比如：script，img,link,iframe如何解决跨域CORS解决跨域CORS是一个W3C标准，全称是“跨域资源共享”（Cross-originresourcesharing）它允许浏览器向跨域服务器，发出XMLHttpRequest请求，从而克服... 查看详情
解决-使用html2canvas截取页面时，页面的div背景图无法截取并跨域(代码片段)
...E_MISS和图片跨域的错误。 使用了useCORS:true后还是无法解决这个问题。于是就自己想办法，既然不同域名下的图片会有跨域问题，那么将图片转成base64后会不会还有跨域 查看详情
ueditor富文本编辑器跨域上传图片解决办法(代码片段)
在使用百度富文本编辑器的过程中,如果是有一台单独的图片服务器就需要将上传的图片内容放到图片服务器,也就是比如在a.com的编辑器上传图片,图片要保存到img.com的跨域上传图片功能,而在ueditor官方文档中说不支持单图上传的... 查看详情
问题：跨域及解决方案(代码片段)
...致css、js或者ajax对后端请求等资源无法访问的情况。要想解决跨域问题，首先先得了解什么是跨域问题。问题：什么是跨域跨越问题是由于浏览器的同源策略，是浏览器强制要求的安全策略，所以想要了解跨域，首先得了解同源... 查看详情
解决跨域session同步问题(代码片段)
跨域来源:(前端站点和后端API布署到不同的站点) 解决方案一.服务端设置1.配置允许跨域请求publicclassBaseAction/***支持跨域请求*@authorfxd*@paramresponse*@sinceJDK1.6*/protectedvoidcrossComain(HttpServletRequestrequest,HttpServletResponserespo 查看详情
zuul+security跨域cors问题解决(代码片段)
...检请求获得的信息来判断，是否接受接下来的实际请求。以及OPTIONS未携带任何权限相关的内容，会被认证拦截，我们也得放开OPTIONS类型请求功能使用Cross解决之前设置很简单，习惯操作把之前的代码复制了过来，第一次操作是... 查看详情
跨域：跨域及解决方法(代码片段)
...转、重定向、表单提交资源嵌入：link、ifram、script、img，以及css样式中的background：url()、@font-face()等外链接脚本请求：js的ajax请求、js或DOM中的跨域操作狭义的跨域：指浏览器同源策略限制的请求注意：并不是所有广义的跨域操... 查看详情