Question

您好我无法使用我的绘画画布按钮来更改画笔的颜色以在画布旁边移动。不幸的是，它似乎陷入了网页的顶部左侧角落，我正在努力重新找到它。建议会非常有帮助。谢谢。这是我的一些代码，可以让你知道我在说什么。 var brush = 10;

function changeColour(colour)
{
g.fillStyle = colour;
}

function clearCanvas()
{
g.clearRect(0, 0, canvas.width, canvas.height);
}
var mouseIsDown = false;
function down(e)
{
mouseIsDown = true;
/*e.originalEvent.preventDefault();*/
}
function up(e)
{
mouseIsDown = false;
}
function changeBrushSize(symbol)
{
    if(symbol =='+')
    {
        brush = brush + 2;
    }

    else if (symbol == '-')
    {
        brush = brush - 2;
    }
}
function move(e) 
{
    var container = document.getElementById('container');
//g.clearRect(0, 0, canvas.width, canvas.height);
//g.fillRect(e.x - 5, e.y - 5, 100, 100);
if((e.button == 0) && (mouseIsDown))
{ 

g.beginPath();
document.onselectstart = function(){ return false; }
//g.fillStyle = "red";
g.arc((e.x - container.offsetLeft) - brush, (e.y - container.offsetTop) - brush, brush, 0, Math.PI * 2);
g.fill();
g.closePath();
}
}
</script>
</head>
<body>
<div id="container">
<canvas id = "paintCanvas" width = "500" height = "500">
Your browser does not support the HTML5 <canvas> tag.
</canvas>
</div>

<button onclick ="clearCanvas()">Clear Canvas</button></br>
<button onclick ="changeColour('red')">Red</button>
<button onclick ="changeColour('green')">Green</button>
<button onclick ="changeColour('blue')">Blue</button>
<button onclick ="changeColour('yellow')">Yellow</button>
<button onclick ="changeColour('orange')">Orange</button>
<button onclick ="changeColour('brown')">Brown</button>
<button onclick ="changeColour('purple')">Purple</button></br>

<button onclick ="changeBrushSize('+')">Bigger Brush</button>
<button onclick ="changeBrushSize('-')">Smaller Brush</button>
</body>

Answer 1

您可以让用户从第二个“工具”画布中选择颜色和其他工具

enter image description here

然后将“工具”画布放在“绘图”画布之前。

<canvas id="toolsCanvas"></canvas><br>
<canvas id="drawingCanvas"></canvas>

这是代码和小提琴：http://jsfiddle.net/m1erickson/y5xu7/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: white; }
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("drawingCanvas");
    var context=canvas.getContext("2d");

    var tools=document.getElementById("toolsCanvas");
    var ctx=tools.getContext("2d");
    var canvasOffset=$("#toolsCanvas").offset();
    var offsetX=canvasOffset.left;
    var offsetY=canvasOffset.top;

    var colors=['Red','Green','Blue','Yellow','Orange','Brown','Purple']
    var lightcolors="Yellow|White";
    var colorPickerWidth=25;

    // draw the color picker
    tools.width=colors.length*colorPickerWidth;
    for(var i=0;i<colors.length;i++){
        ctx.fillStyle=colors[i];
        ctx.fillRect(i*colorPickerWidth,0,colorPickerWidth,25);
    }


    // called when the user clicks and picks a color
    function handleMouseDown(e){
    console.log("down");
      var x=parseInt(e.clientX-offsetX);
      var color=colors[parseInt(x/colorPickerWidth)];
      ctx.save();
      ctx.fillStyle=color;
      ctx.fillRect(0,28,tools.width,25);
      ctx.fillStyle="white";
      if(lightcolors.indexOf(color)>-1){ctx.fillStyle="black";}
      ctx.font="16px verdana";
      ctx.fillText("Selected: "+color,10,45);
      ctx.restore();

      context.clearRect(0,0,canvas.width,canvas.height);
      context.fillStyle=color;
      context.font="14px arial";
      context.fillText("fillStyle==your selected color",30,100);
    }

    $("#toolsCanvas").mousedown(function(e){handleMouseDown(e);});


}); // end $(function(){});
</script>

</head>

<body>
    <canvas id="toolsCanvas" width=300 height=53></canvas><br>
    <canvas id="drawingCanvas" width=300 height=300></canvas>
</body>
</html>

Javascript绘制画布，需要帮助重新定位按钮？

1 个答案: