如何使用复选框控制 canvas 上的绘图

Question

我正在尝试使用复选框控制 canvas 上的绘图。

如果选中复选框，圆圈应写在 canvas 上，如果未选中复选框，则圆圈不应写在 canvas 上。

如何将此复选框扩展到外部源以控制写入和不写入 canvas（即 Arduino 等的输出）

requestAnimationFrame(animate);
const ctx = canvas1.getContext('2d');
canvas1.width = innerWidth;
canvas1.height = innerHeight;
const bgCan = copyCanvas(canvas1);
const redSize = 10, blueSize = 5; // circle sizes on pixels
const drawSpeed = 2; // when button down draw speed in pixels per frame
var X = 50, Y = 50;
var angle = 0;
var mouseButtonDown = false;
document.addEventListener('mousedown', () => mouseButtonDown = true);
document.addEventListener('mouseup', () => mouseButtonDown = false);
function copyCanvas(canvas) {
    const can = Object.assign(document.createElement("canvas"), {
        width: canvas.width, height: canvas.height
    });
    can.ctx = can.getContext("2d");
    return can;
}
function circle(ctx){
    ctx.fillStyle = 'red';
    ctx.beginPath();
    ctx.arc(X, Y, redSize, 0, Math.PI*2);
    ctx.fill();
}
function direction(ctx){
    const d = blueSize + redSize + 5;
    ctx.fillStyle = 'blue';
    ctx.beginPath();
    ctx.arc(d * Math.sin(angle) + X, d * Math.cos(angle) + Y, blueSize, 0, Math.PI*2);
    ctx.fill(); 
}
function animate(){
    ctx.clearRect(0, 0, ctx.canvas.width,  ctx.canvas.height);
    ctx.drawImage(bgCan, 0, 0);
    if (mouseButtonDown) {
        circle(bgCan.ctx);
        X += Math.sin(angle) * drawSpeed;
        Y += Math.cos(angle) * drawSpeed;
    } else {
        angle += 0.1;
        circle(ctx);
    }
    direction(ctx);
    requestAnimationFrame(animate);   
}

#canvas1{
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}

<canvas id="canvas1"></canvas>

Answer 1

添加了一个变量checkBoxChecked，它将保存复选框选中状态的值。并在 animate 函数中添加了一个绘制圆的条件。

if(checkBoxChecked) { circle(bgCan.ctx) };

requestAnimationFrame(animate);
const ctx = canvas1.getContext('2d');
canvas1.width = innerWidth;
canvas1.height = innerHeight;
const bgCan = copyCanvas(canvas1);
const redSize = 10,
  blueSize = 5; // circle sizes on pixels
const drawSpeed = 2; // when button down draw speed in pixels per frame
var X = 50,
  Y = 50;
var angle = 0;
var mouseButtonDown = false;
var checkBoxChecked = false;
document.getElementById("canvas1").addEventListener('mousedown', () => mouseButtonDown = true);
document.getElementById("canvas1").addEventListener('mouseup', () => mouseButtonDown = false);
function copyCanvas(canvas) {
  const can = Object.assign(document.createElement("canvas"), {
    width: canvas.width,
    height: canvas.height
  });
  can.ctx = can.getContext("2d");
  return can;
}

function circle(ctx) {
    ctx.fillStyle = 'red';
    ctx.beginPath();
    ctx.arc(X, Y, redSize, 0, Math.PI * 2);
    ctx.fill();
}

function direction(ctx) {
 
    const d = blueSize + redSize + 5;
    ctx.fillStyle = 'blue';
    ctx.beginPath();
    ctx.arc(d * Math.sin(angle) + X, d * Math.cos(angle) + Y, blueSize, 0, Math.PI * 2);
    ctx.fill();
  
}

function animate() {
  ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  ctx.drawImage(bgCan, 0, 0);
  if (mouseButtonDown) {
    if(checkBoxChecked) { circle(bgCan.ctx) };
    X += Math.sin(angle) * drawSpeed;
    Y += Math.cos(angle) * drawSpeed;
  } else {
    angle += 0.1;
    circle(ctx);
  }
  direction(ctx);
  requestAnimationFrame(animate);
}

function checkBoxClick() {
    checkBoxChecked = document.getElementById("chk").checked;
}

#canvas1 {
  position: absolute;
  top: 30px;
  left: 0;
  width: 100%;
  height: 100%;
}

<input type="checkbox" id="chk" value="test" onclick="checkBoxClick();" />
<label for="chk"> Draw </label>
<canvas id="canvas1"></canvas>

如何使用复选框控制 canvas 上的绘图

How to control drawing on canvas using checkbox

html

javascript

css

canvas