HTML 5 <Canvas>
HTML 5 <Canvas>
这是我的代码。在使用 html 5 canvas 元素和 javascript 代码绘制山景之间的云图像时需要帮助。
<!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>
请在我的下方添加任何合适的代码以包含云的图像
您可以使用三次贝塞尔曲线绘制云。
您还可以根据需要使用变换移动云彩并调整其大小。 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>
@markE 抱歉，我的信息不清楚。
我 100% 同意你的看法。我赞成您的回答，因为这绝对是正确且最灵活的方法！我以为 OP 会喜欢你的回答。
我很惊讶地看到，在你的详尽解释之后，@newbie 说“..它没有回答我原来的问题，即需要用 arc 创建云......”。
我只是想回答他，但试图指出使用 arc() 是不灵活的，不推荐使用。
抱歉造成误解。
我应该重写我的回复："Ditto what @markE said" :)
这是我的代码。在使用 html 5 canvas 元素和 javascript 代码绘制山景之间的云图像时需要帮助。
<!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>
请在我的下方添加任何合适的代码以包含云的图像
您可以使用三次贝塞尔曲线绘制云。
您还可以根据需要使用变换移动云彩并调整其大小。 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>
@markE 抱歉，我的信息不清楚。
我 100% 同意你的看法。我赞成您的回答，因为这绝对是正确且最灵活的方法！我以为 OP 会喜欢你的回答。
我很惊讶地看到，在你的详尽解释之后，@newbie 说“..它没有回答我原来的问题，即需要用 arc 创建云......”。 我只是想回答他，但试图指出使用 arc() 是不灵活的，不推荐使用。
抱歉造成误解。
我应该重写我的回复："Ditto what @markE said" :)