HTML 5刷颜色不会改变值

Question

So I have this really simple HTML that has a canvas, and a few buttons. When I click the green button, or yellow. I would like it to change my brush's stroke color. When I click the button nothing happens. The color stays the same.

Here's my script and 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. Works properly. I guess because of the JQuery. http://jsfiddle.net/6zrm8tun/

Answer 1

You have 2 things wrong with your code:

1. You're referencing e before it exists which is an exception, set that to a default eg canvas.freeDrawingBrush.color = 'green'
2. You're assigning the colour but it doesn't start with a hash, change to: <button id="yellow" value="#FFFF00"> etc

Working example: http://jsfiddle.net/ferahl/ph5cv6oa/2/

Answer 2

Try this buddy - need to tidy a few things up but I got this working in 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>