html5画布根据选择输入绘制具有指定颜色的边框答案

【问题标题】：html5 canvas draw border with specified color based on select inputhtml5画布根据选择输入绘制具有指定颜色的边框
【发布时间】：2015-10-08 19:07:04
【问题描述】：

我想在 HTML5 画布元素中绘制彩色边框，其中边框的颜色基于选择输入元素的选定值。

<select name="color" id="color">
    <option value="">Choose color</option>
    <option value="ff0000">Red</option>
    <option value="000000">Black</option>
</select>

我如何在 javascript 中执行此操作？如何捕捉所选项目的值并在画布上即时更改边框颜色？

【问题讨论】：

边框必须是“HTML边框”还是必须使用绘图调用在画布内绘制？

标签： javascript html canvas

【解决方案1】：

这里是demo。

HTML

<select name="color" id="color">
    <option value="">Choose color</option>
    <option value="ff0000">Red</option>
    <option value="000000">Black</option>
</select>

<canvas id="display"></canvas>

$( "#color" ).change(function() {
        drawRectangle($(this).val());
});

function drawRectangle(color) {
    var c=document.getElementById("display");
    var ctx=c.getContext("2d");
    ctx.rect(20,20,150,100);
    ctx.strokeStyle="#" + color;
    ctx.stroke();
}

【讨论】：

谢谢！只需几行代码就可以解决问题 :-) 祝你有美好的一天

【解决方案2】：

这应该可以解决问题，使用 JQuery 在选择框更改时触发事件，获取下拉列表的值，并使用 JQuery 操作该 div 的 CSS 规则。

编码愉快！

  <html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  </head>

  <body>
      <select name="color" id="color">
          <option value="">Choose color</option>
          <option value="ff0000" selected = "selected">Red</option>
          <option value="000000">Black</option>
      </select>


      <div id = "change-div">
        some cool content here!!
      </div>
  </body>

  </html>

  <script>
      $('#color').change(function() {
        var color = $('#color');
        var selected = color.val();
        console.log('The Selected value is: ' + selected);
        $('#change-div').css('border-color', selected);
        $('#change-div').css('border-width', '5px');
        $('#change-div').css('border-style', 'solid');
      });
  </script>

【讨论】：

【解决方案3】：

如果你正在寻找CSS边框，试试这个：

var myCanvas = document.getElementById('myCanvas');
document.getElementById('color').addEventListener('change', function() {
  if (this.value) {
    myCanvas.style.borderColor = '#' + this.value;
  }
});

#myCanvas {
  border: solid 10px #000000;
}

<select name="color" id="color">
  <option value="">Choose color</option>
  <option value="ff0000">Red</option>
  <option value="000000">Black</option>
</select>
<br>
<canvas id="myCanvas"></canvas>

如果你想让它做canvas方式：

var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');

context.beginPath();
context.rect(188, 50, 200, 100);
context.fillStyle = 'green';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'black';
context.stroke();

document.getElementById('color').addEventListener('change', function () {
    if (this.value) {
        context.strokeStyle = '#' + this.value;
        context.stroke();
    }
});

<!DOCTYPE HTML>
<html>

<head>
  <style>
    body {
      margin: 0px;
      padding: 0px;
    }
  </style>
</head>

<body>
<select name="color" id="color">
    <option value="">Choose color</option>
    <option value="ff0000">Red</option>
    <option value="000000">Black</option>
</select>
<br>
  <canvas id="myCanvas" width="578" height="200"></canvas>
</body>

</html>

【讨论】：