Javascript 如何将Webgl与#x27；s画布和相位器'；什么是帆布？
我正在webgl环境中开发一个游戏。 基本上，我们将使用Pacer实现游戏，但我们将使用Webgl实现画布的背景。 在本例中，我希望将Pacer的画布与Webgl自己的画布结合起来 webgl通过canvas id='gl canvas'在具有背景的js文件中工作，但Pacer的canvas找不到id，也无法将两者绑定在一起 在这种情况下，如何组合这两种画布 '''Javascript 如何将Webgl与#x27；s画布和相位器'；什么是帆布？,javascript,canvas,Javascript,Canvas,我正在webgl环境中开发一个游戏。 基本上，我们将使用Pacer实现游戏，但我们将使用Webgl实现画布的背景。 在本例中，我希望将Pacer的画布与Webgl自己的画布结合起来 webgl通过canvas id='gl canvas'在具有背景的js文件中工作，但Pacer的canvas找不到id，也无法将两者绑定在一起 在这种情况下，如何组合这两种画布 ''' 属性向量4位置； 属性向量4彩色； 属性向量2定位； 一致向量2解； 可变的vec4颜色； 均匀vec4-vOffset； 均匀
属性向量4位置；
属性向量4彩色；
属性向量2定位；
一致向量2解；
可变的vec4颜色；
均匀vec4-vOffset；
均匀浮动θ；
无效的
main（）
{
浮点数s=sin（θ）；
浮点数c=cos（θ）；
gl_Position.x=-s*vPosition.y+c*vPosition.x；
gl_Position.y=s*vPosition.x+c*vPosition.y；
gl_位置z=0.0；
gl_位置w=1.0；
gl_位置+=偏移量；
fColor=vColor；
}
精密中泵浮子；
可变的vec4颜色；
无效的
main（）
{
gl_FragColor=fColor；
}
生长蚯蚓
* {
框大小：边框框；
字体系列：格鲁吉亚；
}
输入{
宽度：100%；
填充：10px 10px；
字体大小：20px；
}
文本区{
宽度：41%；
高度：30px；
填充：1px 1px；
字体大小：20px；
文本对齐：居中；
背景色：黑色；
}
textarea:：-webkit输入占位符{
颜色：橙色；
字体系列：影响；
}
哎呀。。。您的浏览器不支持HTML5画布元素
var game=new Phaser.game（10001000，Phaser.AUTO，null，{preload:preload，create:create，update:update}）；
函数预加载（）{
}
函数create（）{
游戏。物理。启动系统（相位器。物理。拱廊）；
游戏。舞台。背景色=“#2196F3”；
game.create.texture（'score'，['C']，800,80,0）；
game.add.sprite（0,0，'score'）；
}
函数更新（）{
}
暂停
重新启动
一级
二级
三级
@由201635813制作박정훈 201635840이정명 201635848장휘준
<!DOCTYPE html>
<html>
<head>
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 vPosition;
attribute vec4 vColor;
attribute vec2 fPosition;
uniform vec2 fResolution;
varying vec4 fColor;
uniform vec4 vOffset;
uniform float theta;
void
main()
{
float s = sin(theta);
float c = cos(theta);
gl_Position.x = -s * vPosition.y +c * vPosition.x;
gl_Position.y = s * vPosition.x + c * vPosition.y;
gl_Position.z =0.0;
gl_Position.w = 1.0;
gl_Position+=vOffset;
fColor = vColor;
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
varying vec4 fColor;
void
main()
{
gl_FragColor = fColor;
}
</script>
<script type="text/javascript" src="./Common/webgl-utils.js"></script>
<script type="text/javascript" src="./Common/initShaders.js"></script>
<script type="text/javascript" src="./Common/MV.js"></script>
<script type="text/javascript" src=".js/source.js"></script>
<meta charset="utf-8">
<title>Growing Earthworm</title>
<script type="text/javascript" src=".js/phaser.min.js"></script>
</head>
<body>
<style>
* {
box-sizing: border-box;
font-family: Georgia;
}
input {
width: 100%;
padding: 10px 10px;
font-size: 20px;
}
textarea {
width: 41%;
height: 30px;
padding: 1px 1px;
font-size: 20px;
text-align: center;
background-color: black;
}
textarea::-webkit-input-placeholder {
color: orange;
font-family: impact;
}
</style>
<textarea placeholder="G r o w i n g E a r t h w o r m"></textarea>
<br>
<canvas id="gl-canvas" width="1000" height="1000">
Oops ... your browser doesn't support the HTML5 canvas element
</canvas>
<script type="text/javascript">
var game=new Phaser.Game(1000, 1000, Phaser.AUTO, null,{preload:preload, create:create, update:update});
function preload(){
}
function create(){
game.physics.startSystem(Phaser.Physics.ARCADE);
game.stage.backgroundColor="#2196F3";
game.create.texture('score', ['C'], 800, 80, 0);
game.add.sprite(0,0,'score');
}
function update(){
}
</script>
<button id="Pause">Pause</button>
<button id="Restart">Restart</button>
<select id="Difficulty" size="3">
<option value="0">Level 1</option>
<option value="1">Level 2</option>
<option value="2">Level 3</option>
</select>
<br>
<I>@Made by 201635813 박정훈  201635840 이정명  201635848 장휘준</I>
</body>
</html>