HTML JavaScript Canvas顏色變化
[英]HTML JavaScript Canvas color changing
問題描述
我有一個小項目，我正在研究HTML，以及任何內部腳本。 我有一些邏輯（對我來說）有意義的代碼，但由於某種原因，它不起作用。 我正在使用一些我發現使用畫布制作繪圖工具的代碼，但是我在使用下拉菜單更改顏色方面遇到了麻煩。 到目前為止我有這個代碼。
<!--drop down box for selected drawing tools-->
<p><label>Select Tool: <select id = "selectedTool">
<option value="rectangle">Rectangle</option>
<option value="pencil">Pencil</option>
<option value="line">Line</option>
</select></label></p>
<!--drop down box for selected colors.-->
<p><label>Color: <select id="selectedColor">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select></label></p>
對於我的繪圖函數方法，我有：
var color_select = document.getElementById('selectedColor');
this.mousemove = function (ev) {
if (tool.started){
context.lineTo(ev._x, ev._y);
var color_select = document.getElementById('selectedColor');
if(color_select == red)
context.strokeStyle = 'red';
else if(color_select == blue)
context.strokeStyle = 'blue';
else if(color_select == green)
context.strokeStyle = 'green';
context.stroke();
}
};
這完全殺死了繪圖工具。 下面我將發布完整的代碼，以防它與我上面的內容無關。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Simmons Stitching v1.0.0</title>
<style type="text/css"><!--
#container { position: relative; }
#imageView { border: 1px solid #000; }
--></style>
</head>
<body>
<!--drop down box for selected drawing tools-->
<p><label>Stitching Tool: <select id="selectedTool">
<option value="rectangle">Rectangle</option>
<option value="pencil">Pencil</option>
<option value="line">Line</option>
</select></label></p>
<!--drop down box for selected colors.-->
<p><label>Color: <select id="selectedColor">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select></label></p>
<!-- ... -->
</body>
<body>
<div id="container">
<canvas id="imageView" width="400" height="300">
<p>Wrong browser for this application sucka! Get a browser worth having!</p>
<p>Try one of these: <a href="http://www.opera.com">Opera</a>, <a
href="http://www.mozilla.com">Firefox</a>, <a
href="http://www.apple.com/safari">Safari</a>, and <a
href="http://www.konqueror.org">Konqueror</a>.</p>
</canvas>
</div>
<script type="text/javascript"
src="example1.js">
</script>
<script>
// Keep everything in anonymous function, called on window load.
if(window.addEventListener) {
window.addEventListener('load', function () {
var canvas, context, canvaso, contexto;
// The active tool instance.
var tool;
var tool_default = 'line';
function init () {
// Find the canvas element.
canvaso = document.getElementById('imageView');
if (!canvaso) {
alert('Error: I cannot find the canvas element!');
return;
}
if (!canvaso.getContext) {
alert('Error: no canvas.getContext!');
return;
}
// Get the 2D canvas context.
contexto = canvaso.getContext('2d');
if (!contexto) {
alert('Error: failed to getContext!');
return;
}
// Add the temporary canvas.
var container = canvaso.parentNode;
canvas = document.createElement('canvas');
if (!canvas) {
alert('Error: I cannot create a new canvas element!');
return;
}
canvas.id = 'imageTemp';
canvas.width = canvaso.width;
canvas.height = canvaso.height;
container.appendChild(canvas);
context = canvas.getContext('2d');
// Get the tool select input.
var tool_select = document.getElementById('selectedTool');
if (!tool_select) {
alert('Error: failed to get the selectedTool element!');
return;
}
tool_select.addEventListener('change', ev_tool_change, false);
// Activate the default tool.
if (tools[tool_default]) {
tool = new tools[tool_default]();
tool_select.value = tool_default;
}
// Attach the mousedown, mousemove and mouseup event listeners.
canvas.addEventListener('mousedown', ev_canvas, false);
canvas.addEventListener('mousemove', ev_canvas, false);
canvas.addEventListener('mouseup', ev_canvas, false);
}
// The general-purpose event handler. This function just determines the mouse
// position relative to the canvas element.
function ev_canvas (ev) {
if (ev.layerX || ev.layerX == 0) { // Firefox
ev._x = ev.layerX;
ev._y = ev.layerY;
} else if (ev.offsetX || ev.offsetX == 0) { // Opera
ev._x = ev.offsetX;
ev._y = ev.offsetY;
}
// Call the event handler of the tool.
var func = tool[ev.type];
if (func) {
func(ev);
}
}
// The event handler for any changes made to the tool selector.
function ev_tool_change (ev) {
if (tools[this.value]) {
tool = new tools[this.value]();
}
}
// This function draws the #imageTemp canvas on top of #imageView, after which
// #imageTemp is cleared. This function is called each time when the user
// completes a drawing operation.
function img_update () {
contexto.drawImage(canvas, 0, 0);
context.clearRect(0, 0, canvas.width, canvas.height);
}
// This object holds the implementation of each drawing tool.
var tools = {};
// The drawing pencil.
tools.pencil = function () {
var tool = this;
this.started = false;
// This is called when you start holding down the mouse button.
// This starts the pencil drawing.
this.mousedown = function (ev) {
context.beginPath();
context.moveTo(ev._x, ev._y);
tool.started = true;
};
// This function is called every time you move the mouse. Obviously, it only
// draws if the tool.started state is set to true (when you are holding down
// the mouse button).
var color_select = document.getElementById('selectedColor');
this.mousemove = function (ev) {
if (tool.started){
context.lineTo(ev._x, ev._y);
//******************************************************************************
var color_select = document.getElementById('selectedColor');
if(color_select == red)
context.strokeStyle = 'red';
else if(color_select == blue)
context.strokeStyle = 'blue';
else if(color_select == green)
context.strokeStyle = 'green';
context.stroke();
}
};
// This is called when you release the mouse button.
this.mouseup = function (ev) {
if (tool.started) {
tool.mousemove(ev);
tool.started = false;
img_update();
}
};
};
// The rectangle tool.
tools.rectangle = function () {
var tool = this;
this.started = false;
this.mousedown = function (ev) {
tool.started = true;
tool.x0 = ev._x;
tool.y0 = ev._y;
};
this.mousemove = function (ev) {
if (!tool.started) {
return;
}
var x = Math.min(ev._x, tool.x0),
y = Math.min(ev._y, tool.y0),
w = Math.abs(ev._x - tool.x0),
h = Math.abs(ev._y - tool.y0);
context.clearRect(0, 0, canvas.width, canvas.height);
if (!w || !h) {
return;
}
context.strokeRect(x, y, w, h);
};
this.mouseup = function (ev) {
if (tool.started) {
tool.mousemove(ev);
tool.started = false;
img_update();
}
};
};
// The line tool.
tools.line = function () {
var tool = this;
this.started = false;
this.mousedown = function (ev) {
tool.started = true;
tool.x0 = ev._x;
tool.y0 = ev._y;
};
this.mousemove = function (ev) {
if (!tool.started) {
return;
}
context.clearRect(0, 0, canvas.width, canvas.height);
context.beginPath();
context.moveTo(tool.x0, tool.y0);
context.lineTo(ev._x, ev._y);
context.stroke();
context.closePath();
};
this.mouseup = function (ev) {
if (tool.started) {
tool.mousemove(ev);
tool.started = false;
img_update();
}
};
};
init();
}, false); }
// vim:set spell spl=en fo=wan1croql tw=80 ts=2 sw=2 sts=2 sta et ai cin fenc=utf-8 ff=unix:
</script>
<style type="text/css">
#container { position: relative; }
#imageView { border: 1px solid #000; }
#imageTemp { position: absolute; top: 1px; left: 1px; }
</style>
</body>
</html>
2 個解決方案
解決方案1
2 已采納 2013-08-07 03:46:26
代碼中需要進行一些小的更改。 在選擇顏色值時，您使用以下行，
var color_select = document.getElementById('selectedColor');
基本上它將返回HTMLElementObject而不是顏色。 要從html元素獲取顏色，您需要檢索該元素的值。 采用，
var color_select = document.getElementById('selectedColor').value;
對所有三個工具使用此顏色檢查。 使用下面粘貼的更新代碼。 干杯!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Simmons Stitching v1.0.0</title>
<style type="text/css">
<!--
#container {
position: relative;
}
#imageView {
border: 1px solid #000;
}
-->
</style>
</head>
<body>
<!--drop down box for selected drawing tools-->
<p>
<label>Stitching Tool: <select id="selectedTool">
<option value="rectangle">Rectangle</option>
<option value="pencil">Pencil</option>
<option value="line">Line</option>
</select></label>
</p>
<!--drop down box for selected colors.-->
<p>
<label>Color: <select id="selectedColor">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select></label>
</p>
<!-- ... -->
</body>
<body>
<div id="container">
<canvas id="imageView" width="400" height="300">
<p>Wrong browser for this application sucka! Get a browser worth having!</p>
<p>Try one of these: <a href="http://www.opera.com">Opera</a>, <a
href="http://www.mozilla.com">Firefox</a>, <a
href="http://www.apple.com/safari">Safari</a>, and <a
href="http://www.konqueror.org">Konqueror</a>.</p>
</canvas>
</div>
<script>
// Keep everything in anonymous function, called on window load.
if (window.addEventListener) {
window
.addEventListener(
'load',
function() {
var canvas, context, canvaso, contexto;
// The active tool instance.
var tool;
var tool_default = 'line';
function init() {
// Find the canvas element.
canvaso = document
.getElementById('imageView');
if (!canvaso) {
alert('Error: I cannot find the canvas element!');
return;
}
if (!canvaso.getContext) {
alert('Error: no canvas.getContext!');
return;
}
// Get the 2D canvas context.
contexto = canvaso.getContext('2d');
if (!contexto) {
alert('Error: failed to getContext!');
return;
}
// Add the temporary canvas.
var container = canvaso.parentNode;
canvas = document.createElement('canvas');
if (!canvas) {
alert('Error: I cannot create a new canvas element!');
return;
}
canvas.id = 'imageTemp';
canvas.width = canvaso.width;
canvas.height = canvaso.height;
container.appendChild(canvas);
context = canvas.getContext('2d');
// Get the tool select input.
var tool_select = document
.getElementById('selectedTool');
if (!tool_select) {
alert('Error: failed to get the selectedTool element!');
return;
}
tool_select.addEventListener('change',
ev_tool_change, false);
// Activate the default tool.
if (tools[tool_default]) {
tool = new tools[tool_default]();
tool_select.value = tool_default;
}
// Attach the mousedown, mousemove and mouseup event listeners.
canvas.addEventListener('mousedown',
ev_canvas, false);
canvas.addEventListener('mousemove',
ev_canvas, false);
canvas.addEventListener('mouseup',
ev_canvas, false);
}
// The general-purpose event handler. This function just determines the mouse
// position relative to the canvas element.
function ev_canvas(ev) {
if (ev.layerX || ev.layerX == 0) { // Firefox
ev._x = ev.layerX;
ev._y = ev.layerY;
} else if (ev.offsetX || ev.offsetX == 0) { // Opera
ev._x = ev.offsetX;
ev._y = ev.offsetY;
}
// Call the event handler of the tool.
var func = tool[ev.type];
if (func) {
func(ev);
}
}
// The event handler for any changes made to the tool selector.
function ev_tool_change(ev) {
if (tools[this.value]) {
tool = new tools[this.value]();
}
}
// This function draws the #imageTemp canvas on top of #imageView, after which
// #imageTemp is cleared. This function is called each time when the user
// completes a drawing operation.
function img_update() {
contexto.drawImage(canvas, 0, 0);
context.clearRect(0, 0, canvas.width,
canvas.height);
}
// This object holds the implementation of each drawing tool.
var tools = {};
// The drawing pencil.
tools.pencil = function() {
var tool = this;
this.started = false;
// This is called when you start holding down the mouse button.
// This starts the pencil drawing.
this.mousedown = function(ev) {
context.beginPath();
context.moveTo(ev._x, ev._y);
tool.started = true;
};
// This function is called every time you move the mouse. Obviously, it only
// draws if the tool.started state is set to true (when you are holding down
// the mouse button).
var color_select = document
.getElementById('selectedColor');
this.mousemove = function(ev) {
if (tool.started) {
// Get the value of html element *********************************New changes
var color_select = document
.getElementById('selectedColor').value;
//The string literals should be inside ' or ". Use these changes for other tools also. *********************************New changes
if (color_select == 'red') {
context.strokeStyle = 'red';
} else if (color_select == 'blue') {
context.strokeStyle = 'blue';
} else if (color_select == 'green') {
context.strokeStyle = 'green';
}
context.lineTo(ev._x, ev._y);
context.stroke();
}
};
// This is called when you release the mouse button.
this.mouseup = function(ev) {
if (tool.started) {
tool.mousemove(ev);
tool.started = false;
img_update();
}
};
};
// The rectangle tool.
tools.rectangle = function() {
var tool = this;
this.started = false;
this.mousedown = function(ev) {
tool.started = true;
tool.x0 = ev._x;
tool.y0 = ev._y;
};
this.mousemove = function(ev) {
if (!tool.started) {
return;
}
// *********************************New changes
if (tool.started) {
var color_select = document
.getElementById('selectedColor').value;
if (color_select == 'red') {
context.strokeStyle = 'red';
} else if (color_select == 'blue') {
context.strokeStyle = 'blue';
} else if (color_select == 'green') {
context.strokeStyle = 'green';
}
var x = Math.min(ev._x, tool.x0), y = Math
.min(ev._y, tool.y0), w = Math
.abs(ev._x - tool.x0), h = Math
.abs(ev._y - tool.y0);
context
.clearRect(0, 0,
canvas.width,
canvas.height);
if (!w || !h) {
return;
}
context.strokeRect(x, y, w, h);
}
};
this.mouseup = function(ev) {
if (tool.started) {
tool.mousemove(ev);
tool.started = false;
img_update();
}
};
};
// The line tool.
tools.line = function() {
var tool = this;
this.started = false;
this.mousedown = function(ev) {
tool.started = true;
tool.x0 = ev._x;
tool.y0 = ev._y;
};
this.mousemove = function(ev) {
if (!tool.started) {
return;
}
// *********************************New changes
if (tool.started) {
var color_select = document
.getElementById('selectedColor').value;
if (color_select == 'red') {
context.strokeStyle = 'red';
} else if (color_select == 'blue') {
context.strokeStyle = 'blue';
} else if (color_select == 'green') {
context.strokeStyle = 'green';
}
context
.clearRect(0, 0,
canvas.width,
canvas.height);
context.beginPath();
context.moveTo(tool.x0, tool.y0);
context.lineTo(ev._x, ev._y);
context.stroke();
context.closePath();
}
};
this.mouseup = function(ev) {
if (tool.started) {
tool.mousemove(ev);
tool.started = false;
img_update();
}
};
};
init();
}, false);
}
// vim:set spell spl=en fo=wan1croql tw=80 ts=2 sw=2 sts=2 sta et ai cin fenc=utf-8 ff=unix:
</script>
<style type="text/css">
#container {
position: relative;
}
#imageView {
border: 1px solid #000;
}
#imageTemp {
position: absolute;
top: 1px;
left: 1px;
}
解決方案2
1
您需要在代碼中使用beginPath()來創建一個新路徑，否則您到目前為止繪制的整個路徑將使用當前顏色重新繪制，並且隨着時間的推移，路徑將累積所有行，並且事情將開始變慢。
此外，您需要將當前點存儲為舊點，以便您可以使用以下內容繪制線條：
首先在鼠標按下事件中將其與全局范圍中的兩個新變量一起添加。 還可以通過在鼠標按下設置筆觸樣式來設置顏色：
var color_select = document.getElementById('selectedColor'),
oldX, oldY; /// use these here
this.mousedown = function(ev) {
/// get the point here as x and y
/// set them as oldX/Y to have a start point for mouse move
oldX = x;
oldY = Y;
/// set stroke style
context.strokeStyle = document.getElementById('selectedColor').value;
}
然后在你的鼠標移動事件回調中：
this.mousemove = function (ev) {
if (tool.started){
var x = ev._x,
y = ev._y;
/// here, add beginPath
context.beginPath();
/// now create a segment for the line like this
context.moveTo(oldX, oldY);
context.lineTo(x, y);
/// stroke it with current color
context.stroke();
/// update "old" position with current so they are
/// a start point for next move.
oldX = x;
oldY = Y;
};
HTML5漸變：更改漸變顏色可更改畫布上三角形的顏色
[英]HTML5 Gradient: changing color of gradient changes color of triangle on a canvas
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.