为什么我修改不了canvas画布大小
1个回答
2017-04-25
展开全部
在Html页面上加入canvas元素(不能使用js动态加入canvas)。
通过Html设置画布大小。可以直接在Html页面上设置Canvas元素的大小:
<canvas id="testCanvas" width="200" height="100"></canvas>
也可以通过js设置画布大小:
var canvas = document.getElementById("testCanvas");
canvas.width = 200;
canvas.height = 100;
这两种方法都可以。
需要注意的是,设置画布大小后,画布所有的样式和内容会重置(如画布上的图形会消失,在设置画布大小后需要重新绘制)。
示例
首先我们创建一个宽度为200px,高度为100px的画布,它的边框为红色。然后在中间画一个大小为20*20的正方形:
代码
复制代码
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<canvas id="testCanvas"></canvas>
<script>
var canvas, context;
canvas = document.getElementById("testCanvas");
canvas.width = 200;
canvas.height = 100;
canvas.style.border = "1px solid red";
context = canvas.getContext("2d");
context.strokeStyle = "#99cc33";
context.fillRect(90, 40, 20, 20);
</script>
</body>
</html>
复制代码
将画布大小缩小1倍
使用css设置画布大小
相关代码
canvas.style.width = "100px";
canvas.style.height = "50px";
效果
分析
我们发现画布是整体按比例缩小了1倍。
使用js设置画布大小
相关代码
复制代码
canvas.width = 100;
canvas.height = 50;
//设置画布大小后,所有样式会重置。因此需要重新绘制正方形
context.fillRect(90, 40, 20, 20);
复制代码
效果
分析
相当于把画布的右半部和下半部去掉了,达到了我们预期的效果。
通过Html设置画布大小。可以直接在Html页面上设置Canvas元素的大小:
<canvas id="testCanvas" width="200" height="100"></canvas>
也可以通过js设置画布大小:
var canvas = document.getElementById("testCanvas");
canvas.width = 200;
canvas.height = 100;
这两种方法都可以。
需要注意的是,设置画布大小后,画布所有的样式和内容会重置(如画布上的图形会消失,在设置画布大小后需要重新绘制)。
示例
首先我们创建一个宽度为200px,高度为100px的画布,它的边框为红色。然后在中间画一个大小为20*20的正方形:
代码
复制代码
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<canvas id="testCanvas"></canvas>
<script>
var canvas, context;
canvas = document.getElementById("testCanvas");
canvas.width = 200;
canvas.height = 100;
canvas.style.border = "1px solid red";
context = canvas.getContext("2d");
context.strokeStyle = "#99cc33";
context.fillRect(90, 40, 20, 20);
</script>
</body>
</html>
复制代码
将画布大小缩小1倍
使用css设置画布大小
相关代码
canvas.style.width = "100px";
canvas.style.height = "50px";
效果
分析
我们发现画布是整体按比例缩小了1倍。
使用js设置画布大小
相关代码
复制代码
canvas.width = 100;
canvas.height = 50;
//设置画布大小后,所有样式会重置。因此需要重新绘制正方形
context.fillRect(90, 40, 20, 20);
复制代码
效果
分析
相当于把画布的右半部和下半部去掉了,达到了我们预期的效果。
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询