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> </p>
Oder einfach auf der funktionierenden Seite den Seitenquelltext aufrufen
