时间戳

首页 > 解决方案 > HTML 5 画笔颜色不会改变值

javascript - HTML 5 画笔颜色不会改变值

问题描述

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

这是我的脚本和 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 链接。工作正常。我猜是因为 JQuery。http://jsfiddle.net/6zrm8tun/

标签： javascripthtmlcssfabricjs

解决方案

您的代码有两点错误：

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

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

推荐阅读