在画布上画一个三角形
[英]drawing a triangle on canvas
问题描述
I am having trouble drawing a triangle on a canvas. 
我在画布上绘制三角形时遇到问题。 Triangle: equilateral triangle with 2 points on the x-axis. 三角形：等边三角形，x轴上有2个点。 So what I was thinking: I start in the bottom right corner, move up to the next point, and then move to the last point in the lower left. 所以我在想：我从右下角开始，向上移动到下一个点，然后移动到左下角的最后一个点。 Here is what I have: 这是我有的：
<!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>
Nothing gets drawn. 什么都没画。 I read: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes , but I'm not sure what I messed up. 我看了： https ： //developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Drawing_shapes ，但我不确定我搞砸了什么。
1 个解决方案
解决方案1
6 已采纳 2015-09-25 18:51:36
You need to give a size to your canvas. 您需要为画布指定大小。 Either with CSS, HTML or in JavaScript 使用CSS，HTML或JavaScript
Here is a snippet that works : 这是一个有效的片段：
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.