如何在 HTML5 Canvas 中绘制云形状？
[英]How to draw Cloud shape in HTML5 Canvas?
问题描述
我正在使用 HTML5 Canvas 和 javascript 绘制不同的形状。 但我没有得到在 HTML5Canvas 中绘制 CLOUD 形状的计算。 我正在尝试使用 2 个点（即起点和终点）绘制云形状。 请提出一些想法？ 谢谢
3 个解决方案
解决方案1
6 2013-10-23 12:16:42
参考链接： http : //www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/
var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); // draw cloud context.beginPath(); context.moveTo(170, 80); context.bezierCurveTo(130, 100, 130, 150, 230, 150); context.bezierCurveTo(250, 180, 320, 180, 340, 150); context.bezierCurveTo(420, 150, 420, 120, 390, 100); context.bezierCurveTo(430, 40, 370, 30, 340, 50); context.bezierCurveTo(320, 5, 250, 20, 250, 50); context.bezierCurveTo(200, 5, 150, 20, 170, 80); context.closePath(); context.lineWidth = 5; context.fillStyle = '#8ED6FF'; context.fill(); context.strokeStyle = '#0000ff'; context.stroke(); // save canvas image as data url (png format by default) var dataURL = canvas.toDataURL(); // set canvasImg image src to dataURL // so it can be saved as an image document.getElementById('canvasImg').src = dataURL;
body { margin: 0px; padding: 0px; }
<!DOCTYPE HTML> <html> <head> </head> <body> <canvas id="myCanvas" width="578" height="200" style="display:none;"></canvas> <img id="canvasImg" alt="Right click to save me!"> </body> </html>
解决方案2
3 2020-10-02 14:16:23
您可以使用圆弧方法创建云形状。 看看这个。
var canvas = document.querySelector('canvas'); var c = canvas.getContext('2d'); const drawCloud = (x, y) => { c.beginPath(); c.arc(x, y, 60, Math.PI * 0.5, Math.PI * 1.5); c.arc(x + 70, y - 60, 70, Math.PI * 1, Math.PI * 1.85); c.arc(x + 152, y - 45, 50, Math.PI * 1.37, Math.PI * 1.91); c.arc(x + 200, y, 60, Math.PI * 1.5, Math.PI * 0.5); c.moveTo(x + 200, y + 60); c.lineTo(x, y + 60); c.strokeStyle = '#797874'; c.stroke(); c.fillStyle = '#8ED6FF'; c.fill() } drawCloud(100,135);
body { margin: 0px; padding: 0px; }
<!DOCTYPE HTML> <html> <head> </head> <body> <canvas width="500" height="300"></canvas> </body> </html>
解决方案3
0 2021-04-07 06:22:03
请参阅图像以在画布 html5 [1] 中选择绘制云的代码： https : //i.stack.imgur.com/s3Yd2.png
在HTML5画布上绘制形状
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.