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

HTML 5 <Canvas>

回答

相关问题