Antworten auf deine Fragen:
Neues Thema erstellen

Canvas Element aus Html auslagern

Schninn

Noch nicht viel geschrieben

Hallo,

ich habe ein Canvas Element in einer Html Datei. Nun möchte ich das Canvas auslagern.
Klappt leider nicht so, wie ich mir das vorstelle (was wohl auch einfach daran liegt, dass ich nicht richtig weiß wie). Vielleicht könnt ihr mir helfen. Aktuell wird das Canvas an dieser Stelle eingebettet:

<div class="col-lg-6 col-md-6 hidden-sm hidden-xs">
<canvas id="map"></canvas>
</div>


Den kompletten Code aus dem Script habe ich in eine js Datei eingebunden (nur den Code ohne <script></script> und diese im head der html datei verlinkt (in der js. steht nur der Code den ich vorher im hdml hatte. Sonst nichts):

<script src="canvas1.js"></script>

Es soll auch noch eine weiteres Canvas angelegt werden. Ich hoffe, ihr könnt mir weiter helfen. Danke! LG
 

Eyes_Only

Nicht mehr ganz neu hier

Du musst in deinem Hauptquelltext schon reinschreiben, wo die Karte angezeigt werden soll. Ich habe es so gemacht:
Code:
...
<div id="karte">&nbsp;</div>
...
Das steht in meiner kontakt.hmtl/php was auch immer.

Und dann habe ich eine .js-Datei "map.js" oder was in die Richtung und da steht dann irgendwo:
Code:
var map = new google.maps.Map(document.getElementById("karte"), myOptions);

Damit nimmst du dann Bezug auf die oben festgelegte ID "karte". An der Stelle auf der Hauptseite wo der Container/div "karte" ist, wird dann die (google-) Karte mit meinen Einstellungen "myOptions" angezeigt.
 

Schninn

Noch nicht viel geschrieben

Das ist die canvas1.js

var canvas = document.getElementById('map');
var ctx = canvas.getContext('2d');
var imgData;




// Sonnen
var saarland = new Image();
saarland.src = 'img/saarland.png';



var map = new Image();


map.onload = function(){
canvas.setAttribute('width', this.width);
canvas.setAttribute('height', this.height);

ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(this, 0, 0);
imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(this, 0, 0);

console.log(imgData.width + ' Width');
console.log(imgData.height + ' Height');
console.log(imgData.data.length + ' Pixel');
};
map.src = 'img/dtlbdl.png';

canvas.onmousemove = function(evt){
var bcr = canvas.getBoundingClientRect();
var x = Math.round(evt.clientX - bcr.left);
var y = Math.round(evt.clientY - bcr.top);

//console.log(x+'#'+y);

var i = (x + (y * canvas.width)) * 4;
var bgc_r = imgData.data;
var bgc_g = imgData.data[i+1];
var bgc_b = imgData.data[i+2];
var bgc_a = imgData.data[i+3];


//Karte zeichnen, wenn man über keinem der Länder ist und/oder das Land wechselt, weil die Bilder sonst stehenbleiben:
ctx.fillStyle = "#fff";
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(map, 0, 0);

//saarland 246, 164, 109
if((bgc_r >= 244 && bgc_r <= 248)&& (bgc_g >= 162 && bgc_g <= 166) && (bgc_b >= 107 && bgc_b <= 111) && bgc_a == 255) {
ctx.drawImage(saarland, 40, 500);
}
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.614
Beiträge
1.538.351
Mitglieder
67.525
Neuestes Mitglied
mgtaucher
Oben