html5画布涂鸦改变颜色
我非常努力地理解javascript,我的灵感来自Jay Weekes的代码:view source:对于这个问题的一个可能的解决方案,我有一个粗略的开始。结果是 我的想法是首先添加一个简单的UI元素来选择颜色。我能想到的最简单的事情就是链接列表html5画布涂鸦改变颜色,html,colors,html5-canvas,Html,Colors,Html5 Canvas,我非常努力地理解javascript,我的灵感来自Jay Weekes的代码:view source:对于这个问题的一个可能的解决方案,我有一个粗略的开始。结果是 我的想法是首先添加一个简单的UI元素来选择颜色。我能想到的最简单的事情就是链接列表 <div id="sketch-color"> <ul class="colorList"> <li><a href="#" data-color="black">Black<
<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>
然后,为了遵循原始的逻辑,我在基本UI读数中添加了一行:
<li>pen color: <span id="current-color"></span></li>
然后,我需要获取所有新链接,关闭它们的默认单击事件处理程序,并添加我自己的链接。我已经习惯了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);
}
好的,那太好了。我可以在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; }
然后奇迹发生了
我意识到这里有很大的改进空间。应该有一个rgb滑块或类似的东西,我应该使用HTML5数据属性,而不是关闭innerHTML
。也就是说,我正在提交我开始工作的第一个版本。我邀请你用叉子把它做得更好
更新
很抱歉,我没有明确说明如何使用这种安排添加新的颜色。基本上,我们需要向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>
如果希望链接也显示为橙色,则需要再次更改CSS:
#sketch-color li:nth-child(4) a { color:blue; }
#sketch-color li:nth-child(5) a { color:orange; }
这应该暂时有效。同样,如果我使用HTML5数据属性将rgb值直接传递给currentStrokeStyle()
,这将更容易更改,但我很懒,而且时间越来越晚了
并且添加了新的颜色。您是在询问如何格式化ui,如何将ui过滤到笔划样式值,还是如何从javascript设置笔划颜色?+*以获得超级灵感。谢谢你给我看这个。我真的不知道该怎么办:)太美了!非常感谢。我理解!只是出于好奇,如果我想要不同的颜色(如橙色、粉色等),那该怎么做?我得到的是黑色的…回到所有的步骤,看看你遗漏了哪一个。我瞎猜,您没有在
currentStrokeStyle()
函数中的switch
语句中添加新的case
。
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 +' )';
}
<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 +' )';
}
#sketch-color li:nth-child(4) a { color:blue; }
#sketch-color li:nth-child(5) a { color:orange; }