javascript - 画布元素，画圆调整大小

Question

我正在慢慢尝试创建突破游戏以更熟悉 javascript。
我正在尝试根据窗口大小重新调整画布元素的大小，但请注意我正在根据画布的大小自动渲染重新调整大小的圆圈。我将如何独立于画布的大小渲染圆圈的大小？

//resize canvas
$(function(){
$("#canvas").width($(window).width());
});

//get a reference to the canvas
var ctx = $('#canvas')[0].getContext("2d");

//draw a circle
ctx.beginPath();
ctx.arc(75, 75, 10, 0, Math.PI*2, true); 
ctx.closePath();
ctx.fill();

这是我的小提琴：http: //jsfiddle.net/z25q7/3/

谢谢！

Answer 1

直接更改画布的width属性，而不是其 CSS style.width（这是 jQuery 所做的）：

$("#canvas")[0].width = $(window).width();

更多信息：通过 CSS 与元素属性的 HTML5 Canvas 大小