在画布上画一个三角形答案

【问题标题】：drawing a triangle on canvas在画布上画一个三角形
【发布时间】：2018-10-21 08:19:15
【问题描述】：

我在画布上绘制三角形时遇到问题。三角形：x 轴上有 2 个点的等边三角形。所以我在想：我从右下角开始，向上移动到下一个点，然后移动到左下角的最后一个点。这是我所拥有的：

<!doctype html>
    <html lang="en">
    <head>
    <meta charset= "UTF-8">
    
    <script type="text/JavaScript">
    	function draw() {
    		var canvas = document.getElementById('canvas');
      		if (canvas.getContext) {
       			var ctx = canvas.getContext('2d');
    			
    			var sWidth = screen.width;
    			var sHeight = screen.height;
        		var path=new Path2D();
        		path.moveTo((sWidth/2)+50,sHeight/2);
        		path.lineTo((sWidth/2),(sHeight/2)-50);
        		path.lineTo((sWidth/2)-50,sHeight/2);
        		ctx.fill(path);
      		}
      	}
    
    
    </script>
    </head>
    
    <body onload="draw();">
    	<div align = "center">
    		<canvas id = "canvas">
    
    		</canvas>
    
    	</div>
    
    </body>
    </html>

什么都画不出来。我读到：https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes，但我不确定我搞砸了什么。

【问题讨论】：

标签： javascript canvas

【解决方案1】：

您需要为画布指定尺寸。使用 CSS、HTML 或 JavaScript

这是一个有效的 sn-p：

 function draw() {
        var canvas = document.getElementById('canvas');
        if (canvas.getContext) {
            var ctx = canvas.getContext('2d');

            var sWidth = canvas.width;
            var sHeight = canvas.height;
            var path=new Path2D();
            path.moveTo((sWidth/2)+50,sHeight/2);
            path.lineTo((sWidth/2),(sHeight/2)-50);
            path.lineTo((sWidth/2)-50,sHeight/2);
            ctx.fill(path);
        }
    }

draw();

<!doctype html>
<html lang="en">
<head>
<meta charset= "UTF-8">

<style>canvas { width: 200px; height: 200px; border: 1px solid red; }</style>
</head>

<body>
  <canvas id="canvas">

  </canvas>
</body>
</html>

【讨论】：