如何在窗口調整大小時重繪畫布

Question

我想在窗口大小調整時重繪畫布。

當窗口調整大小時，畫布不會重繪藍色矩形，也不會顯示擦除效果。

我是新來的畫布，我無法弄清楚這一點。

我該如何解決這個問題？

var canvas = document.getElementById("canvasTop"); 
 
// set the canvas element's width/height to cover #wrapper 
 
var wrapper=document.getElementById('wrapper'); 
 
var wrapperStyle=window.getComputedStyle(wrapper,null); 
 
canvas.width=parseInt(wrapperStyle.getPropertyValue("width")); 
 
canvas.height=parseInt(wrapperStyle.getPropertyValue("height")); 
 
// 
 
var ctx = canvas.getContext("2d"); 
 
    ctx.lineWidth = 10; 
 
    ctx.lineCap = "round"; 
 
    ctx.lineJoin = "round"; 
 
    ctx.fillStyle = "skyblue"; 
 
    ctx.fillRect(0, 0, canvas.width, canvas.height); 
 
    // set "erase" compositing once at start of app for better performance 
 
    ctx.globalCompositeOperation = "destination-out"; 
 

 
var canvasOffset = $("#canvasTop").offset(); 
 
var offsetX = canvasOffset.left; 
 
var offsetY = canvasOffset.top; 
 

 
var startX; 
 
var startY; 
 
var isDown = false; 
 

 
function handleMouseDown(e) { 
 
    e.preventDefault(); 
 
    startX = parseInt(e.clientX - offsetX); 
 
    startY = parseInt(e.clientY - offsetY); 
 
    isDown = true; 
 
} 
 

 
function handleMouseUp(e) { 
 
    e.preventDefault(); 
 
    isDown = false; 
 
} 
 

 
function handleMouseOut(e) { 
 
    e.preventDefault(); 
 
    isDown = false; 
 
} 
 

 
function handleMouseMove(e) { 
 
    if (!isDown) { 
 
     return; 
 
    } 
 
    mouseX = parseInt(e.clientX - offsetX); 
 
    mouseY = parseInt(e.clientY - offsetY); 
 

 
    // Put your mousemove stuff here 
 
    ctx.beginPath(); 
 
    ctx.moveTo(startX, startY); 
 
    ctx.lineTo(mouseX, mouseY); 
 
    ctx.stroke(); 
 
    startX = mouseX; 
 
    startY = mouseY; 
 
} 
 

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

 
window.addEventListener("resize", resizeCanvas, false); 
 
    
 
function resizeCanvas(e) { 
 
    var myCanvas = document.getElementById("canvasTop"); 
 
    myCanvas.width = document.documentElement.clientWidth; 
 
    myCanvas.height = document.documentElement.clientHeight; 
 

 
}

html, body {height:100%} 
 
body { margin:0; padding:0; } 
 
#wrapper { 
 
    position:relative; 
 
    margin:auto; 
 
    width:100%; 
 
    height:100%; 
 
    background-color:#ffffff; 
 
} 
 
#canvasTop { 
 
    position:absolute; 
 
    top:0px; 
 
    left:0px; 
 
} 
 
#text { 
 
    position:absolute; 
 
    left:0; 
 
    right:0; 
 
    margin-left:auto; 
 
    margin-right:auto; 
 
    width:400px; 
 
    height:200px; 
 
    text-align:center; 
 
    top: 50%; 
 
    transform:translateY(-50%); 
 
} 
 
#canvas{border:1px solid red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<h4>Drag the mouse over center to "scratch-off" reveal</h4> 
 
<div id="wrapper"> 
 
    <!-- move #text before #canvasTop --> 
 
    <div id="text"> 
 
    <p> Text Text Text Text Text Text Text Text Text</p> 
 
    <p> Text Text Text Text Text Text</p> 
 
    <p> Text Text Text Text Text Text</p> 
 
    <p> Text Text Text Text Text Text Text Text Text</p> 
 
    </div> 
 
    <canvas id="canvasTop" width=512 height=512></canvas> 
 
</div>

Answer 1

，你可能需要在在window.onload初始化你的畫布和其他elemnts。 由於在初始化它們時，頁面上的元素可能因爲它們尚未渲染而不可用。

var canvas , wrapperStyle, wrapper, ctx; 
    var startX; 
    var startY; 
    var isDown = false; 
    var canvasOffset, offsetX, offsetY; 
    window.onload = function() 
    { 
     InitCanvas(); 
    } 

    function InitCanvas() 
    { 
     canvas = document.getElementById("canvasTop"); 
     wrapper=document.getElementById('wrapper'); 
     wrapperStyle=window.getComputedStyle(wrapper,null); 
     canvas.width=parseInt(wrapperStyle.getPropertyValue("width")); 
     canvas.height=parseInt(wrapperStyle.getPropertyValue("height")); 

     ctx = canvas.getContext("2d"); 
     ctx.lineWidth = 10; 
     ctx.lineCap = "round"; 
     ctx.lineJoin = "round"; 
     ctx.fillStyle = "skyblue"; 
     ctx.fillRect(0, 0, canvas.width, canvas.height); 
     // set "erase" compositing once at start of app for better performance 
     ctx.globalCompositeOperation = "destination-out"; 

     canvasOffset = $("#canvasTop").offset(); 
     offsetX = canvasOffset.left; 
     offsetY = canvasOffset.top; 
    } 

    function resizeCanvas() 
    {  
     var myCanvas = document.getElementById("canvasTop"); 
     myCanvas.width = document.documentElement.clientWidth; 
     myCanvas.height = document.documentElement.clientHeight; 
     InitCanvas(); 
    } 

更新14-4-2017：在身體在onResize 呼叫resizeCanvas。

<body onresize="resizeCanvas(event)" > 

更新： 您可能需要連接類似事件。

<canvas id="canvasTop" width="512" height="512" onMouseDown="handleMouseDown(event)" onmousemove="handleMouseMove(event)" onMouseup="handleMouseUp(event)" onmouseout="handleMouseOut(event)" ></canvas>