Javascript DIV意外更改形状

我试图在画布上画一个圆圈来匹配div的尺寸。我不明白这里出了什么问题（除了糟糕的样式），因为结果是一个省略号，看起来画布的大小在绘图后被拉伸了（）：

$（文档）.ready（函数（）{
scrH=$（窗口）.height（）；
scrW=$（窗口）.width（）；
//地点地图
$（'body'）。追加（“”）；
var map=$（“#pagUserStart_map1”）；
css（“宽度”，scrW-60+“px”）；
map.css（“高度”，map.css（“宽度”）；
css（“top”，scrH/2-map.height（）/2）；
css（“left”，（scrW-map.width（））/2）；
css（“位置”、“绝对”）；
css（“边距”、“0自动”）；
css（“边界半径”，“50%”）；
css（“z指数”、“100”）；
//放置画布
$（'body'）。追加（“”）；
var canvas=$（“#canvas1”）；
canvas.width（map.width（））；
canvas.height（canvas.width（））；
css（“位置”、“绝对”）；
帆布位置({
我的“中心”，
在“中心”，
地图
});
canvas=document.getElementById（“canvas1”）；
//在画布上画圆圈
var context=canvas.getContext（'2d'）；
var centerX=canvas.width/2；
var centerY=canvas.height/2；
var半径=50；
context.beginPath（）；
弧（centerX，centerY，50,0,2*Math.PI，false）；
context.shadowOffsetX=0；
context.shadowOffsetY=0；
context.shadowBlur=10；
context.shadowColor='#6565'；
context.lineWidth=10；
context.strokeStyle='#B8CADE'；
stroke（）；
});

---

我知道在使用JQuery引用“canvas1”和使用getElementById之间会出现一些问题。但是为什么呢？代码似乎不是按顺序执行的。我花了几个小时在谷歌上搜索和玩代码。。。我真的需要您的帮助。

您需要正确设置画布大小：

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

您将收到以下信息：

---

只需将您的

绝对

位置更改为

固定

。 这样地 $（文档）.ready（函数（）{

scrH=$（窗口）.height（）；
scrW=$（窗口）.width（）；
//地点地图
$（'body'）。追加（“”）；
var map=$（“#pagUserStart_map1”）；
css（“宽度”，scrW-60+“px”）；
map.css（“高度”，map.css（“宽度”）；
css（“top”，scrH/2-map.height（）/2）；
css（“left”，（scrW-map.width（））/2）；
css（“位置”、“固定”）；
css（“边距”、“0自动”）；
css（“边界半径”，“50%”）；
css（“z指数”、“100”）；
//放置画布
$（'body'）。追加（“”）；
var canvas=$（“#canvas1”）；
canvas.width（map.width（））；
canvas.height（canvas.width（））；
css（“位置”，“固定”）；
帆布位置({
我的“中心”，
在“中心”，
地图
});

设置画布元素宽度而不是画布css宽度：

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

---

您正在使用正文的宽度和高度，因此它将使用100%的宽度和高度。请使用一些预定义的宽度和高度。请尝试更新提琴，谢谢，但它似乎没有什么不同…看起来是一样的。抱歉，但这无法解决主要问题。对于画布元素，您需要使用可写宽度和高度属性/pro设置其位图大小perties.CSS只影响元素大小。太好了！这与canvas.width=map.width（）；canvas.height=map.height（）；？“太好了！这与canvas.width=map.width（）；canvas.height=map.height（）完全相同吗？”-是的。它是有效的。但是这和设置CSS属性有什么区别？我到处都找了，找不到答案。实际上它对大小有效，但出现了一个新问题：现在

位置
方法似乎不再有效。这是新的fiddle：
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", "fixed");
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", "fixed");
canvas.position({
    my: "center",
    at: "center",
    of: map
});

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