Stilllegung des Forums
Das Forum wurde am 05.06.2023 nach über 20 Jahren stillgelegt (weitere Informationen und ein kleiner Rückblick).
Registrierungen, Anmeldungen und Postings sind nicht mehr möglich. Öffentliche Inhalte sind weiterhin zugänglich.
Das Team von spieleprogrammierer.de bedankt sich bei der Community für die vielen schönen Jahre.
Wenn du eine deutschsprachige Spieleentwickler-Community suchst, schau doch mal im Discord und auf ZFX vorbei!
Werbeanzeige
Quellcode |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
function draw(){ //menu ctx.strokeStyle = "black"; ctx.strokeRect(0,0,menuscale,menuscale); //+ ctx.strokeRect(menuscale,0,menuscale,menuscale); //- //Felder for(var x=0; x< size; x++){ for(var y=0; y<size; y++){ ctx.fillStyle = painttabel[x][y]; //farbe ctx.fillRect((x*scale)+1,1+menuscale+(y*scale),scale-1,scale-1); } } //Raster for(var x=0; x< size; x++){ for(var y=0; y<size; y++){ ctx.strokeStyle = "black"; ctx.strokeRect(x*scale,menuscale+(y*scale),scale,scale); } } } |
Administrator
ja die gibt es:Ich habe zwar keine Erfahrung mit Canvas, aber soweit ich weiß, gibt es Methoden um direkt ein Pixelbild zu zeichnen.
Das dürfte deutlich schneller sein als jedes Pixel als Rechteck zu zeichnen.
Quellcode |
|
1 2 |
img = new Image(); img.src = "img/backup.png"; |
Quellcode |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
var newimg = resize(img,scale); ctx.imageSmoothingEnabled = false; ctx.drawImage(newimg,0,0+menuscale,newimg.width, newimg.height); var resize = function( img, scale ) { var widthScaled = img.width * scale; var heightScaled = img.height * scale; var orig = document.createElement('canvas'); orig.width = img.width; orig.height = img.height; var origCtx = orig.getContext('2d'); origCtx.drawImage(img, 0, 0); var origPixels = origCtx.getImageData(0, 0, img.width, img.height); var scaled = document.createElement('canvas'); scaled.width = widthScaled; scaled.height = heightScaled; var scaledCtx = scaled.getContext('2d'); var scaledPixels = scaledCtx.getImageData( 0, 0, widthScaled, heightScaled ); for( var y = 0; y < heightScaled; y++ ) { for( var x = 0; x < widthScaled; x++ ) { var index = (Math.floor(y / scale) * img.width + Math.floor(x / scale)) * 4; var indexScaled = (y * widthScaled + x) * 4; scaledPixels.data[ indexScaled ] = origPixels.data[ index ]; scaledPixels.data[ indexScaled+1 ] = origPixels.data[ index+1 ]; scaledPixels.data[ indexScaled+2 ] = origPixels.data[ index+2 ]; scaledPixels.data[ indexScaled+3 ] = origPixels.data[ index+3 ]; } } scaledCtx.putImageData( scaledPixels, 0, 0 ); return scaled; } |
Administrator
habe es mit <div id="field"></div>Probier mal die Pixel als normale HTML-div-Elemente zu bauen.
Vielleicht geht das schneller.
Quellcode |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
var div = document.getElementById('field'); var content = ""; for(var x=0; x< size; x++){ for(var y=0; y<size; y++){ content += "<HR COLOR='"; if(y%2==0) content+="Black"; else content+="Blue"; content+="' SIZE='1px' WIDTH='1px'></hr>"; } } div.innerHTML = content; |
Werbeanzeige