0
캔버스에 그림을 그려 넣으려고했지만 그림이 그려져 있지만 제대로 작동하지 못했습니다. 여기에 비슷한 질문이 있었지만 그런 식으로 시도했지만 나에게 효과가 없었습니다. 캔버스에 실제로 사진을 찍을 수있는 한 그림이 어디에 나타나는지는 신경 쓰지 않습니다. 또한 캔버스에서 이미지를 얻으려고 할 때 전체 캔버스가 노란색으로 바뀌 었습니까? 왜 그런지는 모르겠지만 내 꽃의 페달은 노랗고 코드의 일부분을 변경하지 않았습니다.캔버스에 그림 넣기
window.onload = function() {
drawStar(100,100,5,30,15);
TruckParts();
Flower();
colorDrop();
Test1();
};
function drawStar(cx,cy,spikes,outerRadius,innerRadius){
\t // 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(){
\t // 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(){
\t // Get referene to canvas object
var canvas = document.getElementById("myCanvas");
// Get reference to canvas drawing context
var context = canvas.getContext("2d");
//stem
\t context.beginPath();
\t context.moveTo(449, 500);
\t context.lineTo(449, 590);
\t context.lineTo(453, 590);
\t context.closePath();
\t context.fillStyle = "green";
\t 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
\t 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;
\t 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>