0
我有這樣的代碼：從HTML獲取圖像的JavaScript？
var img = document.createElement("img");
img.src = "Images/test.png";
console.log(img);
img.addEventListener("load", start(img));這是爲了創建一個新的圖像，並將其顯示到通過畫布元件內部的圖案「開始（）」。但它顯示的是一個綠色的盒子，而不是一個圖像。讓它工作的唯一方法是在HTML中定義一個具有相同源代碼的圖像。當我試圖使圖像不可見時，畫布上的圖像也變得不可見。這是令人困惑的，因爲我的代碼是爲創建一個新元素而編寫的，但由於某種原因，它被綁定到頁面上的現有元素。有沒有什麼辦法解決這一問題？
全碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Canvas Library</title>
</head>
<style type="text/css">
.invisible {
display: none;
}
</style>
<body>
<p id="text">Unknown</p>
<canvas width="400" height="400" id="canvas"></canvas>
<img src="Images/test.png" class="invisible"></img>
<script type="text/javascript">
var Canvas = document.getElementById("canvas");
var label = document.getElementById("text");
function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
function rgbToHex(r, g, b) {
return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}
console.log("" + rgbToHex(255, 100, 50));
var distance = function(x1, y1, x2, y2) {
var a = Math.pow(x2 - x1, 2);
var b = Math.pow(y2 - y1, 2);
return Math.sqrt(a + b);
};
//Declare the Canvas Object
var canvasObj = function(src) {
//Function to see if a line is colliding with a certain point Has an accuracy of about 1 pixel
this.lineIsColliding = function(startX, startY, endX, endY, testX, testY) {
const v1 = {
x: endX - startX,
y: endY - startY
};
const l2 = v1.x * v1.x + v1.y * v1.y;
if (l2 === 0) {
return false;
} // line has no length so can't be near anything
const v2 = {
x: testX - startX,
y: testY - startY
};
const u = (v1.x * v2.x + v1.y * v2.y)/l2;
return u >= 0 && u <= 1 && Math.abs((v1.x * v2.y - v1.y * v2.x)/Math.sqrt(l2)) < 1;
};
var self = this;
//The Canvas to draw on
this.src = src;
//The context of source(used for drawing)
this.ctx = this.src.getContext("2d");
//The Mouse Move Function
this.showCoordinates = function(e) {
console.log(e);
label.innerHTML = "<b>x: </b>" + e.offsetX + " <b>y: </b>" + e.offsetY + ", " + self.lineIsColliding(358, 277, 365, 268, e.offsetX, e.offsetY);
};
//Show coordinates variable
this.showCoordinatesBool = true;
//The boolean to tell if we should use stroke
this.useStroke = true;
//The fill style and stroke style(can be color, pattern, or gradient)
this.fillStyle = "#000000";
this.strokeStyle = "#000000";
//The Line cap style (can be butt, square, or round)
this.lineCap = "butt";
//The Stroke Weight (how wide the strokes are)
this.strokeWeightVar = "default";
//The corner style (how the corners are drawn)
this.cornerStyle = "miter";
//The Shadow Color
this.shadowColorVar = "#000000";
//The shadow Blur
this.shadowBlurVar = 0;
//The shadow Offsets
this.shadowOffsetX = 0;
this.shadowOffsetY = 0;
//The style of the current font
this.fontStyle = "normal";
//The variant of the current font
this.fontVariant = "normal";
//The thickness of the current font
this.fontThickness = "normal";
//The height/size of the current font
this.fontSize = 10;
//The family of the current font
this.fontFamily = "sans-serif";
//Function to set the fill style
this.fill = function(style) {
this.fillStyle = style;
this.ctx.fillStyle = style;
};
//Function to set the stroke style
this.stroke = function(style) {
this.useStroke = true;
this.strokeStyle = style;
this.ctx.strokeStyle = style;
};
//Function to delete the stroke
this.noStroke = function() {
this.useStroke = false;
};
//Function to draw a rectangle
this.rect = function(x, y, width, height) {
this.ctx.fillRect(x, y, width, height);
if (this.useStroke) {
this.ctx.strokeRect(x, y, width, height);
}
};
//Function to draw a corner
this.corner = function(style, centerX, centerY, x1, y1, x2, y2) {
this.ctx.lineJoin = style;
this.cornerStyle = style;
this.ctx.beginPath();
this.ctx.moveTo(x1, y1);
this.ctx.lineTo(centerX, centerY);
this.ctx.lineTo(x2, y2);
this.ctx.stroke();
};
//Function to draw a hollow rectangle
this.hollowRect = function(x, y, width, height) {
this.ctx.strokeRect(x, y, width, height);
};
//Function to set the canvas background
this.background = function(style) {
this.fillStyle = style;
this.ctx.fillStyle = style;
this.ctx.fillRect(0, 0, this.src.width, this.src.height);
};
//Function to draw a line
this.line = function(startX, startY, endX, endY) {
this.ctx.beginPath();
this.ctx.moveTo(startX, startY);
this.ctx.lineTo(endX, endY);
this.ctx.stroke();
};
//Function to change line style
this.lineCap = function(mode) {
this.ctx.lineCap = mode;
this.lineCap = mode;
};
//Function to change stroke weight
this.strokeWeight = function(weight) {
this.useStroke = true;
this.ctx.lineWidth = weight;
this.strokeWeightVar = weight;
};
//Function to clear a certain area
this.clearArea = function(x, y, width, height) {
this.ctx.clearRect(x, y, width, height);
};
//Turn the show coordinate function on
this.enableCoordinates = function() {
this.showCoordinatesBool = true;
this.src.addEventListener("mousemove", this.showCoordinates);
};
/*Shadows*/
//Set the shadow color
this.shadowColor = function(color) {
this.shadowColorVar = color;
this.ctx.shadowColor = color;
};
//Set the shadow blur
this.shadowBlur = function(blur) {
this.shadowBlurVar = blur;
this.ctx.shadowBlur = blur;
};
//Set the shadow offset
this.shadowOffset = function(offsetX, offsetY) {
this.shadowOffsetX = offsetX;
this.shadowOffsetY = offsetY;
this.ctx.shadowOffsetX = offsetX;
this.ctx.shadowOffsetY = offsetY;
};
//Remove shadows
this.noShadow = function() {
this.shadowOffset(0, 0);
this.shadowColor("#000000");
this.shadowBlur(0);
};
//Function to see if a rectangle is colliding with a specific point
this.rectIsColliding = function(rectX, rectY, rectWidth, rectHeight, testX, testY) {
this.ctx.rect(rectX, rectY, rectWidth, rectHeight);
return this.ctx.isPointInPath(testX, testY);
};
//Function that returns a custom linear gradient
this.linearGradient = function(startX, startY, endX, endY, colorStops) {
var gradient = this.ctx.createLinearGradient(startX, startY, endX, endY);
for (var i = 0; i < colorStops.length; i++) {
gradient.addColorStop(colorStops[i].location, colorStops[i].color);
}
return gradient;
};
//Function that returns a custom radial gradient
this.radialGradient = function(x0, y0, r0, x1, y1, r1, colorStops) {
var radialGradientVar = this.ctx.createRadialGradient(x0, y0, r0, x1, y1, r1);
for (var i = 0; i < colorStops.length; i++) {
radialGradientVar.addColorStop(colorStops[i].location, colorStops[i].color);
}
return radialGradientVar;
};
//Function that allows you to create a pattern
this.pattern = function(image, mode) {
var pat = this.ctx.createPattern(image, mode);
return pat;
};
//Function that allows you to make text. Optional width parameter to limit the width of the text. Optional font parameter if you would like to set it manually.
this.text = function(text, x, y, width, font) {
if (font) {
this.ctx.font = font;
}
else {
this.ctx.font = this.fontStyle + " " + this.fontVariant + " " + this.fontThickness + " " + this.fontSize + "px " + this.fontFamily;
console.log(this.ctx.font);
console.log(this.fontStyle + " " + this.fontVariant + " " + this.fontThickness + " " + this.fontSize + "px " + this.fontFamily);
}
if (width) {
this.ctx.fillText(text, x, y, width);
if (this.useStroke) {
this.ctx.strokeText(text, x, y, width);
}
}
else {
this.ctx.fillText(text, x, y);
if (this.useStroke) {
this.ctx.strokeText(text, x, y);
}
}
};
//Function that allows you to make hollow text. Optional width parameter to limit the width of the text. Optional font parameter if you would like to set it manually. Font Size MUIST be an INTEGER if you do not specify the font parameter
this.hollowText = function(text, x, y, width, font) {
if (font) {
this.ctx.font = font;
}
else {
this.ctx.font = this.fontStyle + " " + this.fontVariant + " " + this.fontThickness + " " + this.fontSize + "px " + this.fontFamily;
console.log(this.ctx.font);
console.log(this.fontStyle + " " + this.fontVariant + " " + this.fontThickness + " " + this.fontSize + "px " + this.fontFamily);
}
this.ctx.strokeText(text, x, y, width);
};
this.textWidth = function(text) {
return this.ctx.measureText(text).width;
};
};
//The following code is for testing purposes ONLY!
var start = function(image) {
//Create a new canvas
var myCanvas = new canvasObj(Canvas);
//Set the Background Color
myCanvas.background("#ff0000");
//Set the fill color
myCanvas.fill("#0000ff");
//Set the Stroke Color
myCanvas.stroke("#00ff00");
//Draw a rectangle
myCanvas.rect(164, 153, 50, 100);
//Draw a hollow rectangle
myCanvas.hollowRect(300, 300, 50, 50);
//Disable the Stroke
myCanvas.noStroke();
//Draw a rectangle with no stroke
myCanvas.rect(21, 18, 50, 50);
//Change the Stroke color
myCanvas.stroke("#ffff00");
//Change the stroke weight
myCanvas.strokeWeight(10);
//Change the line cap
myCanvas.lineCap("round");
//Draw a line
myCanvas.line(350, 30, 250, 80);
//Draw a corner
myCanvas.corner("miter", 50, 135, 100, 185, 100, 110);
//Enable the Coordinates
myCanvas.enableCoordinates();
//Clear a space from the canvas
myCanvas.clearArea(6, 245, 100, 100);
//Set the Shadow Color
myCanvas.shadowColor("black");
//Set the shadow Blur
myCanvas.shadowBlur(20);
//Set the shadow offset
myCanvas.shadowOffset(10, 0);
//Set the stroke
myCanvas.noStroke();
//Set the fill color
myCanvas.fill("orange");
//Draw a rectangle
myCanvas.rect(268, 167, 30, 30);
//Remove the shadow
myCanvas.noShadow();
//Test if the rectangle is colliding with a specific point
if (myCanvas.rectIsColliding(268, 167, 30, 30, 290, 170)) {
myCanvas.fill("green");
myCanvas.rect(358, 0, 50, 46);
}
else {
myCanvas.fill("yellow");
myCanvas.rect(362, 0, 50, 46);
}
//Test if a line is colliding with a certain point
console.log("function returned: " + myCanvas.lineIsColliding(358, 277, 365, 268, 362, 271));
if (myCanvas.lineIsColliding(358, 277, 365, 268, 362, 271)) {
console.log("line is colliding!");
myCanvas.line(358, 277, 365, 268);
}
else {
console.log("line is not colliding!");
}
myCanvas.line(0, 0, 50, 10);
//Color stop used for creating gradients
var colorStop = function(location, color) {
this.location = location;
this.color = color;
};
console.log(distance(0, 0, 50, 10));
myCanvas.fill(myCanvas.linearGradient(259, 77, 359, 127, [new colorStop(0.0, "green"), new colorStop(1.0, "blue")]));
myCanvas.rect(259, 87, 100, 50);
myCanvas.fill(myCanvas.radialGradient(309, 225, 10, 309, 225, 50, [new colorStop(0.0, "yellow"), new colorStop(1.0, "green")]));
myCanvas.rect(259, 200, 100, 50);
var pattern = myCanvas.pattern(image, "repeat");
myCanvas.fill(pattern);
myCanvas.rect(132, 81, 50, 100);
myCanvas.fill(rgbToHex(0, 0, 0));
//Setup text
myCanvas.fontSize = 50;
myCanvas.fontStyle = "oblique";
myCanvas.fontVariant = "small-caps";
myCanvas.fontThickness = 900;
myCanvas.fontFamily = "sans";
//Draw text
myCanvas.text("Test", 200, 200);
console.log(myCanvas.textWidth("Test"));
};
var img = document.createElement("img");
img.src = "Images/test.png";
console.log(img);
img.addEventListener("load", start(img));
</script>
</body>
</html>
我們沒有看到任何畫布，也沒有任何其他現有的圖像嗎？！ –