如何在 window 调整大小时重绘 canvas

Question

我正在尝试在 window 调整大小时重新绘制 canvas。

window调整大小的瞬间，canvas没有重新绘制蓝色矩形，也没有显示擦除效果。

我是 canvas 的新手，我搞不懂。

我该如何解决这个问题？

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 初始化您的 canvas 和其他元素。因为此时您正在初始化它们，所以页面上的元素可能不可用，因为它们尚未呈现。

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

2017 年 14 月 4 日更新： 在 body 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>

如何在 window 调整大小时重绘 canvas

How to redraw canvas on window resize

html

canvas

resize

erase

redraw