您的位置:首页 > Web前端 > JavaScript

求解js 关于drawImage,怎么程序响应后没图片显示

2014-04-17 16:57 337 查看
function renderPolygons(canvas, records, data, box, style) {

log('rendering polygons');

var t1 = new Date().getTime();

log('starting rendering...');

var img= new Image();

var ctx = canvas.getContext('2d');

var sc = Math.min(canvas.width / box.width, canvas.height / box.height);

if (style) {

for ( var p in style) {

ctx[p] = style[p];

}

}

for ( var i = 0; i < records.length; i++) {

var record = records[i];

if (record.shapeType == ShpType.SHAPE_POLYGON

|| record.shapeType == ShpType.SHAPE_POLYLINE) {

var shp = record.shape;

ctx.fillStyle = getFillRecord(data[i]);// m

ctx.beginPath();

for ( var j = 0; j < shp.rings.length; j++) {

var ring = shp.rings[j];

if (ring.length < 1)

continue;

ctx.moveTo((ring[0].x - box.x) * sc, canvas.height

- (ring[0].y - box.y) * sc); //移动到图形的顶点

if (data[i].values["CATACH"]){

//alert(ring[0].x)

//alert(-6.5 + (ring[0].x - box.x) * sc)

//alert( -23 + canvas.height - (ring[0].y - box.y) * sc) //这些都可以相应 但是下面的drawImage却没显示图片img

img.src = "http://localhost:8000/db/anchor.png";

ctx.drawImage(img,-6.5 + (ring[0].x - box.x) * sc, -23 + canvas.height - (ring[0].y - box.y) * sc);

}

for ( var k = 1; k < ring.length; k++) { //画出图形的四边

ctx.lineTo((ring[k].x - box.x) * sc, canvas.height

- (ring[k].y - box.y) * sc);

}

}

if (record.shapeType == ShpType.SHAPE_POLYGON) {

ctx.fill();

}

// if (style.strokeStyle) {

ctx.stroke();

// }

}

}

t2 = new Date().getTime();

log('done rendering in ' + (t2 - t1) + ' ms');

}

function getFillRecord(record) {

var popn = parseInt(record.values["DRVAL2"]);

var color;

if (popn <= 0) {

color = "rgb(66, 179, 232)";

} else if (popn <= 2) {

color = "rgb(129, 195, 226)";

} else if (popn <= 5) {

color = "rgb(162,210,229)";

} else if (popn <= 10) {

color = "rgb(177, 229, 254)";

} else if (popn > 10) {

color = "rgb(216, 244, 225)";

}

return color;

}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐