HTML 5 <Canvas>

내 코드는 다음과 같습니다. html 5 캔버스 요소와 자바 스크립트 코드를 사용하여 산 풍경 사이에 구름 이미지를 그리는 데 도움이 필요합니다. HTML 5 <Canvas>

<!doctype html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Untitled Document</title> 
<canvas id="myCanvas" style="border:2px solid black;"></canvas> 
</head> 
<body> 
<script> 
var c= document.getElementById("myCanvas"); 
var d=c.getContext("2d"); 

d.beginPath(); 
d.strokeStyle="red"; 
d.moveTo(0,50);<!-- width is 0 and height is 50--> 
d.lineTo(100,0); 
d.moveTo(100,0);<!-- width is 0 and height is 50--> 
d.lineTo(150,50); 
d.moveTo(150,50); 
d.lineTo(200,0); 
d.moveTo(200,0); 
d.lineTo(300,50); 
d.lineTo(0,50); 
d.stroke(); 
d.beginPath(); 
d.arc(150,15,10,0,2*Math.PI); 
d.stroke(); 
d.beginPath(); 
d.strokeStyle="black"; 
d.moveTo(100,100); 
d.lineTo(200,100); 
d.lineTo(150,60); 
d.lineTo(100,100); 
d.lineTo(100,150); 
d.lineTo(200,150); 
d.lineTo(200,100); 
d.stroke(); 
d.moveTo(135,150); 
d.lineTo(135,120); 
d.lineTo(135,120); 
d.lineTo(160,120); 
d.lineTo(160,150); 
d.stroke(); 
d.beginPath(); 
d.arc(20,20,10,.25*Math.PI,.75*Math.PI); 
d.stroke(); 
</script> 
</body> 
</html>

클라우드

출처

2015-02-07 newbie

http://meta.stackoverflow.com/questions/274630/should-we-add-a-do-my :

난 그냥 말을 내 대답을 다시 작성해야 -work-for-me-close-reason/274779 # 274779 – GameAlchemist

당신은 삼차 베 지어 곡선을 사용하여 구름을 그릴 수의 이미지를 포함하는 내 아래에 적당한 코드를 추가하십시오.

변환을 사용하여 필요에 따라 구름을 이동하고 크기를 조정할 수도 있습니다. translate 명령은 도면의 시작점 [x, y]을 이동합니다. 크기 명령을 사용하면 도면을 더 크게 또는 더 작게 조정할 수 있습니다.

다른 유용한 명령 세트는 save() 및 restore()입니다. context.save()은 드로잉 색상을 변경하거나 변형하기 전에 컨텍스트 상태를 저장합니다. context.restore()은 마지막 context.save 이전의 원래 컨텍스트를 복원합니다. 그렇지 않으면 모든 변환을 수동으로 취소하고 색상을 재설정해야합니다.

여기 예제 코드와 데모입니다 :

var canvas=document.getElementById("canvas"); 
 
var d=canvas.getContext("2d"); 
 

 
d.fillStyle='skyblue'; 
 
d.fillRect(0,0,canvas.width,canvas.height); 
 

 
cloud(50,100,0.50); 
 

 
function cloud(x,y,scale){ 
 
    d.save(); 
 
    d.translate(x,y); 
 
    d.scale(scale,scale); 
 
    d.beginPath(); 
 
    d.moveTo(0, 0); 
 
    d.bezierCurveTo(-40, 20, -40, 70, 60, 70); 
 
    d.bezierCurveTo(80, 100, 150, 100, 170, 70); 
 
    d.bezierCurveTo(250, 70, 250, 40, 220, 20); 
 
    d.bezierCurveTo(260, -40, 200, -50, 170, -30);   
 
    d.bezierCurveTo(150, -75, 80, -60, 80, -30); 
 
    d.bezierCurveTo(30, -75, -20, -60, 0, 0); 
 
    d.strokeStyle='lightgray'; 
 
    d.fillStyle='white'; 
 
    d.fill(); 
 
    d.stroke(); 
 
    d.restore(); 
 
}

body{ background-color: ivory; padding:10px; } 
 
#canvas{border:1px solid red;}

<canvas id="canvas" width=300 height=300></canvas>

출처

2015-02-07 16:39:15 markE

클라우드 (50,100,0.50); function cloud (x, y, scale) { d.save(); d.translate (x, y); d.scale (스케일, 스케일); 위 코드의이 섹션에 대해 확신하지 못했습니다. 설명해 주시겠습니까? – newbie

그리기 명령은 캔버스의 왼쪽 위 모서리에 구름을 만듭니다. d.translate (x, y)는 구름을 밀어 좌상 구석이 x, y가되도록합니다. 마찬가지로 구름은 고정 된 크기로 그려집니다. 크고 작은 클라우드를 원한다면 클라우드를 더 크게 또는 더 작게 만드는 스케일 인수 (스케일)를 보낼 수 있습니다. 번역과 스케일 모두 변환이라고합니다. 변환은 변경 될 때까지 영구적이므로 다음 드로잉 명령은 내 코드로 변환되고 크기가 조정됩니다. Save() 및 restore()는 내 변형이 사용자의 도면에 영향을주지 않도록 제한합니다. 건배! – markE

이것은 매우 명확하게 설명 된 솔루션입니다. 그것은 호 명령으로 구름을 만들어야한다는 필자의 원래 질문에 대답하지는 못했지만 확실히 좋은 대안을 제공했다. 고맙습니다 ! – newbie

@markE 죄송합니다, 내 메시지는 분명했다.

나는 100 % 당신에 동의합니다. 나는 당신의 답을 upvoted 그것이 절대적으로 올바른하고 가장 유연한 방법이기 때문에! 나는 OP가 네 대답을 좋아할 거라고 생각 했어.

당신의 철저한 설명 후에, @newbie는 ".. 그것은 호를 사용하여 구름을 만들어야하는 나의 원래 질문에 대답하지 못했습니다."라고 놀랐습니다. 나는 그에게 대답하려고 노력했지만, arc()를 사용하는 것이 유연하지 않으며 추천되지 않는다는 것을 지적하려고했다.

오해를 불러 와서 죄송합니다. "@markE 말한 동감":

출처

2015-02-13 23:17:41 jared

HTML 5 <Canvas>

답변

관련 문제