Question

我想在网页上添加响应式画布。这只是一个黑色div，应该可以用光标擦除。

在div 2（文本）顶部的Div 1（画布）。光标应擦除div 1并显示div 2。

更新

我正在使用此代码，但它无效。

var canvas = document.getElementById("canvasTop");
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);

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.save();
    ctx.globalCompositeOperation = "destination-out";
    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);
});

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; 
  width:100%; 
  height:100%;
}
#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%); 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
    <canvas id="canvasTop" width=100% height=100%></canvas>
    <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>
</div>

希望任何人都可以提供帮助！

由于

2 个答案:

答案 0 :(得分：0)

答案 1 :(得分：-1)

Answer 1

你是说这个吗？

System.DateTime stDate = DateTime.FromOADate(0);
    string sTM = "DATA";
    string sDK = System.String.Empty;
    string sBOFM = String.Empty
    Node.MyMethod(sTM, sDK, ref stDate,ref sBOFM);

https://jsfiddle.net/mansim/krzpc1wd/

Answer 2

对代码的这些更改应该会产生“刮开”效果：

在#canvasTop
不要使用CSS来更改画布大小。这样做会扭曲画布。
设置画布元素的宽度和宽度。高度等于#wrapper的宽度＆amp;高度。

以下是带有注释更改的重构代码：

ForkJoinPool-1-worker-1
ForkJoinPool-1-worker-1

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

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

如何使用光标

2 个答案: