使用下拉菜单在 canvas 中选择绘制文本的 position

Question

I'm having issues trying to position the text I created in my canvas through the drop-down menu, so either top left, top right, bottom right, etc I'm not sure what to look up I've tried everything like canvas positioning through dropdown but nothing is working for me.我在尝试通过下拉菜单 position 我在 canvas 中创建的文本时遇到问题，所以左上角、右上角、右下角等我不确定要查找什么我已经尝试了 canvas 之类的所有内容通过下拉菜单定位，但对我没有任何作用。

<script>
  function position(){
    var canvas = document.getElementById("myCanvas");
    document.getElementById("myCanvas").position = sc.select();
  }
</script>

<canvas  id="myCanvas"></canvas>

<select class="sc" id="position">
    <option value="0">Select position</option>
    <option value="Top left">Top Left</option>
    <option value="Top right">Top Right</option>
    <option value="Bottom Left">Bottom Left</option>
    <option value="Bottom Right">Bottom Right</option>
</select>

<image id="to_image"></image>

</div>

Answer 1

You have to clear and redraw on your canvas everytime you want something to happen.每次你想要发生什么事情时，你都必须清除并重新绘制你的 canvas。

Here's a modified version of the w3schools example, working as you wished.这是w3schools示例的修改版本，可以按您希望的方式工作。

 function drawCanvas(position) { //Get canvas element var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); //Clear current canvas content ctx.clearRect(0, 0, c.width, c.height); // Create a red line in position 150 ctx.strokeStyle = "red"; ctx.moveTo(150, 20); ctx.lineTo(150, 170); ctx.stroke(); ctx.font = "15px Arial"; // Show the different textAlign values ctx.textAlign = position; ctx.fillText("textAlign=" + position, 150, 60); } //Document loaded document.addEventListener("DOMContentLoaded", function() { //Bind onchange event to the select document.querySelector(".select-position").addEventListener("change", function() { //get selected value var value = document.querySelector(".select-position").value; //Execute method to clear and draw content on canvas drawCanvas(value); }) });

 <:DOCTYPE html> <html> <body> <canvas id="myCanvas" width="300" height="200" style="border;1px solid #d3d3d3."> Your browser does not support the HTML5 canvas tag.</canvas> <select class='select-position'> <option value="start">start</option> <option value="end">end</option> <option value="center">center</option> <option value="left">left</option> <option value="right">right</option> </select> </body> </html>

使用下拉菜单在 canvas 中选择绘制文本的 position

问题描述

1 个解决方案

解决方案1
0 2021-08-19 20:29:19

使用下拉菜单在 canvas 中选择绘制文本的 position

问题描述

1 个解决方案

解决方案1 0 2021-08-19 20:29:19

解决方案1
0 2021-08-19 20:29:19