HTML 5<；帆布>；_Html_Canvas - Fatal编程技术网

HTML 5<；帆布>；

html canvas

HTML 5<；帆布>；,html,canvas,Html,Canvas,这是我的密码。需要帮助使用HTML5画布元素和javascript代码在山景之间绘制云的图像 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <canvas id="myCanvas" style="border:2px solid black;"></canvas> </

这是我的密码。需要帮助使用HTML5画布元素和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>


无标题文件
var c=document.getElementById（“myCanvas”）；
var d=c.getContext（“2d”）；
d、 beginPath（）；
d、 strokeStyle=“红色”；
d、 moveTo（0,50）；
d、 lineTo（100,0）；
d、 moveTo（100,0）；
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、 笔划（）；
d、 beginPath（）；
d、 弧（150,15,10,0,2*数学π）；
d、 笔划（）；
d、 beginPath（）；
d、 strokeStyle=“黑色”；
d、 移动到（100100）；
d、 lineTo（200100）；
d、 lineTo（150,60）；
d、 lineTo（100100）；
d、 lineTo（100150）；
d、 lineTo（200150）；
d、 lineTo（200100）；
d、 笔划（）；
d、 moveTo（135150）；
d、 lineTo（135120）；
d、 lineTo（135120）；
d、 lineTo（160120）；
d、 lineTo（160150）；
d、 笔划（）；
d、 beginPath（）；
d、 弧（20,20,10,25*Math.PI,75*Math.PI）；
d、 笔划（）；

请在我的下面添加任何合适的代码以包含云的图像

您可以使用三次贝塞尔曲线绘制云

还可以根据需要使用变换移动云并调整其大小。“平移”命令将移动图形的起点[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）；
云（50100,0.50）；
函数云（x、y、比例）{
d、 save（）；
d、 翻译（x，y）；
d、 规模（规模，规模）；
d、 beginPath（）；
d、 moveTo（0,0）；
d、 贝塞尔曲线（-40,20，-40,70,60,70）；
d、 贝塞尔曲线图（80100150100170,70）；
d、 贝塞尔曲线图（250,70250,40220,20）；
d、 贝塞尔曲线（260，-40200，-50170，-30）；
d、 贝塞尔曲线（150，-75,80，-60,80，-30）；
d、 贝塞尔曲线（30，-75，-20，-60,0,0）；
d、 strokeStyle='lightgray'；
d、 fillStyle='white'；
d、 填充（）；
d、 笔划（）；
d、 恢复（）；
}

body{背景色：象牙色；填充：10px；}
#画布{边框：1px纯红；}

@markE抱歉，我的信息不清楚

我百分之百同意你。我对你的答案投了赞成票，因为这绝对是正确和最灵活的方法！我以为OP会喜欢你的答案

在你透彻的解释之后，我惊讶地读到，@newbie说：“.它并没有回答我最初的问题，即需要用弧形创建云……”。我只是想回答他，但我想指出，使用arc（）是不灵活的，不推荐使用

对不起，误解了

我应该重写我的回答：“同上@markE所说的：）

cloud（50100,0.50）；函数cloud（x，y，scale）{d.save（）；d.translate（x，y）；d.scale（scale，scale）；不确定上述代码的这一部分。您能解释一下吗？绘图命令在画布的左上角形成一个云。d.translate（x，y）将推动云，使其左上角位于x，y。类似地，云以固定大小绘制。如果您想要更大或更小的云，可以发送比例因子（比例）这将绘制更大或更小的云。平移和缩放都称为变换。变换在更改之前是永久的，因此您自己的下一个绘制命令将由我的代码进行平移和缩放。Save（）和restore（）限制我的转换影响您自己的绘图。干杯！这是一个解释非常清楚的解决方案。虽然它没有回答我最初的问题，即需要使用arc命令创建云，但它确实提供了一个很好的替代方案。谢谢！使用arc（）在您的声明中未将其作为要求；您也没有问任何问题，只是说“需要帮助…”。要使用arc（）创建云，您只需创建一些重叠的圆。这是一种不灵活的方法，不推荐使用。@jared，Bezier曲线的闭合路径比重叠的白点更灵活，而不是更灵活。您可以应用silver

context.stroke（）

云可能有一线希望！你可以用白色到灰色的

梯度填充那条封闭的路径，云将是一片威胁性的雷雨云！但是如果你喜欢圆形白点的补丁，那么你应该使用圆形白点的补丁；-）