HTML 5笔刷颜色不会改变值

Question

所以我有一个非常简单的 HTML，它有一个 canvas 和几个按钮。当我点击绿色按钮时，还是黄色的。我希望它能改变画笔的笔触颜色。当我点击按钮时没有任何反应。颜色保持不变。

这是我的脚本和 HTML：JS + JQuery 1.7.2

var canvas;

$(function () {
canvas = window._canvas = new fabric.Canvas('canvas');
canvas.backgroundColor = '#efefef';
canvas.isDrawingMode= 1;
canvas.freeDrawingBrush.color = e.target.value;
canvas.freeDrawingBrush.width = 1;
canvas.renderAll();
document.getElementById('colorpicker').addEventListener('click', function (e) {
console.log(e.target.value);
canvas.freeDrawingBrush.color = e.target.value;
});
});

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<canvas id="canvas" width="400" height="400" class="canvas"></canvas>
<!--
<select name="colors" id="colorpick">
<option value="#FFFF00">Yellow</option>
<option value="#000000">Black</option>
<option value="#FF0000">Red</option>
</select>
-->

<div id= "colorpicker">
<button id= "yellow" value= "FFFF00">yellow</button>
<button id= "black" value= "000000">black</button>
<button id= "green" value = "#00ff00">green</button>
</div>

JSFiddle Link。工作正常。我猜是因为 JQuery。 http://jsfiddle.net/6zrm8tun/

Answer 1

您的代码有两处错误：

您在 e 存在之前引用它，这是一个例外，请将其设置为默认值，例如canvas.freeDrawingBrush.color = 'green'
您正在分配颜色，但它不是以哈希开头，更改为：<button id="yellow" value="#FFFF00"> 等

工作示例：http://jsfiddle.net/ferahl/ph5cv6oa/2/

Answer 2

试试这个朋友 - 需要整理一些东西，但我在 jsfiddle 中让它工作。

http://jsfiddle.net/nfbe076k/

var canvas;
var yellow = document.getElementById('yellow');
var black = document.getElementById('black');
var green = document.getElementById('green');
$(function () {
    canvas = window._canvas = new fabric.Canvas('canvas');
    canvas.backgroundColor = '#efefef';
    canvas.isDrawingMode= 1;
    canvas.freeDrawingBrush.color = 'green';
    canvas.freeDrawingBrush.width = 1;
    canvas.renderAll();

yellow.addEventListener('click', function (e) {
        canvas.freeDrawingBrush.color = '#' + this.value;
    });
  black.addEventListener('click', function (e) {
    canvas.freeDrawingBrush.color = '#' + this.value;
  });
    green.addEventListener('click', function (e) {
    canvas.freeDrawingBrush.color = '#' + this.value;
  });
});

<div id="colorpicker">
  <button id="yellow" value="FFFF00">yellow</button>
  <button id="black" value="000000">black</button>
  <button id="green" value="00ff00">green</button>
</div>

HTML 5笔刷颜色不会改变值

HTML 5 brush color won't change value

html

javascript

css

fabricjs