以下讨论的是和相关的关于使用Css设置Canvas画布大小的问题 教程文章,内容是本站精心挑选整理的教程,希望对广大的网友给到帮助,下面是详细内容:
我们在调整画布大小时,希望画布中的图形保持不变,只是改变画布本身的大小。但是如果使用Css设置画布大小,则会出现问题。
问题描述
如果使用Css设置Canvas画布的大小,则导致画布按比例缩放到你设置的值。
原因
在Canvas元素的内部存在一个名为2d渲染环境(2d redering context)的对象,所以,通过Css设置画布尺寸会引起奇怪的效果。
解决方案
通过Html设置画布大小。可以直接在Html页面上设置Canvas元素的大小:
也可以通过js设置画布大小:
var canvas = document.getElementById("testCanvas"); canvas.width = 200; canvas.height = 100;
这两种方法都可以。
示例
首先我们创建一个宽度为200px,高度为100px的画布,它的边框为红色。然后在中间画一个大小为20*20的正方形:
代码
将画布大小缩小1倍
使用css设置画布大小
相关代码
canvas.style.width = "100px"; canvas.style.height = "50px";
效果
分析
我们发现画布是整体按比例缩小了1倍。
使用js设置画布大小
相关代码
canvas.width = 100; canvas.height = 50; //设置画布大小后,所有样式会重置。因此需要重新绘制正方形 context.fillRect(90, 40, 20, 20);
效果
分析
相当于把画布的右半部和下半部去掉了,达到了我们预期的效果。
关于关于使用Css设置Canvas画布大小的问题的内容写到这里就结束啦,您可以收藏本页网址http://www.alixixi.com/web/
a/2014031192657.shtml方便下次再访问哦。