JavaScript/Canvas, behöver hjälp
Sitter och försöker förstå mig på en grej i JS och Canvas som jag inte blir klok på.
Ritar med koden ut en lila quadraticCurve och det är ju inga konstigheter. Koden kommer från ett bidrag till js1k av snubben som driver firefly.nu
<canvas id="c">
</canvas>
<div id="hej" style="position:fixed;left:10px;top:10px;color:#000;"></div>
<script>
var hej = document.getElementById("hej"),r="",i;
B = document.getElementById("c"), C = B.getContext('2d');
for(e in C){
C[ e[0] + (e[5]||0) ] = C[e]
}
B.width=B.height=600;
C.bP();
C.mo(86, 282);
C.qa(112, 488, 167, 459);
C.strokeStyle = "hsla(" + 255 + ",100%," + 50 + "%,.9)";
C.stroke();
for(i=0;i<e.length;i++){
r+=e[i]+"";
}
hej.innerHTML = r;
</script>
Problemet är att jag inte fattar hur C.qa och bP och mo kan motsvara quadraticCureTo, beginPath och moveTo. Det går ju i vanliga fall inte att förkorta dessa.
Jag plockade bort allt onödigt och upptäckte att det är en for...in som gör att det på något sätt är möjligt:
for(e in C){
C[ e[0] + (e[5]||0) ] = C[e]
}
Utan detta i koden går det inte att skriva t.ex. bP i stället för beginPath. Det verkar dessutom som att detta kan läggas in i vilken kod som helst så kan man få saker ritade genom förkortningar.
C[e] innehåller värdet 16 (eller 10 på hexadecimal form, eller 00010000 binärt) vilket på något sätt (?) ska motsvara "Do not synchronously decode images - draw what we have" och det är precis vad arrayen e[0-29] innehåller:
e[0]== D
e[1]== R
e[2]== A
e[3]== W
e[4]== W
e[5]== I
e[6]== N
e[7]== D
e[8]== O
e[9]== W
e[10]== _
e[11]== A
e[12]== S
e[13]== Y
e[14]== N
e[15]== C
e[16]== _
e[17]== D
e[18]== E
e[19]== C
e[20]== O
e[21]== D
e[22]== E
e[23]== _
e[24]== I
e[25]== M
e[26]== A
e[27]== G
e[28]== E
e[29]== S
Varför funkar detta? Vad gör for...in-koden?
1
