Javascript 绘制 Canvas，需要帮助重新定位按钮？答案

【问题标题】：Javascript paint Canvas, need help re-locating buttons?Javascript 绘制 Canvas，需要帮助重新定位按钮？
【发布时间】：2013-12-27 00:57:34
【问题描述】：

您好，我无法让我的画布按钮更改画笔颜色以在画布旁边移动。不幸的是，它似乎卡在了网页的左上角，我正在努力重新定位它。建议会很有帮助。谢谢你。这是我的一些代码，应该让您了解我在说什么。 var 笔刷 = 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>

【问题讨论】：

标签： javascript function button canvas

【解决方案1】：

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

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

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

【讨论】：