JavaScript中的畫布寬度百分比
[英]Canvas width percent in javascript
問題描述
我有一個html畫布，該畫布應該占頁面的25％。 我在javascript中做了一個名為width的變量，並將其值設置為25％。 當我做一個context.clearRect（）; 使用width變量作為width參數，它並不能解決我試圖做的事情（我已經做了很多次），即當播放器矩形移動時，clearRect會保持背景循環，因此矩形不會繪圖（留下標記）。
這是我的寬度變量：
var width = 25%;
這是我的clearRect（）;
context.clearRect(0, 0, width, height);
編輯：我想我也會發布我的整個代碼，以簡化操作。
<html>
<head>
<title></title>
<style type="text/css">
body {
background-color: #222222;
}
canvas {
background-color: #000000;
width: 25%;
height: 400px;
}
</style>
</head>
<body>
<canvas id="mainCanvas"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("mainCanvas");
var context = canvas.getContext("2d");
var keys = [];
var speed = 4;
var width = 25%;
var height = 400;
window.addEventListener("keydown", function(e) {
keys[e.keyCode] = true;
}, false);
window.addEventListener("keyup", function(e) {
delete keys[e.keyCode];
}, false);
var player = {
x: 10,
y: 10,
width: 30,
height: 30
};
function game() {
update();
render();
}
function update() {
if (keys[40]) player.y++ * speed;
if (keys[38]) player.y-- * speed;
if (keys[37]) player.x-- * speed;
if (keys[39]) player.x++ * speed;
}
function render() {
context.clearRect(0, 0, (canvas.width * 0.25)), height);
context.fillStyle = "white";
context.fillRect(player.x, player.y, player.width, player.height);
}
setInterval(function() {
game();
}, 1000/30);
</script>
3 個解決方案
解決方案1
0 2015-07-06 14:08:45
您需要使用以下內容：
context.clearRect(0, 0, (canvas.width * 0.25), height);
嘗試這個？
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
body {
background-color: #222222;
}
canvas {
background-color: #000000;
width: 25%;
height: 400px;
}
</style>
</head>
<body>
<canvas id="mainCanvas"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("mainCanvas");
var context = canvas.getContext("2d");
var keys = [];
var speed = 4;
// var width = 25%;
var height = 400;
window.addEventListener("keydown", function(e) {
keys[e.keyCode] = true;
}, false);
window.addEventListener("keyup", function(e) {
delete keys[e.keyCode];
}, false);
var player = {
x: 10,
y: 10,
width: 30,
height: 30
};
function game() {
update();
render();
}
function update() {
if (keys[40]) player.y++ * speed;
if (keys[38]) player.y-- * speed;
if (keys[37]) player.x-- * speed;
if (keys[39]) player.x++ * speed;
}
function render() {
context.clearRect(0, 0, (canvas.width * 0.25), height);
context.fillStyle = "white";
context.fillRect(player.x, player.y, player.width, player.height);
}
setInterval(function() {
game();
}, 1000/30);
</script>
</body>
</html>
解決方案2
0 2015-07-06 14:38:47
不確定您實際上要問什么，但是您的代碼有兩個語法錯誤-因此無法正確執行：
var keys = [];
var speed = 4;
//var width = 25%; //This is no valid assignment and the value is not used..
var height = 400;
和
function render() {
//context.clearRect(0, 0, (canvas.width * 0.25)), height); //One bracket too much, can skip both tho..
context.clearRect(0, 0, canvas.width * 0.25, height);
解決方案3
0 2015-07-06 16:22:30
您需要將畫布放入容器中，並按所需的方式設置容器，然后使用以下方法使畫布占容器屬性的100％
clientHeight
和
clientWidth
JSFiddle： https ：//jsfiddle.net/53n2s0s9/
如何在JavaScript中以百分比設置div的寬度？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.