TAG
CSS
JavaScript
Result
Run
License
<fieldset> <legend>textAlign</legend> <input type="radio" id="text-align-start" name="text-align" value="start" checked="checked" /> <label for="text-align-start">start(default)</label> <input type="radio" id="text-align-end" name="text-align" value="end" /> <label for="text-align-end">end</label> <input type="radio" id="text-align-left" name="text-align" value="left" /> <label for="text-align-left">left</label> <input type="radio" id="text-align-right" name="text-align" value="right" /> <label for="text-align-right">right</label> <input type="radio" id="text-align-center" name="text-align" value="center" /> <label for="text-align-center">center</label> </fieldset> <p><button type="button" id="btn-show">Show Text</button></p> <canvas id="mycanvas" width="200" height="50"></canvas>
#mycanvas { border: 1px solid #CCC; }
window.addEventListener("load", function() { const elShowBtn = document.getElementById("btn-show"); const elCanvas = document.getElementById("mycanvas"); let context = elCanvas.getContext("2d"); context.setLineDash([3, 3]); context.beginPath(); context.strokeStyle = "#FF0000"; context.moveTo(100, 0); context.lineTo(100, 50); context.stroke(); elShowBtn.addEventListener("click", e => { context.clearRect(0, 0, 200, 50); context.stroke(); context.font = "20px consolas"; context.textAlign = document.querySelector("input[name='text-align']:checked").value; context.fillText("Hello", 100, 30); }); });
Console
expand_less
License
License
by DevDic
Close