javascript - 在 javascript 数组中绘制读取值的问题 - 在 HTML5 Canvas 中绘制

Question

我对这一切都比较陌生，正在尝试在 html5-canvas 上绘制基本形状。我认为一个选择是使用 3.js，但我想知道是否可以不使用 3.js？每个点的 x,y 值都在数组中...请帮忙!代码和 fiddle 链接如下:

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');
}

Answer 1

您的脚本中有几个错误

第一:

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