[gelöst] Javas* in Joomla

Mephist0 · 18.11.11, 08:27

Hi Zusammen.

Ich habe seit kurzem Joomla (Version 1.7.0) für mich entdeckt und bin auf dem Gebiet noch ein blutiger Anfänger.
Ich möchte auf meiner Homepage Javas*****, oder genauer gesagt eine Canvas-Animation einbinden.

Der Code steht und funktioniert auch:

Doch auf meiner von Joomla verwaltetetn Seite funktioniert es nicht.

Folgende Editoren habe ich ausprobiert:
- JCE (Javas***** auf "erlaubt" gesetzt)
- TinyMCE (Javas***** aus der Liste der verbotenen Elemente gelöscht)
- Kein Editor

Doch ich habe immer nur einen Auszug aus dem Javacode auf der Website gesehen

Dann habe ich noch die Globalen Beitragsoptionen angepasst. Die lassen Javas***** jetzt auch zu.
Jetzt habe ich keine Codeschnipsel mehr, sondern einfach nur noch einen leeren Kasten.

So sieht es momentan aus:

Ein weiteres Problem ist, dass ich bei meiner alten Seite (komplett selber gecodetes html&css) im <body> via "onload" meine Funktion aufgerufen hab, die mein Canvas animieren sollte. :

Code:

<body onload="drawcanvas();">

Aber in Joomla, habe ich keinen Zugriff auf das <body>-Element und im <canvas> element kann ich (soweit ich weiß) besagte Funktion nicht aufrufen.

Code:

<canvas onload="drawcanvas();">

Ich hoffe ihr könnt mir helfen, dass ich meine Animation auch auf meiner neuen Seite genießen kann :P

Abschließend noch der Code:

Code:

<s***** type="text/javas*****">
var changeRectangle1 = 20;
		var changeRectangle2 = 20;
		var changeCircle1 = -20;
		var changeCircle2 = 20;
		var colour1 = 20;
		var colour2 = 0;
		var colour3 = 10;
		var circleOpacity = 0.5;

		function Rectangle(x, y, width, height, borderWidth) {
			this.x=x;
			this.y=y;
			this.width = width;
			this.height = height;
			this.borderWidth = borderWidth;
		}

		function Circle(x, y, rad) {
			this.x = x;
			this.y = y;
			this.rad = rad;
		}

		function drawme() {
		      var elem = document.getElementById("myCanvas");

		      if (elem.getContext) {
			myCircle = new Circle(20, elem.getContext("2d").canvas.height-20, 20);
			myRectangle = new Rectangle(0,0,100,50,2);
			setInterval(draw,10);
		      }
		}
		
		function draw(){
				var ctx = document.getElementById("myCanvas").getContext("2d");
				ctx.clearRect(0,0,ctx.canvas.width, ctx.canvas.height);
				//ctx.fillStyle = "rgba(255, 0, 0, 0.75)";
				var currentColour = "rgba(" + colour1 + "," + colour2 + "," + colour3 + ", 0.75)"; 
				ctx.fillStyle = currentColour;
				ctx.strokeStyle= "rgba(0,0,0, 0.75)";
				ctx.lineWidth=myRectangle.borderWidth;
				ctx.save();

				ctx.fillRect(myRectangle.x,myRectangle.y,myRectangle.width,myRectangle.height);
				ctx.strokeRect(myRectangle.x,myRectangle.y,myRectangle.width,myRectangle.height);

				var currentOpacity = "rgba(255,255,0," + circleOpacity + ")";
				ctx.fillStyle = currentOpacity;

				ctx.beginPath();
				ctx.arc(myCircle.x,myCircle.y,myCircle.rad,0,Math.PI*2,true);
				ctx.fill();

				ctx.restore();
				var currentRectangleX = myRectangle.x;
				var currentRectangleY = myRectangle.y;
				myRectangle.x = currentRectangleX + changeRectangle1;
				myRectangle.y = currentRectangleY + changeRectangle2;


				if (currentRectangleX >= (ctx.canvas.width - myRectangle.width - myRectangle.borderWidth)) {
					changeRectangle1 = -1;
					colour1 += 10;
					if (colour1 > 255) { colour1 = 0;}
				}
				if (currentRectangleX <= (myRectangle.borderWidth)) {
					changeRectangle1 = 1;
					colour2 += 20;
					if (colour2 > 255) { colour2 = 0;}
				}

				if (currentRectangleY >= (ctx.canvas.height - myRectangle.height - myRectangle.borderWidth)) {
					changeRectangle2 = -1;
					colour3 += 5;
					if (colour3 > 255) { colour3 = 0;}
				}
				if (currentRectangleY <= (myRectangle.borderWidth)){
					changeRectangle2 = 1;
					colour3 += 5;
					if (colour3 > 255) { colour3 = 0;}
				}

				var currentCircleX = myCircle.x;
				var currentCircleY = myCircle.y;
				myCircle.x = currentCircleX + changeCircle2;
				myCircle.y = currentCircleY + changeCircle1;


				if (currentCircleX >= (ctx.canvas.width - myCircle.rad)) {
				      changeCircle2 = -2;
				      circleOpacity += 0.1;
				}
				if (currentCircleX <= myCircle.rad) {
				      changeCircle2 = 2;
				      circleOpacity += 0.1;
				}

				if (currentCircleY >= (ctx.canvas.height - myCircle.rad)) {
				      changeCircle1 = -2;
				      circleOpacity += 0.1;
				}
				if (currentCircleY <= myCircle.rad){
				      changeCircle1 = 2;
				      circleOpacity += 0.1;
				}

				if (circleOpacity >= 1.0) { circleOpacity = 0.1;}

		}


		  
		function drawLine(ctx,elem){
			ctx.moveTo(0,0);
			ctx.lineTo(elem.width, elem.height);
			ctx.stroke();
		}
</s*****>


<article onload="drawme();">Here is a small canvas animation</article>
<p><br /> 
<canvas id="myCanvas" width="584" height="300"></p>
   <p>Sry, but your browser isn't supporing canvas.<br /> Here should appear some moving objects.</p>
</canvas>
<p>&nbsp;</p>

Oder einfach auf der funktionierenden Seite den Seitenquelltext aufrufen

[gelöst] Javas***** in Joomla

[gelöst] Javas* in Joomla