我是一個JavaScript中的中間人。我正在爲兒童製作應用程序..我正在開發HTML5/javascript。我的應用程序的動機是爲了選擇字母和素描的字母輪廓練習他們.. 這裏是我的應用程序設計在下面的圖片
如何通過在html5中選擇一種顏色來給特定的div一個顏色
在應用我想選擇一個需要從顏色給出的顏色在鉛筆和油漆在A的輪廓和我必須用橡皮擦給予擦除。 我已經差不多完成了應用程序，除了着色部分。 請任何人幫助和指導我如何做到這一點.. 我只是想要知道如何通過選擇顏色來使其變爲顏色輪廓..如果有任何可用的代碼或演示可用，請告訴我有關這一點。 專家闡明這一問題[基於改變的要求修訂答案]
這裏是如何讓孩子周圍的信
首先邊框內的任何地方畫畫，定義面積圖紙將被限制在。
在繪圖區域外的任何拖動繪圖都不可見。
// define the drawable area
var minX=60;
var maxX=250;
var minY=140;
var maxY=380;
然後在鼠標移動，只畫如果鼠標是繪製區域內：
if(mouseX>minX && mouseX<maxX && mouseY>minY && mouseY<maxY){
ctx.beginPath();
ctx.moveTo(startX,startY);
ctx.lineTo(mouseX,mouseY);
ctx.stroke();
}
這裏是代碼和一個小提琴：http://jsfiddle.net/m1erickson/tAkAy/
<!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: ivory; }
#wrapper{
position:relative;
width:637px;
height:477px;
}
#canvas,#bkImg{
position:absolute; top:0px; left:0px;
border:1px solid green;
width:100%;
height:100%;
}
#canvas{
border:1px solid red;
}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.strokeStyle="red";
ctx.lineWidth=25;
ctx.lineCap="round";
// define the drawable area
// any drag-draws outside the drawable area won't be visible
var minX=60;
var maxX=250;
var minY=140;
var maxY=380;
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var startX;
var startY;
var isDown=false;
function handleMouseDown(e){
startX=parseInt(e.clientX-offsetX);
startY=parseInt(e.clientY-offsetY);
isDown=true;
}
function handleMouseUp(e){
if(!isDown){return;}
isDown=false;
}
function handleMouseMove(e){
if(!isDown){return;}
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
if(mouseX>minX && mouseX<maxX && mouseY>minY && mouseY<maxY){
ctx.beginPath();
ctx.moveTo(startX,startY);
ctx.lineTo(mouseX,mouseY);
ctx.stroke();
}
startX=mouseX;
startY=mouseY;
}
$("#canvas").mousedown(function(e){handleMouseDown(e);});
$("#canvas").mousemove(function(e){handleMouseMove(e);});
$("#canvas").mouseup(function(e){handleMouseUp(e);});
$("#canvas").mouseout(function(e){handleMouseOut(e);});
}); // end $(function(){});
</script>
</head>
<body>
<div id="wrapper">
<img id="bkImg" src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/game1.png" width=637 height=477>
<canvas id="canvas" width=637 height=477></canvas>
</div>
</body>
</html>
[原創答案]
如何畫線的畫布上的所選顏色
下面是一些代碼對你下手。
重要的要點是：
HTML畫布繪製一條線使用它的上下文是這樣的：
function drawLine(line){
ctx.beginPath();
ctx.moveTo(line.x1,line.y1);
ctx.lineTo(line.x2,line.y2);
ctx.stroke();
}
要設置/更改線條顏色，設置背景下的的StrokeStyle：
context.strokeStyle="blue";
要在刪除所有圖紙畫布上，您使用上下文的clearRect：
context.clearRect(0,0,canvas.width,canvas.height);
如果你不習慣指定命中區域，這很簡單。
畫布層疊在遊戲圖像上，所有線條都在畫布上繪製，而不是圖像。
其餘的只是簡單的JavaScript的東西。
這裏是代碼和一個小提琴：http://jsfiddle.net/m1erickson/G6eWn/
<!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: ivory; }
#wrapper{
position:relative;
width:637px;
height:477px;
}
#canvas,#bkImg{
position:absolute; top:0px; left:0px;
border:1px solid green;
width:100%;
height:100%;
}
#canvas{
border:1px solid red;
}
</style>
<script>
$(function(){
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.strokeStyle="red";
ctx.lineWidth=25;
ctx.lineCap="round";
var canvasOffset=$("#canvas").offset();
var offsetX=canvasOffset.left;
var offsetY=canvasOffset.top;
var startX;
var startY;
var isDown=false;
var lines=[];
var eraser={x:446,y:413,right:516,bottom:475};
var pens=[
{x:240,y:413,right:275,bottom:475,color:"red"},
{x:276,y:413,right:308,bottom:475,color:"green"},
{x:309,y:413,right:341,bottom:475,color:"orange"},
{x:342,y:413,right:375,bottom:475,color:"blue"},
{x:376,y:413,right:412,bottom:475,color:"yellow"},
{x:412,y:413,right:447,bottom:475,color:"pink"},
];
function selectPenColor(x,y){
for(var i=0;i<pens.length;i++){
var pen=pens[i];
if(x>=pen.x && x<=pen.right && y>=pen.y && y<=pen.bottom){
ctx.strokeStyle=pen.color;
drawLines();
return(true);
}
}
return(false);
}
function drawLines(){
ctx.clearRect(0,0,canvas.width,canvas.height);
for(var i=0;i<lines.length;i++){
drawLine(lines[i]);
}
}
function drawLine(line){
ctx.beginPath();
ctx.moveTo(line.x1,line.y1);
ctx.lineTo(line.x2,line.y2);
ctx.stroke();
}
function selectEraser(x,y){
if(x>=eraser.x && x<=eraser.right && y>=eraser.y && y<=eraser.bottom){
lines=[];
ctx.clearRect(0,0,canvas.width,canvas.height);
return(true);
}
return(false);
}
function handleMouseDown(e){
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
// select a pen color or erase
// if so, don't start a line
if(selectPenColor(mouseX,mouseY)){return;}
if(selectEraser(mouseX,mouseY)){return;}
startX=mouseX;
startY=mouseY;
isDown=true;
}
function handleMouseUp(e){
if(!isDown){return;}
isDown=false;
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
lines.push({x1:startX,y1:startY,x2:mouseX,y2:mouseY});
drawLines();
}
function handleMouseOut(e){
handleMouseUp(e);
}
function handleMouseMove(e){
if(!isDown){return;}
mouseX=parseInt(e.clientX-offsetX);
mouseY=parseInt(e.clientY-offsetY);
drawLines();
drawLine({x1:startX,y1:startY,x2:mouseX,y2:mouseY});
}
$("#canvas").mousedown(function(e){handleMouseDown(e);});
$("#canvas").mousemove(function(e){handleMouseMove(e);});
$("#canvas").mouseup(function(e){handleMouseUp(e);});
$("#canvas").mouseout(function(e){handleMouseOut(e);});
}); // end $(function(){});
</script>
</head>
<body>
<div id="wrapper">
<img id="bkImg" src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/game1.png" width=637 height=477>
<canvas id="canvas" width=637 height=477></canvas>
</div>
</body>
</html>
它幫助了我。但是我想減小畫布的大小，只給字母'A'，這樣我就只能在A內部進行着色，而不會在A之外。附加地，我使用字母A作爲單獨圖像..我更改畫布大小並在你的我的例子它的作品偏袒..請給我一種方法只畫「圖像A」..謝謝馬克 –
當你說「只有在A內」，你的意思是，如果孩子超出了A的線筆停止繪畫，直到孩子回到A的線條內爲止。或者，您的意思是畫布應該與A的寬度/高度相同，並且孩子可以在較小的畫布中繪製任何地方 - 即使他們畫畫在A. – markE
的行外我的意思是第一個，如果孩子超出A的線，筆停止繪製，直到孩子回到A. –
您使用的帆布畫？ – intuitivepixel
@intuitivepixel是的我想要畫布，但是當我嘗試在畫布上創建「A」時，我的創作失敗了.. –