我怎樣才能通過JavaScript函數

我希望用戶能夠某處點擊畫布上，多邊形將出現在它我怎樣才能通過JavaScript函數

<DIV id="canvasarea" class="rounded"> 
    <CANVAS id="canvas" width="800px" height="800px"></CANVAS> 
    </DIV>

來源

2010-08-13 Jef Null

請注意，它應該是width =「800」height =「800」，即沒有「px」。這些屬性的值定義了抽象座標系，而不是畫布的大小。 – Ms2ger 2010-08-14 16:06:52

使用JavaScript庫，我得出一個HTML5畫布上的多邊形首先嚐試處理js - 記住IE必須被欺騙來支持canvas。

我沒有看到，完全匹配您的要求樣品，不過這兩個應該給你一個很好的起點

http://processingjs.org/learning/basic/shapeprimitives

同域-AS-以上/學習/主題/ continuouslines

這裏還有一個偉大的入門畫布 - 谷歌「潛入html5畫布」

來源

2010-08-14 04:37:37 merelycurious

我同意。另外使用JavaScript庫將爲您提供更好的瀏覽器支持。我最喜歡的是RaphaelJS：http://raphaeljs.com/。 – 2012-04-20 03:46:24

這裏是一個函數，我包括在一個對象使用mootools庫。你也可以用普通的javascript來實現它。 ctx等於canvas.getContext（'2d'）對象，n var定義了我們想要的多邊形的邊的數量......我希望你明白，解決方案只需要基本的數學運算。

polygonPath: function(ctx, n) { 
     var eq = 360/n; 
    var radius = 50; 

    this.points = {xy: []}; 
    ctx.beginPath(); 

    ctx.moveTo(50,0); 

    for (var i = 0 ; i <= n; i++){ 
     var deg = i * eq; 
     var rad = this.radConst * deg; 
     var x1 = radius * Math.cos(rad); 
     var y1 = radius * Math.sin(rad); 
     console.log('x: ' + x1 + ', y: ' + y1 + ', deg: ' + deg); 
     ctx.lineTo(x1,y1); 

     this.points.xy.push(x1 + ',' + y1 + ',' + rad); 
    } 

    ctx.stroke(); 
    ctx.closePath(); 

      /* Pentagon: 
     point 1 : 50,0 
     point 2: 15.45, 47.55 
     point 3: -40.45, 29.38 
      point 4: -40.45, -29.38 
     point 5: 15.45, -47.55 
     point 6 : 50, -1.22e-14*/      
    },

來源

2011-01-25 23:41:34 user589863

KineticJS是快速入門的好方法。以下是向您展示如何繪製多邊形的畫布上的例子：

http://www.html5canvastutorials.com/kineticjs/html5-canvas-kineticjs-polygon-tutorial/

檢測你的點擊，然後運行在所提供的示例邏輯。

來源

2012-06-04 21:05:52 Scott

從這裏：http://www.authorcode.com/draw-and-fill-a-polygon-and-triangle-in-html5/

您可以用lineTo（）方法：

var objctx = canvas.getContext('2d'); 

objctx.beginPath(); 
objctx.moveTo(75, 50); 
objctx.lineTo(175, 50); 
objctx.lineTo(200, 75); 
objctx.lineTo(175, 100); 
objctx.lineTo(75, 100); 
objctx.lineTo(50, 75); 
objctx.closePath(); 
objctx.fillStyle = "rgb(200,0,0)"; 
objctx.fill();

如果你不想填寫多邊形使用stroke()方法fill()

感謝的地方。

來源

2013-04-07 13:29:19 ankur

我怎樣才能通過JavaScript函數

回答

相關問題