Question

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

//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();

此处提供更多信息：Size of HTML5 Canvas via CSS versus element attributes

画布元素，绘制圆圈调整大小

1 个答案: