如何使用jquery更改图像部分的颜色

Question

我搜索了很多。但是无法做出决定，我是否应该使用带有区域标签的画布 api 或 html 映射来在单击特定颜色时为图像的一部分着色。就像，下面的链接。

Example link

请给我建议，我应该以哪种方式去或尝试制作？

Answer 1

你试过了吗？

HTML Tag Area

已编辑： 我不是专家，但我不相信只有做某事的方法。我有我的 ptoject 标签区。

我找到了这个，也许可以帮到你。

Canvas

HTML

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);</textarea>

JS

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");
var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var edit = document.getElementById('edit');
var code = textarea.value;

function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}

reset.addEventListener('click', function() {
  textarea.value = code;
  drawCanvas();
});

edit.addEventListener('click', function() {
  textarea.focus();
})

textarea.addEventListener('input', drawCanvas);
window.addEventListener('load', drawCanvas);