HTML5画布涂鸦更改颜色

Question

我正在努力学习JavaScript，并受到Jay Weekes的这段代码的启发：view-source:http://jayweeks.com/sketchy-structures-html5-canvas/#/ <|:{

我想让用户选择描边颜色，但不知道如何操作。我尝试了一下，但透明度失效了，颜色变成了黑色...

我使用了一个带有ID和函数的按钮，但并没有起作用。所以我求助于你。

如果我的表达不太清晰，请告诉我。

非常感谢！ :)

- Lucian_girl

---

你是在询问如何格式化UI界面，如何将UI界面过滤为笔画样式值，还是如何从Javascript设置笔画颜色？ - R Esmond

+* 为超级灵感。谢谢你向我展示这个。 - Austin Mullins

我其实不确定该如何处理 :) - Lucian_girl

Answer 1

我有一个可能的解决方案，还比较粗糙。结果可以在这个jsFiddle链接找到。

我的想法是首先添加一个简单的UI元素来选择颜色。我能想到的最简单的方法是一个链接列表。

<div id="sketch-color">
    <ul class="colorList">
        <li><a href="#" data-color="black">Black</a></li>
        <li><a href="#" data-color="red">Red</a></li>
        <li><a href="#" data-color="green">Green</a></li>
        <li><a href="#" data-color="blue">Blue</a></li>
    </ul>
</div>

你会注意到我开始研究使用HTML5数据，但我没有像应该做的那样跟进。我编辑了CSS文件，使链接更加明显。

#sketch-color li:first-of-type a { color:black; }
...

然后，为了遵循原始逻辑，我添加了一行基本UI读数：

    <li>pen color: <span id="current-color"></span></li>

从那时起，它只是JavaScript。我在“当前”元素列表中添加了另一个变量，并将其默认设置为“Black”。

var currOpacity = document.getElementById( 'current-opacity' ),
    currDensity = document.getElementById( 'current-density' ),
    currCache = document.getElementById( 'current-cache' ),
    currColor = document.getElementById( 'current-color' );
    currCache.innerHTML = '0';
    currColor.innerHTML = "Black";

然后我需要获取所有新链接，关闭它们的默认点击事件处理程序，并添加自己的处理程序。我习惯于使用jQuery，所以可能没有以最有效的方式完成。

// Color Events
var colorListItems = document.getElementById( 'sketch-color' ).getElementsByTagName('ul')[0].children;

var colorLinks = [];
for(var i = 0; i < colorListItems.length; i++)
{
    colorLinks.push(colorListItems[i].children[0]);
}

for(var i = 0; i < colorLinks.length; i++)
{
    colorLinks[i].removeEventListener("click");
    colorLinks[i].addEventListener("click", onClickColorChange, false);
}

然后我定义了事件处理程序：

//event handlers    
function onClickColorChange( e ) {
    e.preventDefault();
    currColor.innerHTML = e.target.innerHTML;
    return false;
}

好的，那很棒。我可以更改span中的文本。不是很有趣。我需要入侵Jay的绘图代码以使其发挥作用。我注意到设置颜色的决定直到调用Point.connect()函数时才发生，因此我更改了该函数中的关键行以调用一个新函数来设置线条样式：

if( totDist < maxDist*5 && drawDist < maxDist ){
  ctx.strokeStyle = currentStrokeStyle();
  ctx.line( this.x, this.y, p.x, p.y );
} else { break; }

然后定义了这个新函数：

function currentStrokeStyle() {
    var curr_color = currColor.innerHTML;
    var red = 0, green = 0, blue = 0;
    switch(curr_color) {
        case "Red": red = 255; break;
        case "Green": green = 255; break;
        case "Blue": blue = 255; break;
    };
    return 'rgba( ' + red + ',' + green + ',' + blue + ','+ uiOpacity.opacity +' )';
}

然后魔法发生了。

我意识到这里有很大的改进空间。应该有一个RGB滑块或类似的东西，我应该使用HTML5数据属性而不是依赖于innerHTML。话虽如此，我提交了第一个能工作的版本。我邀请您分叉jsfiddle并使其更好。

更新

对于没有清楚如何使用这种安排添加新颜色的人，我表示歉意。基本上，我们需要将新链接添加到UI中的颜色列表中，然后在currentStrokeStyle（）函数的switch语句中添加新的情况。因此，要添加橙色选项：

<div id="sketch-color">
    <ul class="colorList">
       <li><a href="#" data-color="black">Black</a></li>
       <li><a href="#" data-color="red">Red</a></li>
       <li><a href="#" data-color="green">Green</a></li>
       <li><a href="#" data-color="blue">Blue</a></li>
       <li><a href="#" data-color="orange">Orange</a></li>
    </ul>
</div>

并且：

function currentStrokeStyle() {
    var curr_color = currColor.innerHTML;
    var red = 0, green = 0, blue = 0;
    switch(curr_color) {
        case "Red": red = 255; break;
        case "Green": green = 255; break;
        case "Blue": blue = 255; break;
        case "Orange": red = 255; green = 128; break;
    };
    return 'rgba( ' + red + ',' + green + ',' + blue + ','+ uiOpacity.opacity +' )';
}

如果您希望链接也呈现橙色，您需要再次更改CSS：

#sketch-color li:nth-child(4) a { color:blue; }
#sketch-color li:nth-child(5) a { color:orange; }

现在应该可以使用了。如果我使用HTML5数据属性直接传递RGB值到currentStrokeStyle（），那么更改将会更容易，但是我有些懒惰，而且时间也很晚了。

新颜色已经添加到jsFiddle了。

- Austin Mullins

---

只是出于好奇，如果我想要不同的颜色（例如橙色、粉色等），该怎么做呢？我得到的都是黑色... - Lucian_girl

请回顾一下所有步骤，看看您漏掉了哪一个。我的猜测是您没有在 currentStrokeStyle() 函数的 switch 语句中添加新的 case。 - Austin Mullins