javascript - DIV 意外改变形状

Question

我正在尝试在 Canvas 中绘制一个圆圈以匹配 div 的尺寸。我不明白这里有什么问题(除了糟糕的风格)，因为结果是一个省略号，看起来 Canvas 尺寸在绘图后被拉伸(stretch)了(JSFiddle here):

$(document).ready(function() {

scrH = $(window).height();
scrW = $(window).width();

// place map
$('body').append("<div id='pagUserStart_map1' style='border:5px solid red;'></div>");
var map = $("#pagUserStart_map1");
map.css("width", scrW - 60 + "px");
map.css("height", map.css("width"));
map.css("top", scrH / 2 - map.height()/2);
map.css("left", (scrW - map.width()) / 2);

map.css("position", "absolute");
map.css("margin", "0 auto");
map.css("border-radius", "50%");
map.css("z-index", "100");

//place canvas
$('body').append("<canvas id='canvas1'></canvas>");
var canvas = $("#canvas1");
canvas.width(map.width());
canvas.height(canvas.width());
canvas.css("position", "absolute");
canvas.position({
    my: "center",
    at: "center",
    of: map
});

canvas = document.getElementById("canvas1");  

// draw circle in canvas
var context = canvas.getContext('2d');
var centerX = canvas.width / 2;
var centerY = canvas.height /2 ;
var radius = 50;

context.beginPath();
context.arc(centerX, centerY, 50, 0, 2 * Math.PI, false);
context.shadowOffsetX = 0;
context.shadowOffsetY = 0;
context.shadowBlur = 10;
context.shadowColor = '#656565';
context.lineWidth = 10;
context.strokeStyle = '#B8CADE';
context.stroke();
});

我知道在我使用 JQuery 引用“canvas1”和使用 getElementById 之间出现问题。但为什么？看起来代码没有按顺序执行。我花了几个小时在谷歌上搜索和玩弄代码……我真的需要你的帮助。

Answer 1

您需要正确设置 Canvas 大小:

canvas.attr('width', map.width());
canvas.attr('height', map.height());

你会收到这个: http://i.stack.imgur.com/5UsGQ.png