Question

我有一个html中的画布应该是页面的25％。我在javascript中创建了一个名为width的变量，并将它的值设为25％。当我创建context.clearRect（）;使用宽度变量作为宽度参数，它并没有解决它我正在尝试做的事情（我做了很多次），当播放器矩形移动时，clearRect保持背景循环，因此矩形是＆n ＃39;绘图（留下标记）。
这是我的宽度变量：

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>

Answer 1

您需要使用以下内容：

weightedList

试试这个？

context.clearRect(0, 0, (canvas.width * 0.25), height);

Answer 2

不确定您实际想要问什么，但您的代码有两个语法错误 - 因此它无法正确执行：

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);

Answer 3

您需要将画布放在容器中，并按照您想要的方式设置容器，然后使用

制作100％容器属性的画布

clientHeight

和

clientWidth

JSFiddle：https://jsfiddle.net/53n2s0s9/

javascript中的画布宽度百分比

3 个答案: