带坐标的三角形？

Question

如何使用HTML5像in this applet那样构建坐标为三角形的坐标？这甚至有可能吗？

任何指导都会很棒。

Answer 1

您将需要HTML5的画布元素和JavaScript。这应该是诀窍：

<canvas id="canvasId" width="165px" height="145px"></canvas> 

<script type="text/javascript"><!-- 
    window.addEventListener('load', function() { 

     var context = document.getElementById("canvasId").getContext("2d"); 

     var width = 125; // Triangle Width 
     var height = 105; // Triangle Height 
     var padding = 20; 

     // Draw a path 
     context.beginPath(); 
     context.moveTo(padding + width/2, padding);  // Top Corner 
     context.lineTo(padding + width, height + padding); // Bottom Right 
     context.lineTo(padding, height + padding);   // Bottom Left 
     context.closePath(); 

     // Fill the path 
     context.fillStyle = "#ffc821"; 
     context.fill(); 

    }, false); 
// --></script>