HTML 5 <Canvas>

這是我的代碼。需要使用HTML 5 canvas元素和JavaScript代碼在山地景觀之間繪製雲圖的幫助。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 2015-02-07 10:47:57

您可以使用繪製三次Bezier曲線雲的圖像。

您還可以根據需要使用變換來移動和調整雲的大小。 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（scale，scale）;對上述代碼的這一部分不確定。你能解釋一下嗎？ – newbie 2015-02-08 14:10:34

繪圖命令在畫布的左上角形成一個雲。 d.translate（x，y）會推動雲，所以它的左上角是x，y。同樣，雲以固定大小繪製。如果你想要一個更大或更小的雲，你可以發送一個比例因子（比例），這個比例因子可以使雲變大或變小。翻譯和縮放都稱爲轉換。轉換是永久的，直到它們被更改，以便您自己的下一個繪圖命令將被我的代碼翻譯和縮放。 Save（）和restore（）限制我的變換不會影響您自己的繪圖。乾杯! – markE 2015-02-08 15:47:56

這是一個非常清晰的解釋。雖然它沒有回答我最初需要用arc命令創建雲的問題，但它確實提供了一個很好的選擇。謝謝！ – newbie 2015-02-08 18:14:04

@markE道歉，我的消息還不清楚。

我100％同意你的看法。我贊成你的答案，因爲它絕對是這樣做的正確和最靈活的方式！我認爲OP會喜歡你的答案。

在你徹底的解釋之後，我很驚訝地看到@newbie說「......它沒有回答我原來的問題，它需要用弧創造雲......」。我只是想回答他，但試圖指出，使用arc（）將不靈活，不建議。

對不起，誤解。

我應該重寫我的迴應說：「同上什麼@markE說：」 :)

來源

2015-02-13 23:17:41 jared

回答

相關問題