javascript - HTML5 Canvas JS 发布问题。不能在服务器上工作
问题描述
我刚刚做了一些关于制作网站和发布网站的实验,使用 Flash ~ Adobe Flash Professional СС 2014 并嵌入了 HTML5 Canvas。
因此,起初我制作了类似 .FLA 的 3 页网页网站项目并在本地发布。一切正常。因此,我使用了用于脚本的图像的西里尔名称 - 但在 InternetExplorer 上本地没有遇到任何问题。但是Opera浏览器说easeljs-0.7.1.min.js:13 Uncaught 出现错误。这很可能是由于使用本地或跨域图像读取画布像素数据的安全限制。好的,它无法访问图像,没问题。
此外,我将我的代码上传到免费托管,因此它也不应该成为问题 - 它是免费的。
所以发布后我得到了 HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AITS</title>
<script src="http://code.createjs.com/easeljs-0.7.1.min.js"></script>
<script src="http://code.createjs.com/tweenjs-0.5.1.min.js"></script>
<script src="http://code.createjs.com/movieclip-0.7.1.min.js"></script>
<script src="http://code.createjs.com/preloadjs-0.4.1.min.js"></script>
<script src="AITS.js"></script>
<script>
var canvas, stage, exportRoot;
function init() {
canvas = document.getElementById("canvas");
images = images||{};
var loader = new createjs.LoadQueue(false);
loader.addEventListener("fileload", handleFileLoad);
loader.addEventListener("complete", handleComplete);
loader.loadManifest(lib.properties.manifest);
}
function handleFileLoad(evt) {
if (evt.item.type == "image") { images[evt.item.id] = evt.result; }
}
function handleComplete() {
exportRoot = new lib.AITS();
stage = new createjs.Stage(canvas);
stage.addChild(exportRoot);
stage.update();
stage.enableMouseOver();
createjs.Ticker.setFPS(lib.properties.fps);
createjs.Ticker.addEventListener("tick", stage);
}
</script>
</head>
<body onload="init();" style="background-color:#D4D4D4">
<canvas id="canvas" width="1366" height="768" style="background-color:#15424D"></canvas>
</body>
</html>
和 JavaScript 文件
(function (lib, img, cjs) {
var p; // shortcut to reference prototypes
// library properties:
lib.properties = {
width: 1366,
height: 768,
fps: 24,
color: "#15424D",
manifest: [
{src:"images/img1.png", id:"img1"},
{src:"images/img2.png", id:"img2"},
{src:"images/img3.png", id:"img3"},
{src:"images/img4.png", id:"img4"},
{src:"images/img5.png", id:"img5"},
{src:"images/img6.png", id:"img6"}
]
};
// symbols:
(lib.img1 = function() {
this.initialize(img.img1);
}).prototype = p = new cjs.Bitmap();
p.nominalBounds = new cjs.Rectangle(0,0,777,350);
(lib.img2 = function() {
this.initialize(img.img2);
}).prototype = p = new cjs.Bitmap();
p.nominalBounds = new cjs.Rectangle(0,0,823,681);
(lib.img3 = function() {
this.initialize(img.img3);
}).prototype = p = new cjs.Bitmap();
p.nominalBounds = new cjs.Rectangle(0,0,438,326);
(lib.img4 = function() {
this.initialize(img.img4);
}).prototype = p = new cjs.Bitmap();
p.nominalBounds = new cjs.Rectangle(0,0,256,256);
(lib.img5 = function() {
this.initialize(img.img5);
}).prototype = p = new cjs.Bitmap();
p.nominalBounds = new cjs.Rectangle(0,0,1080,500);
(lib.img6 = function() {
this.initialize(img.img6);
}).prototype = p = new cjs.Bitmap();
p.nominalBounds = new cjs.Rectangle(0,0,651,589);
(lib.Info_but = function(mode,startPosition,loop) {
this.initialize(mode,startPosition,loop,{});
// Слой 2
this.text = new cjs.Text("INFO", "96px 'Georgia'", "#CC6600");
this.text.textAlign = "center";
this.text.lineHeight = 98;
this.text.lineWidth = 408;
this.text.setTransform(288.4,-91.4,1.463,1.463);
this.timeline.addTween(cjs.Tween.get(this.text).wait(4));
// Слой 1
this.instance = new lib.img4();
this.instance.setTransform(-128,-128);
this.shape = new cjs.Shape();
this.shape.graphics.f().s("#000000").ss(1,1,1).p("EguggTwMBdBAAAMAAAAnhMhdBAAAg");
this.shape.setTransform(182.9,-0.1);
this.shape_1 = new cjs.Shape();
this.shape_1.graphics.f("rgba(255,255,255,0.318)").s().p("EgugATxMAAAgnhMBdBAAAMAAAAnhg");
this.shape_1.setTransform(182.9,-0.1);
this.shape_2 = new cjs.Shape();
this.shape_2.graphics.f("rgba(102,255,255,0.318)").s().p("EgugATxMAAAgnhMBdBAAAMAAAAnhg");
this.shape_2.setTransform(182.9,-0.1);
this.shape_3 = new cjs.Shape();
this.shape_3.graphics.f("rgba(255,255,0,0.318)").s().p("EgugATxMAAAgnhMBdBAAAMAAAAnhg");
this.shape_3.setTransform(182.9,-0.1);
this.shape_4 = new cjs.Shape();
this.shape_4.graphics.f("rgba(204,0,0,0.318)").s().p("EgugATxMAAAgnhMBdBAAAMAAAAnhg");
this.shape_4.setTransform(182.9,-0.1);
this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_1},{t:this.shape},{t:this.instance}]}).to({state:[{t:this.shape_2},{t:this.shape},{t:this.instance}]},1).to({state:[{t:this.shape_3},{t:this.shape},{t:this.instance}]},1).to({state:[{t:this.shape_4},{t:this.shape},{t:this.instance}]},1).wait(1));
}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-128,-128,720.6,256);
(lib.house = function() {
this.initialize();
// Слой 1
this.instance = new lib.img3();
this.instance.setTransform(-138.7,-79,0.634,0.485);
this.addChild(this.instance);
}).prototype = p = new cjs.Container();
p.nominalBounds = new cjs.Rectangle(-138.7,-79,277.5,158);
(lib.BUTTON_CITY = function() {
this.initialize();
// Слой 1
this.shape = new cjs.Shape();
this.shape.graphics.bf(img.img1, null, new cjs.Matrix2D(1,0,0,1,-388.5,-175)).s().p("A4rLPIAA2dMAxXAAAIAAWdg");
this.addChild(this.shape);
}).prototype = p = new cjs.Container();
p.nominalBounds = new cjs.Rectangle(-158,-71.9,316.1,143.9);
(lib.Photo_but = function(mode,startPosition,loop) {
this.initialize(mode,startPosition,loop,{});
// Слой 2
this.text = new cjs.Text("PHOTOS", "61px 'Georgia'", "#FFFF66");
this.text.textAlign = "center";
this.text.lineHeight = 63;
this.text.lineWidth = 290;
this.text.setTransform(610.1,-61.8);
this.timeline.addTween(cjs.Tween.get(this.text).wait(4));
// Слой 1
this.shape = new cjs.Shape();
this.shape.graphics.f().s("#000000").ss(1,1,1).p("A4rrOMAxXAAAIAAWdMgxXAAAg");
this.shape.setTransform(615.4,-24.8);
this.shape_1 = new cjs.Shape();
this.shape_1.graphics.bf(img.img1, null, new cjs.Matrix2D(1,0,0,1,-388.5,-175)).s().p("A4rLPIAA2dMAxXAAAIAAWdg");
this.shape_1.setTransform(615.4,-24.8);
this.shape_2 = new cjs.Shape();
this.shape_2.graphics.f().s("#000000").ss(1,1,1).p("AMlrOIMHAAIAAWdI4sAAI4rAAIAA2dINcAAIX0AAIMHWdAAALPIMl2dArPrOILPWdA4rLPINc2d");
this.shape_2.setTransform(615.4,-24.8);
this.shape_3 = new cjs.Shape();
this.shape_3.graphics.bf(img.img1, null, new cjs.Matrix2D(1,0,0,1,-388.5,-175)).s().p("AYsLPIsH2dIMHAAIAAWdgAAALPIMl2dIMHWdgAAALPIrP2dIX0AAIslWdgA4rLPINc2dItcWdIAA2dINcAAILPWdg");
this.shape_3.setTransform(615.4,-24.8);
this.instance = new lib.BUTTON_CITY();
this.instance.setTransform(615.4,-24.8);
this.instance.filters = [new cjs.ColorFilter(0.61, 0.61, 0.61, 1, 0, 0, 0, 0)];
this.instance.cache(-160,-74,320,148);
this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_1},{t:this.shape}]}).to({state:[{t:this.shape_3},{t:this.shape_2}]},1).to({state:[{t:this.shape},{t:this.instance}]},1).to({state:[{t:this.shape},{t:this.instance}]},1).wait(1));
}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(456.3,-97.7,318.1,145.9);
(lib.BOOKING_BUT = function(mode,startPosition,loop) {
this.initialize(mode,startPosition,loop,{});
// Слой 2
this.text = new cjs.Text("BOOKING", "67px 'Georgia'", "#CC6600");
this.text.textAlign = "center";
this.text.lineHeight = 69;
this.text.lineWidth = 416;
this.text.setTransform(-0.7,-48.2);
this.timeline.addTween(cjs.Tween.get(this.text).wait(4));
// Слой 1
this.instance = new lib.house();
this.instance.setTransform(3.9,-0.6);
this.instance.filters = [new cjs.ColorFilter(0.44, 0.44, 0.44, 1, 142.8, 142.8, 142.8, 0)];
this.instance.cache(-141,-81,282,162);
new cjs.ButtonHelper(this.instance, 0, 1, 1);
this.shape = new cjs.Shape();
this.shape.graphics.f().s("#000000").ss(1,1,1).p("A7VsvMA2rAAAIAAZfMg2rAAAg");
this.shape_1 = new cjs.Shape();
this.shape_1.graphics.f("rgba(231,225,219,0.427)").s().p("A7UMwIAA5fMA2pAAAIAAZfg");
this.shape_2 = new cjs.Shape();
this.shape_2.graphics.f("rgba(142,185,206,0.757)").s().p("A7UMwIAA5fMA2pAAAIAAZfg");
this.shape_3 = new cjs.Shape();
this.shape_3.graphics.f("rgba(255,255,51,0.529)").s().p("A7UMwIAA5fMA2pAAAIAAZfg");
this.shape_4 = new cjs.Shape();
this.shape_4.graphics.f("rgba(255,102,153,0.42)").s().p("A7UMwIAA5fMA2pAAAIAAZfg");
this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.shape_1},{t:this.shape},{t:this.instance}]}).to({state:[{t:this.shape_2},{t:this.shape},{t:this.instance}]},1).to({state:[{t:this.shape_3},{t:this.shape},{t:this.instance}]},1).to({state:[{t:this.shape_4},{t:this.shape},{t:this.instance}]},1).wait(1));
}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(-208.8,-82.6,420.3,235.9);
// stage content:
(lib.AITS = function(mode,startPosition,loop) {
this.initialize(mode,startPosition,loop,{});
// timeline functions:
this.frame_0 = function() {
this.stop();
this.btn1.addEventListener("click", fl_ClickToGoToAndPlayFromFrame4.bind(this));
this.btn2.addEventListener("click", fl_ClickToGoToAndPlayFromFrame3.bind(this));
this.btn3.addEventListener("click", fl_ClickToGoToAndPlayFromFrame2.bind(this));
function fl_ClickToGoToAndPlayFromFrame2()
{
this.gotoAndStop(1);
}
function fl_ClickToGoToAndPlayFromFrame3()
{
this.gotoAndStop(2);
}
function fl_ClickToGoToAndPlayFromFrame4()
{
this.gotoAndStop(3);
}
}
// actions tween:
this.timeline.addTween(cjs.Tween.get(this).call(this.frame_0).wait(4));
// Слой 4
this.instance = new lib.img2();
this.instance.setTransform(149.7,137.6,0.745,0.745);
this.instance_1 = new lib.img6();
this.instance_1.setTransform(177.9,135.2,0.857,0.857);
this.text = new cjs.Text("Email: 7675575@mail.ru", "96px 'Georgia'", "#FFFFFF");
this.text.textAlign = "center";
this.text.lineHeight = 98;
this.text.setTransform(343.2,417.2,0.588,0.591);
this.text.shadow = new cjs.Shadow("rgba(153,255,102,1)",0,0,4);
this.text_1 = new cjs.Text("Viber/WhatsApp : +79167675575", "96px 'Georgia'", "#FFFFFF");
this.text_1.textAlign = "center";
this.text_1.lineHeight = 98;
this.text_1.setTransform(447.5,304.3,0.588,0.591);
this.text_1.shadow = new cjs.Shadow("rgba(153,255,102,1)",0,0,4);
this.timeline.addTween(cjs.Tween.get({}).to({state:[]}).to({state:[{t:this.instance}]},1).to({state:[{t:this.instance_1}]},1).to({state:[{t:this.text_1},{t:this.text}]},1).wait(1));
// BUTTONS
this.btn1 = new lib.BOOKING_BUT();
this.btn1.setTransform(673,529.8);
new cjs.ButtonHelper(this.btn1, 0, 1, 2, false, new lib.BOOKING_BUT(), 3);
this.btn3 = new lib.Info_but();
this.btn3.setTransform(214.3,286.9,0.584,0.633,0,0,0,0.5,-1.3);
new cjs.ButtonHelper(this.btn3, 0, 1, 2, false, new lib.Info_but(), 3);
this.btn2 = new lib.Photo_but();
this.btn2.setTransform(553.9,368.7,1.107,1.107,0,0,0,158.8,47.1);
new cjs.ButtonHelper(this.btn2, 0, 1, 2, false, new lib.Photo_but(), 3);
this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.btn2,p:{x:553.9,y:368.7}},{t:this.btn3,p:{x:214.3,y:286.9}},{t:this.btn1,p:{x:673,y:529.8}}]}).to({state:[{t:this.btn2,p:{x:582.1,y:460.9}},{t:this.btn3,p:{x:979.4,y:198.2}},{t:this.btn1,p:{x:1087.3,y:565.7}}]},1).wait(3));
// Слой 5
this.shape = new cjs.Shape();
this.shape.graphics.f("rgba(7,7,7,0.408)").s().p("EhqtAxaMAAAhizMDVbAAAMAAABizg");
this.shape.setTransform(683,401.6);
this.shape._off = true;
this.timeline.addTween(cjs.Tween.get(this.shape).wait(1).to({_off:false},0).wait(3));
// BG
this.text_2 = new cjs.Text("COPYRIGHT В© 2018 AITS , Montenegro, Budva, Lazi ", "16px 'Bernard MT Condensed'", "#FFFFFF");
this.text_2.textAlign = "center";
this.text_2.lineHeight = 18;
this.text_2.setTransform(681,725.6);
this.text_2.shadow = new cjs.Shadow("rgba(255,255,102,1)",0,0,1);
this.text_3 = new cjs.Text("AITS BUDVA RENTALS", "96px 'Bernard MT Condensed'", "#FFFFFF");
this.text_3.textAlign = "center";
this.text_3.lineHeight = 98;
this.text_3.setTransform(681,0);
this.text_3.shadow = new cjs.Shadow("rgba(255,255,153,1)",0,0,21);
this.instance_2 = new lib.img5();
this.instance_2.setTransform(0,85.4,1.265,1.265);
this.timeline.addTween(cjs.Tween.get({}).to({state:[{t:this.instance_2},{t:this.text_3},{t:this.text_2}]}).to({state:[{t:this.instance_2},{t:this.text_3},{t:this.text_2}]},1).wait(3));
}).prototype = p = new cjs.MovieClip();
p.nominalBounds = new cjs.Rectangle(671,372,1398,765);
})(lib = lib||{}, images = images||{}, createjs = createjs||{});
var lib, images, createjs;
我认为链接可能会出现问题 - 我让它们直接像
<script src="http://aits.do.am/AITS.js"></script>
对于 HTML 文件,在 JS 文件中直接链接到图像。但是 $@#% 不会以任何方式工作。
我收到了这个错误 - 就像它仍然是旧的西里尔名字......并且脚本无法加载它们
%D0%A0%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B2%D0%BE%D0%B5%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B52.png:1 Failed to load resource: the server responded with a status of 404 (Not Found)
%D0%A0%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B2%D0%BE%D0%B5%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B55.png:1 Failed to load resource: the server responded with a status of 404 (Not Found)
%D0%A0%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B2%D0%BE%D0%B5%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B58.png:1 Failed to load resource: the server responded with a status of 404 (Not Found)
%D0%A0%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B2%D0%BE%D0%B5%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B59.png:1 Failed to load resource: the server responded with a status of 404 (Not Found)
%D0%A0%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B2%D0%BE%D0%B5%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B513.png:1 Failed to load resource: the server responded with a status of 404 (Not Found)
%D0%A0%D0%B0%D1%81%D1%82%D1%80%D0%BE%D0%B2%D0%BE%D0%B5%D0%B8%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D0%B55_1.png:1 Failed to load resource: the server responded with a status of 404 (Not Found)
easeljs.min.js:12 Uncaught TypeError: Cannot read property 'naturalWidth' of undefined
at c.Fill.b.bitmap (easeljs.min.js:12)
at a.b.beginBitmapFill (easeljs.min.js:12)
at new lib.Photo_but (AITS.js:147)
at new lib.AITS (AITS.js:271)
at handleComplete (AITS.html:31)
at LoadQueue.a._dispatchEvent (preloadjs.min.js:12)
at LoadQueue.a._dispatchEvent (preloadjs.min.js:12)
at LoadQueue.a.dispatchEvent (preloadjs.min.js:12)
at LoadQueue.a._sendComplete (preloadjs.min.js:12)
at LoadQueue.a._loadNext (preloadjs.min.js:13)
虽然我将图像块的负载更改为
lib.properties = {
width: 1366,
height: 768,
fps: 24,
color: "#15424D",
manifest: [
{src:"http://aits.do.am/images/img1.png", id:"img1"},
{src:"http://aits.do.am/images/img2.png", id:"img2"},
{src:"http://aits.do.am/images/img3.png", id:"img3"},
{src:"http://aits.do.am/images/img4.png", id:"img4"},
{src:"http://aits.do.am/images/img5.png", id:"img5"},
{src:"http://aits.do.am/images/img6.png", id:"img6"}
]
};
第二大是未定义问题的naturalWidth'
mb some 可以提供帮助 - 我使用嵌入式播放和停止功能制作了一个动画,现在在加载这样的动画时出现错误:
CANVAStry.js:98 Uncaught ReferenceError: fl_ClickToGoToAndStopAtFrame is not defined
at lib.CANVAStry.frame_0 (CANVAStry.js:98)
at a.b._runActions (tweenjs-0.5.1.min.js:17)
at a.b.setPosition (tweenjs-0.5.1.min.js:17)
at a.b.setPosition (tweenjs-0.5.1.min.js:17)
at lib.CANVAStry.b._updateTimeline (movieclip-0.7.1.min.js:12)
at lib.CANVAStry.b._tick (movieclip-0.7.1.min.js:12)
at a.b._tick (easeljs-0.7.1.min.js:13)
at a.b.update (easeljs-0.7.1.min.js:13)
at init (CANVAStry.html:21)
at onload (CANVAStry.html:29)
!!!非常感谢任何帮助!!!
解决方案
推荐阅读
- python - 单击 Scrapy-Splash 中的按钮
- h2o - h2o hit_ratio_table AttributeError
- asp.net - 对于在 Azure Web App 上运行的任何自定义目标,NLog 会抛出“找不到目标”
- ruby - 未定义的方法“merge_cells”RubyXL
- google-cloud-platform - 无法从 Kubernetes Engine 连接到 Google Cloud SQL
- python-3.x - 写入excel文件后格式化某些行
- excel - 将工作表上的行复制到单独工作表上的表末尾
- python - 如何在 ctypes 中使用 typedef
- java - Spring Boot 2 Maven 目录视图解析器
- post - 如何编写要在 Informatica Cloud 后处理命令中使用的脚本