Changing the default value of canvas elements color_问答_开发者

I have a question related to HTML5 canvas. I am developing a game that requires the users to draw an image on the canvas. The tools contain Text and Rectangle tools etc... The color default value of the Text and Rectangle tools is black. So I have added more colors so the user can change the color of the font and the rectangle. The problem is that: in the first time of using the tool, when the color is clicked the font's color remains black but if the user uses the text tool again, the font's color changed according to the selected color and the same with the rectangle, it is filled with black color first then when the user draws another rectangle. the color changed from black to the selected color.

How can I change the default value from the beginning???

Edited::

ok her is my code:

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

You have to set the fillStyle before you call drawText, and it sounds like you are setting it afterwards.

Edit: In short it is happening because:

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

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

    });

Is put inside your mousemove. This means that this never gets to be attached until a mouseMove happens.

Instead, put the above code at the top level and not inside of your mousemove

Changing the default value of canvas elements color

精彩评论

关注公众号

热门标签

图文推荐

Changing the default value of canvas elements color

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：