javascript - javascript数组中的绘图读取值问题-HTML5 canvas中的绘图

我对这一切还比较陌生，正在尝试在html5-canvas上绘制基本形状。我认为一种选择是为此使用3.js，但我想知道是否有可能做到这一点？每个点的x，y值都在数组中...请帮助！下面的代码和小提琴链接：

http://jsfiddle.net/mewchew/wJwL8/8/

var canvas = document.getElementById("myCanvas");

if (canvas.getContext) {
    var ctx = canvas.getContext('2d');
    var width = canvas.width
    var height = canvas.height
    var xProp = 0.28
    var yProp = 0.43

    //Find canvas centerpoint - may need to change to global variable?
        function centerPoint(width, height) {
            x = Number(width) / 2;
            y = Number(height) / 2;
            return [x, y];
        }


    //Define diamond points
    xy = centerPoint(width,height);

    var pTx = newArray();
    pTx[0] = x;
    pTy[1] = x + xProp*x;
    pTy[2] = x;
    pTy[3] = x - xProp*x;
    pTy[4] = x;

    var pTy = newArray();
    pTy[0] = y;
    pTy[1] = y;
    pTy[2] = y - yProp*y;
    pTy[3] = y;
    pTy[4] = y + yProp*y;

    alert(String(pTx[1])+String(pTy[1]));

    //Draw diamond
    ctx.beginPath();
    ctx.moveTo(pTx[0], pTy[0]);
    ctx.lineTo(pTx[1],pTy[1]);
    ctx.lineTo(pTx[2],pTy[2]);
    ctx.lineTo(pTx[3],pTy[3]);
    ctx.lineTo(pTx[4],pTy[4]);
    ctx.closePath();
    ctx.fillstyle() = "#FFFFFF"
    ctx.fill();


} else {
    // canvas-unsupported code here
    log('Fail');
}

最佳答案

您的脚本中有几个错误

第一：

newArray()应该是new Array()

new Array()
   ^-------- see space

第二：

var pTx = newArray();
pTx[0] = x;                    // ---> ptx ok
pTy[1] = x + xProp*x;          // ---> its pty? why? change all to ptx
pTy[2] = x;                    // ---> change to ptx
pTy[3] = x - xProp*x;          // ---> change to ptx
pTy[4] = x;                    // ---> change to ptx

它应该是

var pTx = new Array();
pTx[0] = x;
pTx[1] = x + xProp*x;
pTx[2] = x;
pTx[3] = x - xProp*x;
pTx[4] = x;

第三

fillStyle不是其属性的方法

ctx.fillstyle() = "#FFFFFF"

它应该是

ctx.fillstyle = "#FFFFFF"

Demo

关于javascript - javascript数组中的绘图读取值问题-HTML5 canvas中的绘图，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/22125535/