Fatal编程技术网
  • javascript/
  • Javascript 使Html5画布及其包含的图像跨浏览器响应

Javascript 使Html5画布及其包含的图像跨浏览器响应

javascript css html canvas

Javascript 使Html5画布及其包含的图像跨浏览器响应,javascript,css,html,canvas,Javascript,Css,Html,Canvas,我有一个画布对象，我想为web应用程序放入一个图像。我可以加载图像，但我遇到了两个问题：图像无法延伸到画布，画布无法延伸到除Firefox之外的任何浏览器中的整个div 是否有一种解决方案可以使画布具有响应性？还是只需要将画布和图像锁定到预定义的大小？图像的宽度和高度是只读的，因此无法工作 请尝试： context.drawImage(image, 0, 0, canvas.width, canvas.height); 这将以与画布相同的尺寸绘制图像（顺便说一句，您不需要每次都重新加载图像

我有一个画布对象，我想为web应用程序放入一个图像。我可以加载图像，但我遇到了两个问题：图像无法延伸到画布，画布无法延伸到除Firefox之外的任何浏览器中的整个div

是否有一种解决方案可以使画布具有响应性？还是只需要将画布和图像锁定到预定义的大小？

图像的宽度和高度是只读的，因此无法工作

请尝试：


 context.drawImage(image, 0, 0, canvas.width, canvas.height);


这将以与画布相同的尺寸绘制图像（顺便说一句，您不需要每次都重新加载图像-只需全局加载一次，然后重用
图像
变量）。



CSS和height和width属性都可以使用，不需要在大小上一致。CSS样式将决定显示的大小，您要求的画布可以拉伸。宽度和高度控制画布用于绘制的像素数

例如，这将缩放为10到1，使用抗锯齿滚动，画布中的图形将像丝绸一样平滑


<canvas id="imageView" width="1000" height="1000" style="width:100px; height:100px"></canvas>






如果不使用CSS，它们的默认值将是canvas元素的宽度和高度属性


<canvas id="imageView" width="1000" height="1000" style="width:100%; height:100%"></canvas>



<canvas id="imageView" width="1000" height="1000" style="width:100px; height:100px"></canvas>