Auf Thema antworten 2026

Beitrag

<blockquote data-quote="Schninn" data-source="post: 2317923" data-attributes="member: 621393">Das ist die canvas1.js&nbsp;var canvas = document.getElementById(&#039;map&#039;);&nbsp; &nbsp; &nbsp; &nbsp; var ctx = canvas.getContext(&#039;2d&#039;);&nbsp; &nbsp; &nbsp; &nbsp; var imgData;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // Sonnen&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var saarland = new Image();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; saarland.src = &#039;img/saarland.png&#039;;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var map = new Image();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; map.onload = function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; canvas.setAttribute(&#039;width&#039;, this.width);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; canvas.setAttribute(&#039;height&#039;, this.height);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ctx.fillStyle = &quot;#fff&quot;;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ctx.fillRect(0, 0, canvas.width, canvas.height);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ctx.drawImage(this, 0, 0);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ctx.clearRect(0, 0, canvas.width, canvas.height);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ctx.drawImage(this, 0, 0);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(imgData.width + &#039; Width&#039;);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(imgData.height + &#039; Height&#039;);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log(imgData.data.length + &#039; Pixel&#039;);&nbsp; &nbsp; &nbsp; &nbsp; };&nbsp; &nbsp; &nbsp; &nbsp; map.src = &#039;img/dtlbdl.png&#039;;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; canvas.onmousemove = function(evt){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var bcr = canvas.getBoundingClientRect();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var x = Math.round(evt.clientX - bcr.left);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var y = Math.round(evt.clientY - bcr.top);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //console.log(x+&#039;#&#039;+y);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var i = (x + (y * canvas.width)) * 4;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var bgc_r = imgData.data;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var bgc_g = imgData.data[i+1];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var bgc_b = imgData.data[i+2];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var bgc_a = imgData.data[i+3];&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //Karte zeichnen, wenn man über keinem der Länder ist und/oder das Land wechselt, weil die Bilder sonst stehenbleiben:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ctx.fillStyle = &quot;#fff&quot;;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ctx.clearRect(0, 0, canvas.width, canvas.height);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ctx.drawImage(map, 0, 0);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //saarland 246, 164, 109&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if((bgc_r &gt;= 244 &amp;&amp; bgc_r &lt;= 248)&amp;&amp; (bgc_g &gt;= 162 &amp;&amp; bgc_g &lt;= 166) &amp;&amp; (bgc_b &gt;= 107 &amp;&amp; bgc_b &lt;= 111) &amp;&amp; bgc_a == 255) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ctx.drawImage(saarland, 40, 500);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }</blockquote>

[QUOTE="Schninn, post: 2317923, member: 621393"] 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[i]; 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); }[/i] [/QUOTE]

Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.

Authentifizierung

Wenn ★ = 12, ◇ = 4 und die Hälfte von ★ zu ◇ addiert wird, was ist das Ergebnis?