Wie prozentuale Breite in HTML-Canvas (keine CSS)

Question

Ich habe ein Bild und überlagert eine Leinwand darüber, so dass ich "auf" das Bild zeichnen kann, ohne das Bild selbst zu ändern.

<div class="needPic" id="container"> 
    <img id="image" src=""/> 
    <!-- Must specify canvas size in html --> 
    <canvas id="sketchpad" width="70%" height="60%">Sorry, your browser is not supported.</canvas> 
</div> 

ich die Breite und Höhe in Pixeln in der obigen Leinwand Zeile angeben kann und es funktioniert super, aber ich brauche diese dynamisch auf Bildschirmgröße Size-Basis (hat als Tabletten als auch auf kleine Smartphones arbeiten). Wenn ich versuche, den Prozentsatz wie oben gezeigt einzugeben, wird er als Pixel interpretiert. So wird die Leinwand 70px breit und 60 px groß.

Aus irgendeinem Grund kann ich nicht die Leinwand in der CSS Größe so aussehen wie ich es im HTML tun muss. Um zu verdeutlichen, wenn ich versuche, die Canvas-Dimensionen im CSS zu spezifizieren, ändern sie nicht wirklich die Größe des Canvas. Es scheint, als ob das Bild irgendwie interferiert.

Jede Hilfe wäre willkommen.

Update: Wenn ich <canvas id="sketchpad" style="width:70%;height:60%;"></canvas> dann wird standardmäßig auf eine Höhe von 150px und eine Breite von 300 Pixeln (unabhängig vom Gerät) und dann Strecken die Leinwand, um die div zu passen. Ich setze das div auf 60% Breite und 60% Höhe im CSS, also dehnt sich die Leinwand aus, um das zu füllen. Ich bestätigte dies durch Protokollieren der canvas.width vs canvas.style.width - canvas.width war 300px und canvas.sytle.width war '60% '(vom übergeordneten div). Dies bewirkt, dass einige wirklich seltsame pixelation und Zeicheneffekte ...

Answer 1

Sie müssen die Größe des Canvas in Pixel einstellen oder Sie werden nicht nur die Qualität des Inhalts reduzieren, aber wenn Sie darauf zeichnen möchten, sind auch die Mauskoordinaten deaktiviert. Verwenden Sie CSS nicht zum Skalieren von Canvas, wenn Sie es interaktiv verwenden möchten.

Ich würde Ihnen empfehlen, passen Sie Ihre Bild dann adoptieren Sie die Leinwand zu welcher Größe das Bild ist. Sie können dies tun, indem Sie getComputedStyle(element) verwenden, die Ihnen die Größe gibt, auf die das Element in Pixeln festgelegt ist.

Nach Bild des onload (wie man das Bild sicher sein müssen, ist eigentlich seine Größe zu erhalten geladen) oder höher, wenn Sie das Bild (CSS) Größe auf dem Sprung zu ändern, können Sie dies tun:

/// get computed style for image 
var img = document.getElementById('myImageId'); 
var cs = getComputedStyle(img); 

/// these will return dimensions in *pixel* regardless of what 
/// you originally specified for image: 
var width = parseInt(cs.getPropertyValue('width'), 10); 
var height = parseInt(cs.getPropertyValue('height'), 10); 

/// now use this as width and height for your canvas element: 
var canvas = document.getElementById('myCanvasId'); 

canvas.width = width; 
canvas.height = height; 

Jetzt wird die Leinwand Bild, aber mit Leinwand Pixelverhältnis 1: 1, um Probleme zu vermeiden, wenn Sie auf der Leinwand zeichnen werden. Andernfalls müssen Sie auch die Maus/Touch-Koordinaten konvertieren/skalieren.

Answer 2

Statt Breite mit = "", Verwendung style = "" als solche

<canvas id="sketchpad" style="width:70%; height:60%" >Sorry, your browser is not supported.</canvas> 

EDIT:

<div class="needPic" id="container" style="width:70%; height:60%; min-width:__px; min-height:__px"> 
    <img id="image" src="" style="width:70%; height:60%; min-width:__px; min-height:__px"/> 
    <!-- Must specify canvas size in html --> 
    <canvas id="sketchpad" style="width:70%; height:60%; min-width:__px; min-height:__px>Sorry, your browser is not supported.</canvas> 
</div> 

Answer 3

Sie könnte die Leinwand auf die Breite des Bildes in Pixel über JavaScript anpassen. Da Sie eine Leinwand verwenden, verwenden Sie wahrscheinlich bereits JavaScript, so dass dies kein Problem sein sollte.

Siehe Resize HTML5 canvas to fit window, obwohl nicht identisch, sollte eine ähnliche Lösung funktionieren.

Answer 4

Größe Ihrer Leinwand Window/Browser Größe passen:

<script> 
function resizeCanvas() { 
    var canvs = document.getElementById("snow"); 
    canvs.width = window.innerWidth; 
    canvs.height = window.innerHeight; 
} 
</script> 

<body onload="resizeCanvas();"> 
    <canvas id="snow" ></canvas> 
</body> 

Answer 5

die Leinwand Höhe der innerheight Fenster einstellen und die Breite auf die innerwidth Fenster:

canvas.height = window.innerHeight; 
canvas.width = window.innerWidth; 

Wenn Sie einen bestimmten Prozentsatz wollen multipliziere sie mit dem Prozentsatz. Beispiel:

//25% of width and height 
canvas.height = window.innerHeight * 0.25; 
canvas.width = window.innerWidth * 0.25; 
//And so on for other percentages