Javascript 将画布分配给div，使画布尺寸适应div dimenson-如何修复？

我有一个画布示例作为div背景（我从另一个示例中派生出来，不记得在哪里找到它）：

我的问题；如果我放置div 300 x 150的尺寸，画布将执行它应该执行的操作。但是如果我改变尺寸，画布应该适应div尺寸。我做错了什么，没有发生这种事

---

PS：我是初学者，所以请原谅我的愚蠢问题。

这是因为如果你不给出

宽度和
高度，默认值为
300x150
，所以在你从div得到宽度和高度后，你应该用它们来设置你的
画布的尺寸

另一点值得注意的是，您使用
div.style.background
属性来设置背景图像，但是，因为有许多与背景相关的属性（例如：JSFIDLE中的
background repeat
，
background position
，
background size
。），
background
可以一次设置所有设置。
使用
div.style.background='url（'+dataUrl+'）。它会将所有其他与背景相关的属性重写为
initial

如果要保留这些属性，可以在设置
style.background
后重置它们，也可以使用
div.style.backgroundImage
更改背景图像而不影响其他与背景相关的属性



var canvas=document.getElementsByTagName（'canvas'）[0]；
var ctx=canvas.getContext（'2d'）；
var divHeight=document.getElementById（'canvas'）.clientHeight；
var divWidth=document.getElementById（'canvas'）.clientWidth；
//得到WxH后，设置画布的尺寸。
canvas.width=divWidth；
canvas.height=divWidth；
var div1=document.getElementById（'canvas'）；
var div2=document.getElementById（'canvas2'）；
函数assignToDiv（div）{//您正在寻找的这类函数
var dataUrl=canvas.toDataURL（）；
div.style.background='url（'+dataUrl+'）；//此行将覆盖您的背景设置。
div.style.backgroundRepeat='repeat-x'；//使用此选项设置上述内容之后的背景相关属性。
}
函数assigntodival（div）{//您正在寻找的这类函数
var dataUrl=canvas.toDataURL（）；
div.style.backgroundImage='url（'+dataUrl+'）；//只有设置背景图像才会有相同的效果。
}
函数draw（）{//替换为您的逻辑
ctx.fillStyle=“rgb（100250100）”；
//如果不设置WH，则画布将为300x150，以及
//您已绘制，但超出边界被剪裁。
ctx.fillRect（10，10，divWidth-20，divHeight-20）；
}
画（）
转让予第iv部（第1分部）；
转让托迪夫（第2分部）
canvas{display:none；}
div{
宽度：600px；
高度：550px；
边框：1px纯灰；
背景重复：重复-x；
}

您的意思是要放大画布以适应
div
的尺寸吗？是
背景重复：repeat-x是您想要的吗？例如，如果div现在是
600 x 300
，您希望画布显示什么？谢谢您的评论。我不想重复背景。我想要画布，我用它来自动适应div维度。因此，如果我将div的高度更改为600，画布也会自动变为600。我试着用divHeight和divWidth来解决这个问题，但效果不太好。
var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
var divHeight = document.getElementById('canvas').clientHeight;
var divWidth = document.getElementById('canvas').clientWidth;

function assignToDiv(){ // this kind of function you are looking for
  dataUrl = canvas.toDataURL();
  document.getElementsByTagName('div')[0].style.background='url('+dataUrl+')'
}

function draw() { // replace with your logic
  ctx.fillStyle = "rgb(100, 250, 100)";
  ctx.fillRect (10, 10, divWidth-20, divHeight-20);
}

draw()
assignToDiv()