TAG
CSS
JavaScript
Result
Run
License
<canvas id="mycanvas" width="200" height="200"> <button type="button" id="btn1">Cancel</button> <button type="button" id="btn2">OK</button> </canvas>
canvas { border: 1px solid #CCC; }
window.addEventListener("load", function() { const elCanvas = document.getElementById("mycanvas"); const context = elCanvas.getContext("2d"); const elBtn1 = document.getElementById("btn1"); const elBtn2 = document.getElementById("btn2"); document.addEventListener("focus", redrawCanvas, { capture : true }); document.addEventListener("blur", redrawCanvas, { capture : true }); elCanvas.addEventListener("click", onClick, { capture : false }); redrawCanvas(); function redrawCanvas() { context.clearRect(0, 0, elCanvas.width, elCanvas.height); drawButton(elBtn1, 20, 20); drawButton(elBtn2, 20, 80); } function drawButton(elBtn, x, y) { const actived = document.activeElement === elBtn; const width = elCanvas.width / 2; const height = 50; context.fillStyle = actived ? "#FFFF00" : "#CCC"; context.fillRect(x, y, width, height); context.font = "20px consolas"; context.fillStyle = "#000"; context.textBaseline = "middle"; context.textAlign = "center"; context.fillText(elBtn.textContent, x + width / 2, y + height / 2); context.beginPath(); context.rect(x, y, width, height); context.drawFocusIfNeeded(elBtn); } function onClick(e) { const x = e.offsetX, y = e.offsetY; drawButton(elBtn1, 20, 20); if(context.isPointInPath(x, y)) elBtn1.focus({ preventScroll: true}); drawButton(elBtn2, 20, 80); if(context.isPointInPath(x, y)) elBtn2.focus({ preventScroll: true} ); } });
Console
expand_less
License
License
by DevDic
Close