我无法在 Canvas 上绘制三 Angular 形。三 Angular 形:x 轴上有 2 个点的等边三 Angular 形。所以我在想:我从右下角开始，向上移动到下一个点，然后移动到左下角的最后一个点。这是我所拥有的:
<!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 ，但我不确定我搞砸了什么。
最佳答案
您需要为 Canvas 指定尺寸。使用 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();<!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>关于javascript - 在 Canvas 上画一个三 Angular 形，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32788694/