Canvas Full Width Height
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam

Anasayfa
İletişim
Üyeler

Canvas Full Width Height

Paylaş  :
profil
davmaneydi
GÖRÜNTÜLENME(147)
RAPOR ET
Canvas elementine #canvas adlı id yi verdim ve id ye

width:100%;
height:100%;

css özelliklerini verdim.

<div id="square">
<canvas id="canvas"></canvas>
<div>

<script>
$("#square").height($("#square").width());
$(window).resize(function () {
$("#square").height($("#square").width());
});
</script>


Yani kısacası kapsayıcı kare bir divim var içinde de bir canvas var o canvas bulunduğu ortamda her zaman %100 olması sorun çıkartır mı çalışır mı?




cArleone
cArleone 40 Gün Önce Cevaplandı
canvasın boyutu o şekilde css ile değiştirirsen,çizdirdiğin şeylerin boyutları hatalı olacaktır.tam ekran için tarayıcılar özel komutları var onları dene.
Şurada anlatmış https://h3manth.com/content/html5-canvas-full-screen-and-full-page bir bak.
davmaneydi
davmaneydi 40 Gün Önce Cevaplandı
aynen çizdiklerimin boyutu hatalı oluyordu. Aşağıdaki kod ile düzelttim.
window.onload = function () {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');

window.addEventListener('resize', resizeCanvas, false);

function resizeCanvas() {
var square = document.getElementById("square");
canvas.width = parseInt(square.style.height);
canvas.height = parseInt(square.style.height);
drawStuff();
}
resizeCanvas();

function drawStuff() {
context.beginPath();
context.moveTo(0, 0);
var x = 200,
y = 200;
// context.lineTo(100, 300);
// context.lineTo(200, 100);
// context.lineTo(300, 300);
// context.lineTo(400, 100);
for (var i = 1; i < 4; i++) {
x += 15;
context.lineTo(x, y);
y += 15;
context.lineTo(x, y);
}
context.stroke();

}
};



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol