项目--HTML Canvas 和 jQuery遍历

function ReShowSelected(){
$("#Map area").each(function(){
//定义画笔属性
var canvers = document.getElementById("diagonal");
var context = canvers.getContext("2d");
context.storkeStyle = "#ccc",
context.lineWidth = 1;
context.beginPath();
//标识符
var vdata = $(this).attr("data_ID");
var flag = $(this).attr("alt");
//根据不同的标识符进行处理
//圆形
if(vdata == "R"){
if(flag == "yellow"){
var strs = new Array();
strs = $(this).attr("coords").split(",");

context.arc(strs[0], strs[1], strs[2],0, Math.PI * 2, true);

context.fillStyle = ‘#ffff00‘;
$(this).attr("alt","yellow"); 
}
}
//线条
else if(vdata == "S"){
if(flag == "yellow"){
var strs = new Array();
strs = $(this).attr("coords").split(",");

var i1, i2;
for (var i = 0; i < strs.length; i++) {
if (i % 2 == 0) {
i1 = strs[i];
}
if (i % 2 == 1) {
i2 = strs[i];
if (i == 1) {
context.moveTo(i1, i2);
}
else {
context.lineTo(i1, i2);
}
}
} 

context.fillStyle = ‘#ffff00‘;
$(this).attr("alt","yellow"); 
}
}
//不规则
else{
if(flag == "blue"){
var strs = new Array();
strs = $(this).attr("coords").split(",");

var i1, i2;
for (var i = 0; i < strs.length; i++) {
if (i % 2 == 0) {
i1 = strs[i];
}
if (i % 2 == 1) {
i2 = strs[i];
if (i == 1) {
context.moveTo(i1, i2);
}
else {
context.lineTo(i1, i2);
}
}
} 

context.fillStyle = ‘#97ffff‘;
$(this).attr("alt","blue"); 
}
}

//填充颜色
context.fill();
context.closePath(); //闭合

});
}