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

我有一个程序用于在鼠标拖动时移动画布上的对象。不过，我希望画布适合屏幕。我不知道如何实现这一点。如果我使画布“宽度：100％;高度：100％;”，则该对象超出范围。如何让画布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{ 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>

来源

2017-10-28 parthibaraj rajasekar

如何使画布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>

来源

2017-10-28 08:33:57

你尝试不工作，因为你没有指定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。

#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({...});

如果使用香草的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元素中，否则它将略微在屏幕上呈现。

为什么？阅读here或here。

来源

2017-10-28 09:04:10

这个解决方案是不jquery的

Browser = { 
 
    Update() { 
 
     //get the width of the browser 
 
     this.width = window.innerWidth || 
 
      root.clientWidth || 
 
      body.clientWidth; 
 
     //get the height of the browser 
 
     this.height = window.innerHeight || 
 
      root.clientHeight || 
 
      body.clientHeight; 
 
    } 
 
} 
 

 
/** 
 
* @author RensvWalstijn. GitHub: https://github.com/RensvWalstijn 
 
* 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 = false, dimension = "2d") { 
 
    let ctx = cvs.getContext(dimension); 
 
    if (fullscreen) { 
 
     cvs.style.position = "fixed"; 
 
     cvs.style.left = cvs.x = 0; 
 
     cvs.style.top = cvs.y = 0; 
 
    } else { 
 
     let rect = cvs.getBoundingClientRect(); 
 
     cvs.x = rect.left; 
 
     cvs.y = rect.top; 
 
    } 
 
    cvs.ctx = ctx; 
 
    cvs.dimension = dimension; 
 
    cvs.fullscreen = fullscreen; 
 
    return cvs; 
 
} 
 

 
/** 
 
* @author RensvWalstijn. GitHub: https://github.com/RensvWalstijn 
 
* 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 (Browser.width != cvs.width) { 
 
      cvs.width = Browser.width; 
 
     } 
 
     //if the height is not the same resize the canvas height 
 
     if (Browser.height != cvs.height) { 
 
      cvs.height = Browser.height; 
 
     } 
 
    } else { 
 
     let rect = cvs.getBoundingClientRect(); 
 
     cvs.x = rect.left; 
 
     cvs.y = rect.top; 
 
    } 
 
    if (cvs.dimension == "2d") 
 
     if (clear) 
 
      cvs.ctx.clearRect(0, 0, cvs.width, cvs.height); 
 
} 
 

 
/** 
 
* @author RensvWalstijn. GitHub: https://github.com/RensvWalstijn 
 
* 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. 
 
let canvas = NewCanvas(GetId("yourCanvasId"), true); 
 

 

 
// Recommended to use this in an update function. 
 
    // To check if the width or height is changed. 
 
    Browser.Update(); 
 

 
    // If you want to update your canvas size use this: 
 
    UpdateCvs(canvas);

<canvas id="yourCanvasId"><canvas>

来源

2017-10-28 09:40:34 RensvWalstijn

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

回答

相关问题