【发布时间】：2022-01-09 20:53:29
【问题描述】：
下面的代码是制作一个简单的三角形所需要的。我想将三角形保持在那个确切的位置并将其添加到我的画布中。
can = document.getElementById("gameCanvas");
var ctx = can.getContext("2d");
ctx.beginPath();
ctx.moveTo(1, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.closePath();
ctx.stroke();
如果您运行下面的代码，三角形会出现一瞬间然后消失。我需要它和三个方程一起呆在那里。我创建了函数 path();努力保持三角形位于左上角。我不确定如何将三角形保留在那里并完成所有这些操作。
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="//code.createjs.com/createjs-2013.09.25.combined.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
#gameCanvas {
background-color: lightyellow;
}
</style>
<div class="canvasHolder1">
<div id="eqn1"> 3+3=<input type="text" id="q1" />
</div>
<div id="eqn2"> 3+2=<input type="text" id="q2" />
</div>
<div id="eqn3"> 5+2=<input type="text" id="q3" />
</div>
<canvas id="gameCanvas" width="600" height="600">Not supported</canvas>
<script type="text/javascript">
var m=1;
var stage = new createjs.Stage("gameCanvas");
var obj=[];
can = document.getElementById("gameCanvas");
var ctx = can.getContext("2d");
ctx.beginPath();
ctx.moveTo(1, 20);
ctx.lineTo(20, 100);
ctx.lineTo(70, 100);
ctx.closePath();
ctx.stroke();
function startGame() {
obj[1] = new createjs.DOMElement(document.getElementById(`eqn${1}`));
obj[2] = new createjs.DOMElement(document.getElementById(`eqn${2}`));
stage.addChild(obj[1]);
stage.addChild(obj[2]);
createjs.Ticker.addEventListener("tick", handleTick);
createjs.Ticker.setFPS(60);
function handleTick(event){
drop(1);
drop(2);
path();
stage.update();
}
}
function drop(i){
obj[1].x =40;
obj[1].y =50;
obj[2].x =300;
obj[2].y =50;
}
function path(){
ctx.x=1;
ctx.y=1;
}
</script>
<body onload="startGame();">
<div >
<canvas>This browser or document mode doesn't support canvas object.</canvas>
</div>
</body>
</html>【问题讨论】：
-
您的文档中有两个
canvas元素。gameCanvas位于您的<body>标记之外，这会导致错误。将canvasHolder1div 和<script>移动到<body>标记。最后订购<script>。原因是浏览器从上到下读取（并执行）文档。 -
@EmielZuurbier 你是说把
<div class="canvasHolder1"> <div id="eqn1"> 3+3=<input type="text" id="q1" /> </div> <div id="eqn2"> 3+2=<input type="text" id="q2" /> </div> <div id="eqn3"> 5+2=<input type="text" id="q3" /> </div> <canvas id="gameCanvas" width="600" height="600">Not supported</canvas> <script type="text/javascript">的所有东西都移到标签吗？我也不确定你所说的 body 标签是什么意思。什么是身体标签？你是说开始游戏功能吗？ -
我不太清楚你的意思
-
<body>...</body>元素代表页面上的所有内容。所以你的画布和内容元素应该在那里。 See here for more info 但是，这似乎不是您的错误的原因。当我浏览您的代码时，我注意到只要我删除stage.update();行，画布似乎就可以正确呈现。那条线是做什么的？ -
我认为这就是重申 startGame 功能的原因。它用于ticker元素
标签： javascript html css canvas jsfiddle