JavaScript的油漆帆布，需要帮助重新定位按钮？ [英] Javascript paint Canvas, need help re-locating buttons?
本文介绍了JavaScript的油漆帆布，需要帮助重新定位按钮？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我遇到麻烦了改变画笔的颜色在画布上移动旁边油漆我的画布上的按钮。
这似乎在网页不幸的TOPE左手角落被卡住，我挣扎着试图重新找到它。建议将是非常有益的。谢谢。
下面是我的一些code的，应该给你的什么即时通讯谈论的想法。
VAR刷= 10;
函数changeColour（彩色）
{
g.fillStyle =颜色;
}功能clearCanvas（）
{
g.clearRect（0，0，canvas.width，canvas.height）;
}
VAR mouseIsDown = FALSE;
功能下降（五）
{
mouseIsDown = TRUE;
/*e.originalEvent.$p$pventDefault();*/
}
功能了（E）
{
mouseIsDown = FALSE;
}
功能changeBrushSize（符号）
{
如果（符号=='+'）
{
刷子刷= + 2;
} 否则如果（符号==' - '）
{
刷子刷= - 2;
}
}
功能移动（五）
{
VAR容器=的document.getElementById（'集装箱'）;
//g.clearRect(0，0，canvas.width，canvas.height）;
//g.fillRect(e.x - 5，e.y - 5，100，100）;
如果（（e.button == 0）及及（mouseIsDown））
{g.beginPath（）;
document.onselectstart =函数（）{返回false; }
//g.fillStyle =红;
g.arc（（e.x - container.offsetLeft） - 刷，（e.y - container.offsetTop） - 刷，刷，0，Math.PI * 2）;
g.fill（）;
g.closePath（）;
}
}
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV ID =容器＆GT;
＆LT;帆布ID =paintCanvasWIDTH =500HEIGHT =500＆GT;
您的浏览器不支持HTML5＆LT;＆帆布GT;标签。
＆LT; /帆布＆GT;
＆LT; / DIV＆GT;＆LT;按钮的onclick =clearCanvas（）＆GT;清除帆布＆LT; /按钮＆GT;＆LT; / BR＆GT;
＆LT;按钮的onclick =changeColour（'红'）＆GT;红色和LT; /按钮＆GT;
＆LT;按钮的onclick =changeColour（'绿色'）＆GT;绿色＆LT; /按钮＆GT;
＆LT;按钮的onclick =changeColour（蓝色）＆GT;蓝色＆LT; /按钮＆GT;
＆LT;按钮的onclick =changeColour（'黄色'）→黄色＆LT; /按钮＆GT;
＆LT;按钮的onclick =changeColour（'橙色'）＆GT;橙色与LT; /按钮＆GT;
＆LT;按钮的onclick =changeColour（'棕'）＆GT;布朗和LT; /按钮＆GT;
＆LT;按钮的onclick =changeColour（'紫色'）＆GT;紫＆LT; /按钮＆GT;＆LT; / BR＆GT;＆LT;按钮的onclick =changeBrushSize（'+'）＆GT;更大刷＆LT; /按钮＆GT;
＆LT;按钮的onclick =changeBrushSize（' - '）＆GT;较小的画笔＆LT; /按钮＆GT;
＆LT; /身体GT;
解决方案
您可以让用户从第二个工具画布选择他们的颜色和其他工具
那么绘图画布前定位工具画布。
＆LT;帆布ID =toolsCanvas＆GT;＆LT; /帆布＆GT;＆LT; BR＆GT;
＆LT;帆布ID =drawingCanvas＆GT;＆LT; /帆布＆GT;
下面是code和小提琴： http://jsfiddle.net/m1erickson/y5xu7/
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;链接rel =stylesheet属性类型=文/ CSS媒体=所有的href =CSS / reset.css/＆GT; ＆LT;！ - 重置CSS - ＆GT;
＆LT;脚本类型=文/ JavaScript的SRC =HTTP：//$c$c.jquery.com/jquery.min.js＆GT;＆LT; / SCRIPT＆GT;＆LT;风格＆GT;
身体{背景颜色：白色; }
帆布{边界：1px的纯红色;}
＆LT; /风格＆GT;＆LT;脚本＆GT;
$（函数（）{ 变种帆布=的document.getElementById（drawingCanvas）;
VAR上下文= canvas.getContext（2D）; 变种工具=的document.getElementById（toolsCanvas）;
变种CTX = tools.getContext（2D）;
。VAR canvasOffset = $（＃toolsCanvas）的偏移量（）;
VAR offsetX = canvasOffset.left;
VAR offsetY = canvasOffset.top; VAR颜色= ['红'，'绿'，'蓝'，'黄'，'橙'，'布朗'，'紫']
VAR lightcolors =黄|白;
VAR colorPickerWidth = 25; //绘制颜色选择器
tools.width = colors.length * colorPickerWidth;
对于（VAR I = 0; I＆LT; colors.length;我++）{
ctx.fillStyle =颜色[I]
ctx.fillRect（我* colorPickerWidth，0，colorPickerWidth，25）;
}
//称为当用户点击并挑选颜色
功能handleMouseDown（五）{
的console.log（下）;
VAR X = parseInt函数（e.clientX-offsetX）;
VAR颜色=颜色[parseInt函数（X / colorPickerWidth）];
ctx.save（）;
ctx.fillStyle =颜色;
ctx.fillRect（0.28，tools.width，25）;
ctx.fillStyle =白;
如果（lightcolors.indexOf（彩色）-1个）{ctx.fillStyle =黑色;}
ctx.font =16px的宋体;
ctx.fillText（选择：+颜色，10,45）;
ctx.restore（）; context.clearRect（0,0，canvas.width，canvas.height）;
context.fillStyle =颜色;
context.font =宋体14px的;
context.fillText（填充样式==你选择的颜色，30100）;
} $（＃toolsCanvas）鼠标按下（功能（E）{handleMouseDown（E）;}）;
}）; //结束$（函数（）{}）;
＆LT; / SCRIPT＆GT;＆LT; /头＆GT;＆LT;身体GT;
＆LT;帆布ID =toolsCanvasWIDTH = 300 HEIGHT = 53＆GT;＆LT; /帆布＆GT;＆LT; BR＆GT;
＆LT;帆布ID =drawingCanvasWIDTH = 300 HEIGHT = 300＆GT;＆LT; /帆布＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
Hi i'm having trouble getting my paint canvas buttons that change the colours of the paint brush to move beside the canvas. It seems to be stuck at the tope left hand corner of the webpage unfortunately and i'm struggling trying to re-locate it. And suggestions would be very helpful. Thank you. Here is some of my code that should give you an idea of what im talking about. 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>
解决方案
You might let the user select their colors and other tools from a second "tools" canvas
Then position the "tools" canvas before the "drawing" canvas.
<canvas id="toolsCanvas"></canvas><br>
<canvas id="drawingCanvas"></canvas>
Here is code and a Fiddle: 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的油漆帆布，需要帮助重新定位按钮？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
