多次加载animate cc的html5 canvas发布
[英]Load html5 canvas publish of animate cc multiple times
问题描述
The publish output of Animate CC gives html file and js file. 
Animate CC的发布输出提供html文件和js文件。 I want to draw the same drawing two times in the same canvas. 我想在同一画布上绘制同一幅图两次。 From this example , i want to have output as 从这个例子中 ，我想输出为
How can i change the javascript to achieve this without having two canvas tag? 如何在没有两个canvas标签的情况下更改javascript以实现此目的？ I want to have numerous instance of it in single canvas tag. 我想在单个canvas标签中包含多个实例。
2 个解决方案
解决方案1
2 2018-04-24 15:52:06
If you are trying to achieve the image above, you can simply create two instances of simple_canv class. 如果您尝试实现上面的图像，则可以简单地创建simple_canv类的两个实例。
Try this: 尝试这个：
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
exportRootLeft = new lib.simple_canv();
exportRootRight = new lib.simple_canv();
exportRootRight.x = 555;
stage = new createjs.Stage(canvas);
stage.addChild(exportRootLeft, exportRootRight);
stage.update();
stage.enableMouseOver();
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
init_app()
} }
Also, remember to increase the width of your canvas. 另外，请记住增加画布的宽度。
解决方案2
0 2018-04-24 08:28:23
Is this what you are looking for? 这是你想要的？
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<script>
var canvas = document.getElementById("myCanvas");
var ctx1 = canvas.getContext("2d");
var ctx2 = canvas.getContext("2d");
ctx1.fillStyle = "red";
ctx1.fillRect(0,0,50,50);
ctx2.fillStyle = "blue";
ctx2.fillRect(50,0,50,50);
</script>
</body>
</html>
You can then change what you render. 然后，您可以更改渲染的内容。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.