2012-02-12 31 views
29

Tôi đã đoạn mã sau trong html:Đặt kích thước Canvas sử dụng javascript

<canvas id="myCanvas" width =800 height=800> 

tôi muốn, thay vì quy định cụ thể như width800, để gọi hàm JavaScript getWidth() để có được chiều rộng ví dụ

<canvas id="myCanvas" width =getWidth() height=800> 

Cú pháp chính xác để làm điều đó là gì? Bởi vì những gì tôi đang làm không hiệu quả.

+0

Có lẽ điều này giúp đỡ: http://stackoverflow.com/questions/331052/how-to-resize-html-canvas-element – Alex

+0

bạn có thể liên quan đến bài viết này cho "phù hợp với màn hình" http://stackoverflow.com/questions/1664785/html5-canvas-resize-to-fit-window –

+0

Ý của bạn là ' 'và' '. Đó có phải là lỗi đánh máy hoặc lỗi trong mã không? –

Trả lời

21
function setWidth(width) { 
    var canvas = document.getElementById("myCanvas"); 
    canvas.width = width; 
} 
+0

Tôi muốn đặt chiều rộng của canvas không chỉ nhận được chiều rộng –

+0

xem câu trả lời được cập nhật – bozdoz

+1

@KyriacosKafas Bạn nên chọn câu trả lời được chấp nhận. :) – bozdoz

40

Bạn có thể thiết lập chiều rộng như thế này:

function draw() { 
    var ctx = (a canvas context); 
    ctx.canvas.width = window.innerWidth; 
    ctx.canvas.height = window.innerHeight; 
    //...drawing code... 
} 
+3

Chức năng vẽ không phải là vị trí tốt nhất cho mã này. Sử dụng onresize mà không có vấn đề gì. –

+0

ya này làm việc cho tôi – user889030

-3

Bạn cũng có thể sử dụng kịch bản này, chỉ cần thay đổi chiều cao và chiều rộng

<canvas id="Canvas01" width="500" height="400" style="border:2px solid #FF9933; margin-left:10px; margin-top:10px;"></canvas> 

    <script> 
     var canvas = document.getElementById("Canvas01"); 
     var ctx = canvas.getContext("2d"); 
+2

cái gì ...? gì...? gì...? –

0

Hãy thử điều này:

var w = window, 
d = document, 
e = d.documentElement, 
g = d.getElementsByTagName('body')[0], 
xS = w.innerWidth || e.clientWidth || g.clientWidth, 
yS = w.innerHeight|| e.clientHeight|| g.clientHeight; 
alert(xS + ' × ' + yS); 

document.write ('')

hoạt động với iframe và tốt.

+0

document.write ('') –

4

Hãy thử điều này:

var setCanvasSize = function() { 
canvas.width = window.innerWidth; 
canvas.height = window.innerHeight; 
} 
Các vấn đề liên quan