更改画布元素颜色的默认值

我有一个与HTML5画布相关的问题。我正在开发一款游戏，需要用户在画布上绘制图像。这些工具包含文本和矩形工具等... 文本和矩形工具的颜色默认值为黑色。所以我添加了更多的颜色，以便用户可以更改字体和矩形的颜色。问题在于：第一次使用该工具时，单击该颜色时该字体的颜色保持黑色，但如果用户再次使用该文本工具，该字体的颜色将根据所选颜色进行更改并与矩形相同，当用户绘制另一个矩形时，它首先填充黑色。颜色从黑色变为所选颜色。更改画布元素颜色的默认值

如何从头开始更改默认值？

编辑::

确定她是我的代码：

<html> 
<head> 
<meta charset="utf-8"> 
<style type="text/css"> 
#clr div{ 

cursor:pointer; 

cursor:hand; 

width:20px; 

height:20px; 


float:left; 
margin-right:10px; 

} 
#clr2 font{ 

cursor:pointer; 

cursor:hand; 

margin-top:100px; 
margin-right:10px; 

} 
#clr3 font{ 

cursor:pointer; 

cursor:hand; 

margin-top:100px; 
margin-right:10px; 


} 


</style> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript" ></script> 

<script type="text/javascript"> 



// Drawing options 

var tool; 
var tool_default = ''; 


function drawLine(){ 
// Get the tool select input. 

var tool_select = document.getElementById('dtool'); 
if (!tool_select) { 
    alert('Error: failed to get the dtool element!'); 
    return; 
} 
tool_select.addEventListener('change', ev_tool_change, false); 

// Activate the default tool. 
if (tools[tool_default]) { 
    tool = new tools[tool_default](); 
    tool_select.value = tool_default; 
} 

// Attach the mousedown, mousemove and mouseup event listeners. 
layer3.addEventListener('mousedown', ev_canvas, false); 
layer3.addEventListener('mousemove', ev_canvas, false); 
layer3.addEventListener('mouseup', ev_canvas, false); 
} 

// The general-purpose event handler. This function just determines the mouse 
// position relative to the canvas element. 
function ev_canvas (ev) { 
if (ev.layerX || ev.layerX == 0) { // Firefox 
    ev._x = ev.layerX; 
    ev._y = ev.layerY; 
} 
// Call the event handler of the tool. 
var func = tool[ev.type]; 
if (func) { 
    func(ev); 
} 
} 

// The event handler for any changes made to the tool selector. 
function ev_tool_change (ev) { 
if (tools[this.value]) { 
    tool = new tools[this.value](); 
} 
} 



// This object holds the implementation of each drawing tool. 
var tools = {}; 

// The drawing pencil. 

//Draw Rectangle 
tools.rectangle = function() { 
var tool = this; 
this.started = false; 
this.mousedown = function (ev) { 
tool.started = true; 
tool.x0 = ev._x; 
tool.y0 = ev._y; 
context3.fillStyle=""; 
}; 

this.mousemove = function (ev) { 
if (!tool.started) { 
    return; 
} 

var x = Math.min(ev._x, tool.x0), 
    y = Math.min(ev._y, tool.y0), 
    w = Math.abs(ev._x - tool.x0), 
    h = Math.abs(ev._y - tool.y0); 

context3.clearRect(0, 0, layer3.width, layer3.height); 

if (!w || !h) { 
    return; 
} 
$("#clr div").click(function(){ 

      context3.fillStyle = $(this).css("background-color"); 

    }); 
context3.fillRect(x, y, w, h); 
}; 


this.mouseup = function (ev) { 
if (tool.started) { 
    tool.mousemove(ev); 
    tool.started = false; 
    img_update(); 
} 
}; 
};

<canvas class="canvas3" id="layer3" width="500" height="200" style="border:1px solid"> </canvas> 





     <p><label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Drawing tool: <select id="dtool" onClick="drawLine()"> 

         <option value="pencil">Pencil</option> 
            <option value="rectangle">Rectangle</option> 


     </select></label></p> 
     <div id="clr"> 
<p>&nbsp;</p> 

<div style="background-color:white;"> </div> 

<div style="background-color:red;"> </div> 

<div style="background-color:green;"> </div> 

<div style="background-color:orange;"> </div> 

<div style="background-color:brown;"> </div> 

<div style="background-color:#d2232a;"> </div> 







</div> 

</div> 

<script type="text/javascript"> 


layer3 = document.getElementById("layer3"); 
context3 = layer3.getContext("2d"); 




</script> 



</body> 

</html>

来源

2011-07-27 Amal

您必须设置fillStyle之前你打电话drawText，这听起来像你后来设置它。

编辑：总之它发生的原因是：

$("#clr div").click(function(){ 

      context3.fillStyle = $(this).css("background-color"); 

    });

放在里面您mousemove。这意味着在mouseMove发生之前，这绝不会被连接。

相反，把上面的代码在顶层，而不是里面的你mousemove

来源

2011-07-27 12:29:26

我这样做，但问题仍然存在 – Amal

那么有可能是一个普通的老错误在你的代码，就像一个拼写错误。我们可以看到代码吗？ –

好的我发布了我的代码。请看看并告诉我错误在哪里。 – Amal

更改画布元素颜色的默认值

回答

相关问题