Question

我有一个程序，用于在鼠标拖动时在画布上移动对象。但是，我希望画布适合屏幕。我不知道如何实现这一目标。如果我制作画布＆＃34;宽度：100％;高度：100％;＆＃34;，然后对象超出范围。

<!doctype html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" media="all" href="css/reset.css"/>    <!-- reset css -->
        <script type="text/javascript" src="http://code.jquery.com/jquery.min.js">    
        </script>

        <style>
        body{ background-color: ivory; }
        canvas{border:1px solid red;}
    </style>

    <script>
        $(function(){
            var img = new Image();
            img.onload = function(){
                ctx.drawImage(img, 0,0);
            };
            img.src = "http://images.christmastimeclipart.com/images/2/1271716593176_1788/img_1271716593176_17881.jpg";

            var canvas=document.getElementById("canvas");
            var ctx=canvas.getContext("2d");
            var canvasOffset=$("#canvas").offset();
            var offsetX=canvasOffset.left;
            var offsetY=canvasOffset.top;
            var canvasWidth=canvas.width;
            var canvasHeight=canvas.height;
            var isDragging=false;

     // functions to handle mouseup, mousedown, mousemove, mouseout events

             $("#canvas").mousedown(function(e){handleMouseDown(e);});
             $("#canvas").mousemove(function(e){handleMouseMove(e);});
             $("#canvas").mouseup(function(e){handleMouseUp(e);});
             $("#canvas").mouseout(function(e){handleMouseOut(e);});

        }); // end $(function(){});
    </script>

    </head>

    <body>
        <canvas id="canvas" width=400 height=300></canvas>
    </body>
</html>

Answer 1

如何让画布100％适合屏幕？

<!doctype html>
<html>
<head>
    <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
    <!-- reset css -->
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: ivory;
        }

        #canvas {
            position: absolute;
            width: 100%;
            height: 100%;
            border: 1px solid red;
        }
    </style>
    <script>
        $(function () {
            var img = new Image();
            img.onload = function () {
                ctx.drawImage(img, 0, 0);
            };
            img.src =
                "http://images.christmastimeclipart.com/images/2/1271716593176_1788/img_1271716593176_17881.jpg";

            var canvas = document.getElementById("canvas");
            var ctx = canvas.getContext("2d");
            var canvasOffset = $("#canvas").offset();
            var offsetX = canvasOffset.left;
            var offsetY = canvasOffset.top;

            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;

            /*var canvasWidth=canvas.width;
            var canvasHeight=canvas.height;*/

            var isDragging = false;

            // functions to handle mouseup, mousedown, mousemove, mouseout events

            $("#canvas").mousedown(function (e) {
                handleMouseDown(e);
            });
            $("#canvas").mousemove(function (e) {
                handleMouseMove(e);
            });
            $("#canvas").mouseup(function (e) {
                handleMouseUp(e);
            });
            $("#canvas").mouseout(function (e) {
                handleMouseOut(e);
            });

        }); // end $(function(){});
    </script>
</head>
<body>
    <canvas id="canvas"></canvas>
</body>
</html>

Answer 2

您的尝试无效，因为您没有为画布的父级（在本例中为width元素）指定height和body。此外，默认情况下，body元素具有填充或边距。所以你也应该中和它。

基于您的尝试的CSS解决方案：

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
#canvas {
    width: 100%;
    height: 100%;
}

替代CSS解决方案

您还可以将画布的position设置为fixed或absolute（视具体情况而定）。如果您使用fixed，则取决于window。如果您使用absolute，请确保其所有祖先都没有position: relative使其依赖window，除非其最近的祖先与position: relative相对于window {1}}。

#canvas {
    position: fixed; /* absolute */
    top: 0;
    left: 0;
    width: 100vw;    /* 100% */
    height: 100vh;   /* 100% */
}

Javascript解决方案

如果使用jQuery：

var $canvas = $('#canvas'),
    $window = $(window);

$canvas.attr({
    width: $window.width(),
    height: $window.height()
});

// Or use $canvas.css({...});

如果使用vanilla JavaScript：

var canvas = document.getElementById('canvas');

canvas.setAttribute('width', window.innerWidth);
canvas.setAttribute('height', window.innerHeight);

// Or use canvas.style.width = ... and canvas.style.height = ...

注意

如果您使用的是CSS解决方案，则可能还需要将box-sizing: border-box添加到#canvas元素中，否则它会略微偏离屏幕。

为什么呢？请阅读：

css-tricks

W3S

MDN

Answer 3

此解决方案没有 jquery。

此方法在IE8下无效：

/**
 * @author TessavWalstijn. GitHub: https://github.com/TessavWalstijn
 * Sets the canvas properties.
 * @param {object} Cvs Give the html canvas Id.
 * @param {boolean} Fullscreen Change the canvas fullscreen default false.
 * @param {string} Dimension Change the canvas dimension default "2d".
 * @return {object}
 */
function NewCanvas(cvs, fullscreen, dimension) {
    if (!dimension) dimension = "2d";
    var ctx = cvs.getContext(dimension);
    if (fullscreen) {
        cvs.style.position = "fixed";
        cvs.style.left = cvs.x = 0;
        cvs.style.top = cvs.y = 0;
    } else {
        var rect = cvs.getBoundingClientRect();
        cvs.x = rect.left;
        cvs.y = rect.top;
    }
    cvs.ctx = ctx;
    cvs.dimension = dimension;
    cvs.fullscreen = fullscreen;
    return cvs;
}

/**
 * @author TessavWalstijn. GitHub: https://github.com/TessavWalstijn
 * Updates the canvas width and hight.
 * @param {object} Cvs NewCanvas() object.
 * @param {boolean} Clear Change the canvas clear default true.
 */
function UpdateCvs(cvs, clear = true) {
    if (cvs.fullscreen) {
        //if the width is not the same resize the canvas width
        if (window.innerWidth != cvs.width) {
            cvs.width = window.innerWidth;
        }
        //if the height is not the same resize the canvas height
        if (window.innerHeight != cvs.height) {
            cvs.height = window.innerHeight;
        }
    } else {
        let rect = cvs.getBoundingClientRect();
        cvs.x = rect.left;
        cvs.y = rect.top;
    }
    if (cvs.dimension == "2d")
        if (clear)
            cvs.ctx.fillRect(0, 0, cvs.width, cvs.height);
}

/**
 * @author TessavWalstijn. GitHub: https://github.com/TessavWalstijn
 * get html element by id.
 * @param {string} id give the html element id.
 * @return {object} document.getElementById(id);
 */
function GetId(id) { return document.getElementById(id) }

// To create your canvas object.
var canvas = NewCanvas(GetId("yourCanvasId"), true);

// If you want to update your canvas size use this:
window.addEventListener("resize", function() {
    UpdateCvs(canvas);
});

// Set it to current width
UpdateCvs(canvas);

<canvas id="yourCanvasId"><canvas>

如何让帆布100％适合屏幕？

3 个答案: