javascript

Question

我有一个 canvas 并想使用 4 个输入绘制一个矩形并用 4 个数字绘制它，但我还需要确保验证该矩形是仅绘制在 canvas 边界内感谢任何验证帮助（已经准备好输入 canvas），我是编码新手，所以请原谅任何语法错误

   <script>  

  var dig = 0 
  var c;   
  var ctx;
   var cal;    
   var cal2;
   var cal3;
   var cal4;
   
   function GetVal(){

        cal = Number(document.getElementById("input1").value) ;
        cal2 = Number(  document.getElementById("input1").value);
        cal3=  Number( document.getElementById("input3").value);
        cal4 =  Number( document.getElementById("input4").value);
   }

  //DrawCanvas
 function DrawCanvas(){
 
c = document.getElementById("myCanvas");//all this need to be inside a function with the parametres
ctx = c.getContext("2d");
ctx.beginPath();
ctx.rect(cal, cal4, cal3, cal2);
ctx.stroke();
}

  function ClearCanvas(){
    ctx.clearRect(0, 0, myCanvas.width, myCanvas.height);
 }

   </script>

Answer 1

const inputs = [1,2,3,4].map(i => document.getElementById(`input${i}`));
inputs.forEach(input => input.oninput = DrawCanvas);

const canvas = document.getElementById("myCanvas");
canvas.width = 600;
canvas.height= 200;
const ctx = canvas.getContext('2d');

function validateParams(topX, topY, width, height){
  const isBetween = (val, min, max) => val > 0 && val < max;
  return isBetween(topX, 0, canvas.width)
    && isBetween(topY, 0, canvas.height)
    && isBetween(topX + width, 0, canvas.width)
    && isBetween(topY + height, 0, canvas.height)
}


function GetVal(){
    return inputs.map(input => +input.value);
}

function DrawCanvas(){
  ClearCanvas();
  const coords = GetVal();
  if(validateParams(...coords)) {
    ctx.beginPath();
    ctx.rect(...coords);
    ctx.stroke();
    ctx.closePath();
  } else {
    ctx.fillText('Invalid params', 10, 10);
  }
}

function ClearCanvas(){
  ctx.clearRect(0, 0, canvas.width, canvas.height);
}

DrawCanvas();

<input id="input1" type="number" step="1" value="200"/>
<input id="input2" type="number" step="1" value="10"/>
<input id="input3" type="number" step="1" value="-100"/>
<input id="input4" type="number" step="1" value="100"/>
<canvas id="myCanvas" />

javascript - 如何只在 canvas 边框内绘制

javascript - how to draw only inside a canvas border

validation

canvas

function