Question

我绘制画布和我绘制里面一些形状和文字栏，当我在第二形状点击小矩形我想的是，帆布变满与移动带和小矩形的屏幕，并且当我按全屏返回之前，它再次出现

var pointX, pointY , w , h ;

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
c.width = 1000;
c.height = 650;
ctx.clearRect(0, 0, ctx.canvas.width,ctx.canvas.height);

function drawShape1(){
  ctx.beginPath();
    ctx.strokeStyle='red';
    ctx.strokeRect(10,0,720,576);
    ctx.closePath();
    ctx.beginPath();
    ctx.fillStyle='grey';
    ctx.fillRect(10,525,720,50);
    ctx.closePath();
}

function drawShape2(){
     pointX = 690;
     pointY = 550;
     w = 30;
    h = 20;
    ctx.beginPath();
    ctx.strokeStyle='red';
    ctx.strokeRect(pointX,pointY,w,h);
    ctx.closePath();
}
    

    var start = 10;
 
function frame(){
 requestAnimationFrame(frame)
 ctx.clearRect(0,0,c.width,c.height)
 drawShape1() 
 start += 2;
 ctx.font = "30px Arial";
    ctx.fillStyle = "red";
     ctx.textAlign = "left";
    ctx.fillText("Hello World",start, 560); 
  drawShape2() 
  }

frame()

      
              <canvas id="myCanvas" width="1050" height="1050"  class="col-12 col-s-12" >
                </canvas>

Answer 1

要在单击画布上的形状时执行某些操作，

画花茎您需要点击
在单击画布时检测鼠标的位置
如果鼠标位于形状内，则可以执行任何操作，在这种情况下，请全屏打开画布。

var pointX = 690,
     pointY = 550,
     w = 30,
     h = 20;

var mouse = {};

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
c.width = 1000;
c.height = 650;
ctx.clearRect(0, 0, ctx.canvas.width,ctx.canvas.height);

function drawShape1(){
  ctx.beginPath();
    //ctx.strokeStyle='red';
    ctx.strokeRect(10,0,720,576);
    ctx.closePath();
    ctx.beginPath();
    ctx.fillStyle='grey';
    ctx.fillRect(10,525,720,50);
    ctx.closePath();
}

function drawShape2(){
    ctx.beginPath();
    ctx.rect(pointX,pointY,w,h);
    //ctx.closePath();
}


    var start = 10;

function frame(){
 requestAnimationFrame(frame)
 ctx.clearRect(0,0,c.width,c.height);
 ctx.strokeStyle='red';
 drawShape1() 
 start += 2;
 ctx.font = "30px Arial";
 ctx.fillStyle = "red";
 ctx.textAlign = "left";
 ctx.fillText("Hello World",start, 560); 

 drawShape2();
 ctx.stroke(); 
  }

frame();

let i = 0;
c.addEventListener("click",(evt)=>{
  mouse = oMousePos(c, evt);
  //draw the second shape but do not stroke it
  drawShape2();
  // if the point is inside the shape 2 open the canvas in full screen
  if (ctx.isPointInPath(mouse.x, mouse.y)){
    openFullscreen(c);
  }
});

// a function to open in full screen
function openFullscreen(elem) {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) { /* Firefox */
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE/Edge */
    elem.msRequestFullscreen();
  }
}

// a function to detect the mouse position
function oMousePos(canvas, evt) {
  var ClientRect = canvas.getBoundingClientRect();
    return { //objeto
    x: Math.round(evt.clientX - ClientRect.left),
    y: Math.round(evt.clientY - ClientRect.top)
}
}

canvas{border:1px solid;}

<canvas id="myCanvas" class="col-12 col-s-12" >I prefer to declare the width and the height of the canvas in JS</canvas>

要获得全屏幕模式下，用户可以点击ESC键出来。如果要通过再次单击较小的形状来执行此操作，则会更加复杂，因为画布已缩放，并且您需要知道比例才能进行鼠标检测。或者，您可以让用户单击画布内的任何位置以退出全屏显示。

这是关闭全屏模式的功能。

function closeFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) { /* Firefox */
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE/Edge */
    document.msExitFullscreen();
  }
}

当你点击画布内的矩形，成为它里面的所有形状的全屏

1 个答案: