如何在畫布上放置圖片

Question

我一直在嘗試將要繪制形狀的圖像顯示在畫布上，但無法使其正常工作。 這里也有類似的問題，但我嘗試這樣做，但對我來說不起作用。 我真的不在乎圖片在畫布上出現的位置，只要我能實際得到它即可。 另外，當我嘗試在畫布上獲取圖像時，整個畫布變成了黃色？ 我不知道為什么，但是我的花朵上的腳踏板是黃色的，我沒有做任何更改。

 window.onload = function() { drawStar(100,100,5,30,15); TruckParts(); Flower(); colorDrop(); Test1(); }; function drawStar(cx,cy,spikes,outerRadius,innerRadius){ // Get referene to canvas object var canvas = document.getElementById("myCanvas"); // Get reference to canvas drawing context var context = canvas.getContext("2d"); var rot=Math.PI/2*3; var x=cx; var y=cy; var step=Math.PI/spikes; context.beginPath(); context.moveTo(cx,cy-outerRadius) for(i=0;i<spikes;i++){ x=cx+Math.cos(rot)*outerRadius; y=cy+Math.sin(rot)*outerRadius; context.lineTo(x,y) rot+=step x=cx+Math.cos(rot)*innerRadius; y=cy+Math.sin(rot)*innerRadius; context.lineTo(x,y) rot+=step } context.lineTo(cx,cy-outerRadius); context.closePath(); context.lineWidth=5; context.strokeStyle='lightblue'; context.stroke(); context.fillStyle='grey'; context.fill(); } function TruckParts(){ // Get referene to canvas object var canvas = document.getElementById("myCanvas"); // Get reference to canvas drawing context var context = canvas.getContext("2d"); // Draw truck body context.beginPath(); context.moveTo(125, 450); context.lineTo(200, 450); context.lineTo(250, 500); context.lineTo(290, 500); context.lineTo(290, 550); context.lineTo(25, 550); context.lineTo(25, 500); context.lineTo(250, 500); context.lineTo(110, 550); context.lineTo(200, 500); context.lineTo(125, 500); context.closePath(); context.strokeStyle = "darkred"; context.lineWidth = 1; context.stroke(); context.fillStyle = "red"; context.fill(); //Draw truck tire1 context.beginPath(); context.arc(100,560,30,0,2*Math.PI); context.strokeStyle = "white"; context.lineWidth = 1; context.stroke(); context.fillStyle = "black"; context.fill(); //Draw truck tire 2 context.beginPath(); context.arc(230,560,30,0,2*Math.PI); context.strokeStyle = "white"; context.lineWidth = 1; context.stroke(); context.fillStyle = "black"; context.fill(); }; //Draw Flower function Flower(){ // Get referene to canvas object var canvas = document.getElementById("myCanvas"); // Get reference to canvas drawing context var context = canvas.getContext("2d"); //stem context.beginPath(); context.moveTo(449, 500); context.lineTo(449, 590); context.lineTo(453, 590); context.closePath(); context.fillStyle = "green"; context.fill(); //top left pedal context.beginPath(); context.arc(436,490,20,0,2*Math.PI); context.strokeStyle = "pink"; context.lineWidth = 1; context.stroke(); context.fillStyle = "yellow"; context.fill(); //bottom right pedal context.beginPath(); context.arc(465,512,20,0,2*Math.PI); context.strokeStyle = "pink"; context.lineWidth = 1; context.stroke(); context.fillStyle = "yellow"; context.fill(); //top right pedal context.beginPath(); context.arc(465,490,20,0,2*Math.PI); context.strokeStyle = "pink"; context.lineWidth = 1; context.stroke(); context.fillStyle = "yellow"; context.fill(); //bottom left pedal context.beginPath(); context.arc(436,512,20,0,2*Math.PI); context.strokeStyle = "pink"; context.lineWidth = 1; context.stroke(); context.fillStyle = "yellow"; context.fill(); //center context.beginPath(); context.arc(450,500,17,0,2*Math.PI); context.strokeStyle = "yellow"; context.lineWidth = 1; context.stroke(); context.fillStyle = "pink"; context.fill(); }; //colors array let colors = [ {colorname: "Red", color: "red" }, {colorname: "Blue", color: "blue"}, {colorname: "Green", color: "green"}, {colorname: "Purple", color: "purple"}, {colorname: "Pink", color: "pink"}, ]; function colorDrop () { let locaRef = document.querySelector("#colorDrop"); let option1 = document.createElement("option"); option1.value = 0; option1.text = colors[0].colorname; let option2 = document.createElement("option"); option2.value = 1; option2.text = colors[1].colorname; let option3 = document.createElement("option"); option3.value = 2; option3.text = colors[2].colorname; let option4 = document.createElement("option"); option4.value = 3; option4.text = colors[3].colorname; let option5 = document.createElement("option"); option5.value = 4; option5.text = colors[4].colorname; locaRef.appendChild(option1); locaRef.appendChild(option2); locaRef.appendChild(option3); locaRef.appendChild(option4); locaRef.appendChild(option5); } function handleDropdown(){ //convert index to number let index = document.getElementById("colorDrop").value; let setColor = colors[index].color; }; //similar function that does not work for me function Test1() { let context = document.getElementById('test1'); if (context.getContext) { context = context.getContext('2d'); //Loading of the home test image - img1 let img1 = new Image(); //drawing of the test image - img1 img1.onload = function () { //draw background image context.drawImage(img1, 0, 0); //draw a box over the top context.fillStyle = "rgba(200, 0, 0, 0.5)"; context.fillRect(0, 0, 500, 500); }; img1.src = "puppy.jpg"; } } 

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link rel= 'stylesheet' href="p3.css"> <script src="p3.js"> </script> <style>canvas { border: 1px solid black; }</style> </header> <body> <canvas width= "1000" height= "600" id= "myCanvas"> </canvas> </body> </html> <header> </header> <nav> </nav> <main> Enter text: <input type="text"> <button type= "button">Press Button</button> <select id="colorDrop" onchange="handleDropdown()"> <option value="">Select a Color</option> </select> </main> <footer> </footer> </body> </html> 

Answer 1

Test1函數中的以下行阻止您的代碼工作...

let context = document.getElementById('test1');

當然需要更改為...

let context = document.getElementById('myCanvas');

當我進行此更改時，您的代碼有效，我為img1.src指定的圖像顯示在畫布的左上方，並且還會顯示50％alpha的填充矩形。