Question

我有一个与HTML5画布相关的问题。我正在开发一种游戏，要求用户在画布上绘制图像。这些工具包含Text和Rectangle工具等...... “文本”和“矩形”工具的颜色默认值为黑色。所以我添加了更多颜色，以便用户可以更改字体和矩形的颜色。问题在于：在第一次使用工具时，单击颜色时字体的颜色仍然是黑色，但如果用户再次使用文本工具，则字体的颜色会根据所选颜色而改变，并且与矩形相同，它首先填充黑色，然后当用户绘制另一个矩形时。颜色从黑色变为所选颜色。

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

编辑::

好吧，她是我的代码：

 <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>

Answer 1

您必须先设置fillStyle ，然后再拨打drawText，这听起来就像您之后设置的那样。

编辑：简而言之，这是因为：

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

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

    });

将放在中mousemove。这意味着在鼠标移动发生之前永远不会附加它。

相反，请将上述代码放在顶层而不是mousemove

内

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

1 个答案: