Question

工作在 Javascript 画布绘制一个八边形，我有这个功能和代码，但它不工作的一些原因。

function drawMe()
{   
var numberOfSides = 8;
    size = 10;
    Xcenter = 100;
    Ycenter = 100;
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();
}

0

Answer 1

只要 cxt 是对画布上下文的有效引用，您的代码将成功绘制一个六边形（我假设您将 6 更改为 8）。

如果它没有绘制六边形，请确保您具有对上下文的有效引用。

示例代码：

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" xxx="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
    body{ background-color: ivory; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){
    var canvas=document.getElementById("canvas");
    var cxt=canvas.getContext("2d");
    var numberOfSides = 6;
        size = 10;
        Xcenter = 100;
        Ycenter = 100;
    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();
}); // end $(function(){});
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>

Answer 2

<!DOCTYPE html>
<html>
<body>
<canvas id="canvas"></canvas>
<script>
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.strokeStyle = "#000000";
    ctx.lineWidth = 1;
    function drawMe()
    {   
        var numberOfSides = 8,
        size = 10,
        Xcenter = 100,
        Ycenter = 100;
        ctx.beginPath();
        ctx.moveTo (Xcenter +  size * Math.cos(0), Ycenter +  size *  Math.sin(0));          
        for (var i = 1; i <= numberOfSides; i += 1) 
        {
            ctx.lineTo (Xcenter + size * Math.cos(i * 2 * Math.PI / numberOfSides), Ycenter + size * Math.sin(i * 2 * Math.PI / numberOfSides));
        }
        ctx.stroke();
    }
    drawMe();
</script>
</body>
</html>