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

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

为了做一些事情，当你点击一个形状内部在画布上，你需要

1. 吸引你需要点击景观
2. 检测鼠标的位置，当你点击画布
3. 如果鼠标里面的造型，你想干什么就干什么，在这种情况下打开全屏画布。

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