如何在HTML5畫布中繪製雲形狀？

-3

我正在使用HTML5 Canvas & javascript繪製不同形狀。但我沒有得到在HTML5Canvas中繪製CLOUD形狀的計算。我正在嘗試使用2個點繪製CLOUD形狀（即起點&終點）。好心建議一些想法？謝謝如何在HTML5畫布中繪製雲形狀？

來源

2013-10-23 MIT

http://stackoverflow.com/questions/4927909/is-there-a-good-method-for-dynamically-drawing-clouds-with-html5-canvas-and-java 外觀在這篇文章 – Elior

@Elior我已經看過這個解決方案，但這種方法（即makeCloud）正在繪製隨機形狀的CLOUD。這裏我想要一個固定的CLOUD形狀，每次我繪製CLOUD註釋時，它每次都以相同的方式繪製。正如我們在MS-WORD CLOUD SHAPE中可以看到的那樣 – MIT

您可以使用重疊的橢圓形狀和固定的座標。因此，每次雲的形狀都是相同的。 –

Ref。鏈接：http://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/

<!DOCTYPE HTML> 
<html> 
    <head> 
    <style> 
     body { 
     margin: 0px; 
     padding: 0px; 
     } 
    </style> 
    </head> 
    <body> 
    <canvas id="myCanvas" width="578" height="200" style="display:none;"></canvas> 
    <img id="canvasImg" alt="Right click to save me!"> 
    <script> 
     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; 

    </script> 
    </body> 
</html>

來源

2013-10-23 12:16:42 w3b

有沒有任何通用的方法來繪製雲。我已經看過這個例子，但它並不像MS-WORD CLOUD那樣繪圖。 – MIT

讓我檢查我的詞 – w3b

你問關於雲標籤嗎？ – w3b

如何在HTML5畫布中繪製雲形狀？

回答

相關問題