在画布上画一个三角形

Question

在画布上画一个三角形

我在画布上绘制三角形时遇到问题.三角形:等边三角形,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>

Run Code Online (Sandbox Code Playgroud)

什么都没画.我看了:https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes,但我不确定我搞砸了什么.

Answer 1

die*_*ump 7

您需要为画布指定大小.使用CSS,HTML或JavaScript

这是一个有效的片段:

 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();

Run Code Online (Sandbox Code Playgroud)

<!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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	10 年，1 月前
查看次数：	12597 次
最近记录：	7 年，1 月前