关于使用Css设置Canvas画布大小的问题_H5之家 - 中国HTML5教程资源分享第一站

我们在调整画布大小时，希望画布中的图形保持不变，只是改变画布本身的大小。但是如果使用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的正方形：

代码<!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";效果

分析

相当于把画布的右半部和下半部去掉了，达到了我们预期的效果。