我一直在使用来自zipso.net的JavaScript / html5 / css代码我试图添加一个下拉菜单，我可以在其中更改rgb颜色值，因为zipso已经声明可以作为回应关于＆＃34; feryal＆＃34;发布的问题在zipso.net 在链接页面底部的留言板。
以下是具有rgb值的JavaScript代码部分。
我想要的下拉菜单选项。 ＆＃34;蓝色＆＃34; R = 50; G = 50; B = 250;一个= 100; ＆＃34;绿色＆＃34; R = 50;克= 250; B = 50;一个= 100; ＆＃34;红色＆＃34; R = 250; G = 50; B = 50;一个= 100; ＆＃34;黑色＆＃34; 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();
}
答案 0 :(得分：0)
获取一个全局变量，然后在下拉列表中选择更改该值。拉着滑块， 这是演示
// 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>