我有以下代码,可以通过单击按钮在 HTML5 Canvas 上绘制任何多边形。用户提供半径、边长、x 和 y 坐标。使用边可以绘制任何正多边形。首先,我们使用 moveTo() 移动到周边,然后根据边使用 lineTo() 绘制线条。
js.js
function drawPolygon() {
var numberOfSides = prompt("Enter number of sides");
var Xcenter = prompt("Enter x");
var Ycenter = prompt("Enter y");
var size = prompt("Enter radius");
var con=document.getElementById("myCanvas");
var cxt=con.getContext("2d");
cxt.beginPath();
cxt.moveTo (Xcenter + size * Math.cos(0), Ycenter + size * Math.sin(0));
for (var i = 1; i <= numberOfSides;i += 1) {
cxt.lineTo (Xcenter + size * Math.cos(i * 2 * Math.PI / numberOfSides), Ycenter + size * Math.sin(i * 2 * Math.PI / numberOfSides));
}
cxt.strokeStyle = "#000000";
cxt.lineWidth = 1;
cxt.stroke();
}
function registerEvents(){
var poly = document.getElementById("polygon");
poly.addEventListener( "click", drawPolygon, false);
}
window.addEventListener('load', registerEvents, false);
提供输入后, Canvas 上不会绘制任何内容。我的代码有错误吗?
最佳答案
您的数学错误,因为您没有将输入转换为数值。
例如Ycenter + size * Math.sin(0)
将不会返回正确的结果,除非 Ycenter
和 size
是数值。
你可能应该这样做:
var Xcenter = parseFloat(prompt("Enter x"));
var Ycenter = parseFloat(prompt("Enter y"));
var size = parseFloat(prompt("Enter radius"));
关于javascript - 在 HTML5 Canvas 上绘制多边形时出错,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16179043/