如何在窗口调整大小时重绘画布

FS

当窗口调整大小时,我试图重新绘制画布。

在窗口调整大小的那一刻,画布不会重绘蓝色矩形,也不会显示擦除效果。

我是画布的新手,我无法弄清楚。

我怎样才能解决这个问题?

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>

卡尔佩什·马哈詹

您可能需要在 window.onload 中初始化您的画布和其他元素。因为在您初始化它们时,页面上的元素可能不可用,因为它们尚未呈现。

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

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

jQuery .remove()不删除(在窗口调整大小时)

来自分类Dev

jQuery Toggle在窗口调整大小时不显示

来自分类Dev

如何防止导航栏在窗口调整大小时转移?

来自分类Dev

在窗口调整大小时触发jQuery插件吗?

来自分类Dev

在窗口调整大小时重新运行jQuery插件实例

来自分类Dev

如何在窗口调整大小时更改jQuery动画值

来自分类Dev

如何在窗口调整大小时覆盖我的数组?

来自分类Dev

Java在窗口调整大小时反跳和限制

来自分类Dev

如何在调整大小时将html元素固定在窗口的底部,而不是在滚动时将其固定在窗口的底部?

来自分类Dev

在窗口调整大小上动态调整画布大小

来自分类Dev

vuejs在窗口调整大小时获取参考元素的高度

来自分类Dev

removeClass()在窗口调整大小时不起作用

来自分类Dev

画布-在窗口调整大小时转换鼠标坐标

来自分类Dev

如何在窗口调整大小时重置jQuery scrollspy的最小值/最大值

来自分类Dev

如何在窗口调整大小时重新绘制SVG地图?

来自分类Dev

如何在窗口调整大小时使用Jquery从DOM中添加/删除Div

来自分类Dev

如何防止导航栏在窗口调整大小时转移?

来自分类Dev

在窗口调整大小时刷新SVG坐标

来自分类Dev

在窗口调整大小时隐藏元素

来自分类Dev

水平对齐div,在窗口调整大小时停止浮动

来自分类Dev

Vim:如何在窗口调整大小时使缓冲区自动平均分配空间

来自分类Dev

如何在窗口调整大小时更改jQuery动画值

来自分类Dev

在窗口调整大小时更新角度服务变量

来自分类Dev

响应式jQuery画布,画布背景在窗口调整大小时消失

来自分类Dev

您如何在窗口调整大小时使用角度调整Facebook插件注释(fb-comments)的大小?

来自分类Dev

Java在窗口调整大小时反跳和限制

来自分类Dev

如何在窗口调整大小时禁用/重新启用Javascript?

来自分类Dev

页眉在窗口调整大小时移动

来自分类Dev

如何在窗口调整大小时为等高的孩子重新加载 div

Related 相关文章

  1. 1

    jQuery .remove()不删除(在窗口调整大小时)

  2. 2

    jQuery Toggle在窗口调整大小时不显示

  3. 3

    如何防止导航栏在窗口调整大小时转移?

  4. 4

    在窗口调整大小时触发jQuery插件吗?

  5. 5

    在窗口调整大小时重新运行jQuery插件实例

  6. 6

    如何在窗口调整大小时更改jQuery动画值

  7. 7

    如何在窗口调整大小时覆盖我的数组?

  8. 8

    Java在窗口调整大小时反跳和限制

  9. 9

    如何在调整大小时将html元素固定在窗口的底部,而不是在滚动时将其固定在窗口的底部?

  10. 10

    在窗口调整大小上动态调整画布大小

  11. 11

    vuejs在窗口调整大小时获取参考元素的高度

  12. 12

    removeClass()在窗口调整大小时不起作用

  13. 13

    画布-在窗口调整大小时转换鼠标坐标

  14. 14

    如何在窗口调整大小时重置jQuery scrollspy的最小值/最大值

  15. 15

    如何在窗口调整大小时重新绘制SVG地图?

  16. 16

    如何在窗口调整大小时使用Jquery从DOM中添加/删除Div

  17. 17

    如何防止导航栏在窗口调整大小时转移?

  18. 18

    在窗口调整大小时刷新SVG坐标

  19. 19

    在窗口调整大小时隐藏元素

  20. 20

    水平对齐div,在窗口调整大小时停止浮动

  21. 21

    Vim:如何在窗口调整大小时使缓冲区自动平均分配空间

  22. 22

    如何在窗口调整大小时更改jQuery动画值

  23. 23

    在窗口调整大小时更新角度服务变量

  24. 24

    响应式jQuery画布,画布背景在窗口调整大小时消失

  25. 25

    您如何在窗口调整大小时使用角度调整Facebook插件注释(fb-comments)的大小?

  26. 26

    Java在窗口调整大小时反跳和限制

  27. 27

    如何在窗口调整大小时禁用/重新启用Javascript?

  28. 28

    页眉在窗口调整大小时移动

  29. 29

    如何在窗口调整大小时为等高的孩子重新加载 div

热门标签

归档