画布绘图应用程序使用javascript和html5更改颜色和笔大小

Question

我一直在使用zipso.net上的JavaScript / html5 / css代码， 因此我试图添加一个下拉菜单，在这里我可以更改rgb颜色值，因为zipso表示有可能回答“ feryal”问题在链接页面底部的zipso.net留言板上。

这是JavaScript代码中具有rgb值的部分。

我想要的下拉菜单选项是。 “蓝色” r = 50； G = 50; B = 250; 一个= 100; “绿色” r = 50； 克= 250; B = 50; 一个= 100; “红色” r ＝ 250； G = 50; B = 50; 一个= 100; “黑色” r ＝ 0； G = 0; B = 0; 一个= 255;

 // Draws a dot at a specific position on the supplied canvas name // Parameters are: A canvas context, the x position, the y position, the size of the dot function drawDot(ctx,x,y,size) { // Let's use black by setting RGB values to 0, and 255 alpha (completely opaque) r=0; g=0; b=0; a=255; // Select a fill style ctx.fillStyle = "rgba("+r+","+g+","+b+","+(a/255)+")"; // Draw a filled circle ctx.beginPath(); ctx.arc(x, y, size, 0, Math.PI*2, true); ctx.closePath(); ctx.fill(); } 

顺便说一句，我还想使用一个下拉菜单来更改笔的大小。 它说您可以通过更改代码中每个12的实例来实现。 以下代码中包含12的每个实例。 我希望下拉菜单中的选项是3、6和12。

  // Keep track of the mouse button being pressed and draw a dot at current location function sketchpad_mouseDown() { mouseDown=1; drawDot(ctx,mouseX,mouseY,12); } // Draw a dot if the mouse button is currently being pressed if (mouseDown==1) { drawDot(ctx,mouseX,mouseY,12); } } // Draw something when a touch start is detected function sketchpad_touchStart() { // Update the touch co-ordinates getTouchPos(); drawDot(ctx,touchX,touchY,12); // Prevents an additional mousedown event being triggered event.preventDefault(); } // Draw something and prevent the default scrolling when touch movement is detected function sketchpad_touchMove(e) { // Update the touch co-ordinates getTouchPos(e); // During a touchmove event, unlike a mousemove event, we don't need to check if the touch is engaged, since there will always be contact with the screen by definition. drawDot(ctx,touchX,touchY,12); // Prevent a scrolling action as a result of this touchmove triggering. event.preventDefault(); } 

Answer 1

取一个全局变量，然后在下拉列表中选择更改值。 我拿了滑块，这是一个演示

 // Variables for referencing the canvas and 2dcanvas context var canvas,ctx,size = 10,r=0,g=0,b=0; // Variables to keep track of the mouse position and left-button status var mouseX,mouseY,mouseDown=0; // Draws a dot at a specific position on the supplied canvas name // Parameters are: A canvas context, the x position, the y position, the size of the dot function drawDot(ctx,x,y,size) { // Select a fill style ctx.fillStyle = 'rgb('+r+','+g+','+b+')'; // Draw a filled circle ctx.beginPath(); ctx.arc(x, y, size, 0, Math.PI*2, true); ctx.closePath(); ctx.fill(); } // Clear the canvas context using the canvas width and height function clearCanvas(canvas,ctx) { ctx.clearRect(0, 0, canvas.width, canvas.height); } // Keep track of the mouse button being pressed and draw a dot at current location function sketchpad_mouseDown() { mouseDown=1; drawDot(ctx,mouseX,mouseY,size); } // Keep track of the mouse button being released function sketchpad_mouseUp() { mouseDown=0; } // Keep track of the mouse position and draw a dot if mouse button is currently pressed function sketchpad_mouseMove(e) { // Update the mouse co-ordinates when moved getMousePos(e); // Draw a dot if the mouse button is currently being pressed if (mouseDown==1) { drawDot(ctx,mouseX,mouseY,size); } } // Get the current mouse position relative to the top-left of the canvas function getMousePos(e) { if (!e) var e = event; if (e.offsetX) { mouseX = e.offsetX; mouseY = e.offsetY; } else if (e.layerX) { mouseX = e.layerX; mouseY = e.layerY; } } // Set-up the canvas and add our event handlers after the page has loaded function init() { // Get the specific canvas element from the HTML document canvas = document.getElementById('sketchpad'); // If the browser supports the canvas tag, get the 2d drawing context for this canvas if (canvas.getContext) ctx = canvas.getContext('2d'); // Check that we have a valid context to draw on/with before adding event handlers if (ctx) { canvas.addEventListener('mousedown', sketchpad_mouseDown, false); canvas.addEventListener('mousemove', sketchpad_mouseMove, false); window.addEventListener('mouseup', sketchpad_mouseUp, false); } } function setR(){ r = document.getElementById("colorR").value; } function setG(){ g = document.getElementById("colorG").value; } function setB(){ b = document.getElementById("colorB").value; } function setSize(){ size = document.getElementById("sizeSelect").value; } init(); 

 /* Some CSS styling */ #sketchpadapp { /* Prevent nearby text being highlighted when accidentally dragging mouse outside confines of the canvas */ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .leftside { float:left; width:220px; background-color:#def; padding:10px; border-radius:4px; } .rightside { float:left; margin-left:10px; } #sketchpad { float:left; border:2px solid #888; border-radius:4px; position:relative; /* Necessary for correct mouse co-ords in Firefox */ } 

 <div id="sketchpadapp"> <div class="leftside"> Simple mouse-based HTML5 canvas sketchpad.<br/><br/> Draw something by holding down the mouse button or using single clicks.<br/><br/> On a touchscreen, tapping the area will register as a single mouse click.<br/><br/> <input type="submit" value="Clear Sketchpad" onclick="clearCanvas(canvas,ctx);"><br> R<input type="range" id='colorR' min="0" max="255" value = '0' onchange='setR();'><br> G<input type="range" id='colorG' min="0" max="255" value = '0' onchange='setG();'><br> B<input type="range" id='colorB' min="0" max="255" value = '0' onchange='setB();'><br> size:<input type="range" id='sizeSelect' min="5" max="50" value = '10' step="5" onchange='setSize();'> </div> <div class="rightside"> <canvas id="sketchpad" height="350" width="450"> </canvas> </div> </div>