[英]Issues with drawing reading values in javascript array - drawing in 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"
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.