我怎样才能通过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函数

回答

相关问题