HTML 5< Canvas> [英] HTML 5 <Canvas>
问题描述
这是我的代码。需要帮助使用html 5 canvas元素和javascript代码在山地景观之间绘制云的图像。
Here's my code. Need help with drawing an image of a cloud in between the mountain landscape using html 5 canvas element and javascript code.
<!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>
请在我的下面添加任何合适的代码以包含云的图像
Please add any suitable code below mine to include the image of a cloud
推荐答案
您可以使用三次贝塞尔曲线绘制云。
You can draw clouds using cubic Bezier curves.
您还可以移动云块并调整其大小根据需要使用变换。 translate命令将移动绘图的起始[x，y]点。 scale命令会将绘图缩小和缩小。
You can also move and resize the clouds as needed using transforms. The translate command will move the starting [x,y] point of your drawing. The scale command will scale the drawing larger and smaller.
另一组有用的命令是save（）和restore（）。 context.save（）将在更改绘图颜色或执行转换之前保存上下文状态。 context.restore（）将恢复最后一个context.save之前存在的原始上下文。否则，您需要手动撤消所有变换并重置颜色。
Another set of useful commands is save() and restore(). context.save()will save the context state before you change drawing colors or do transformes. context.restore() will restore the original context as it existed before the last context.save. Otherwise, you would need to manually undo all the transforms and reset the colors.
以下是示例代码和演示：
Here's example code and a Demo:
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>
这篇关于HTML 5< Canvas>的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
