在jsp页面画圆

把图片作为背景，然后重写下控件的paint方法，应该可以。

Applet还需要在客户机安装插件，可不可以用js实现呢？点击图片某一个位置，然后拖动鼠标来得到半径，释放鼠标得到圆？

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-31j">
<title>Insert title here</title>

<script type="text/javascript" src="imageAccused.js"></script>
<script type="text/javascript">window.onload = function() {
// param容器id
// 图片路径
// 提交用的隐藏控件名
// 图片宽度
// 图片高度
new ImageAccused("container", "a.jpg", "location", "300px", "400px");
};</script>
</head>
<body>

    <div style="position:relative;" id="container">

    </div>
</body>
</html>

/**
*
*/
(function() {

var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
var isIE9 = /msie 9/i.test(navigator.userAgent);

var addEventListener = function() {
if (window.addEventListener) {
return function(control, eventName, fn) {
control.addEventListener(eventName, fn, false);
};
} else if (window.attachEvent) {
return function(control, eventName, fn) {
control.attachEvent('on' + eventName, function(e) {fn.call(control, e);});
};
} else {
return function(control, eventName, fn) {
control['on' + eventName] = fn;
};
}
}();

function createElement(tagName, props, styles) {

props = props || {};

styles = styles || {};

var tag = document.createElement(tagName);

for (var propName in props) {
tag[propName] = props[propName];
}

for (var styleName in styles) {
tag.style[styleName] = styles[styleName];
}

return tag;
}

var Class = (function() {

        /**
         * Initialze object from class.
         * @param class object.
         */
        var initializeClass = (function() {
            if (Object.create) {
                return Object.create;
            } else {
                return function(o) {
                    function F() {}
                    F.prototype = o;
                    return new F();
                };
            }
        })();

        /**
         * The main function of Class.
         *
         * @param classContent
         * @param superClass
         */
        return function() {

            var classPrototype = arguments[arguments.length - 1] || {};

            for (var index = 0; index < arguments.length - 1; index++) {

                var superClass = arguments[index];

                if (typeof superClass["initialize"] == "function") {
                    classPrototype.superclass = superClass["initialize"];
                } else {
                    classPrototype.superclass = function() {};
                }

                for (var prop in superClass) {

                    if (prop == "initialize" || prop == "newInstance") {
                        continue;
                    }

                    if (classPrototype.hasOwnProperty(prop)) {
                        if (typeof superClass[prop] == "function") {
                            classPrototype.superclass[prop] = superClass[prop];
                        }
                    } else {
                        classPrototype[prop] = superClass[prop];
                    }
                }
            }
            classPrototype.newInstance = function() {
                var instance = initializeClass(this);
                if (instance["initialize"]) {
                    instance["initialize"].apply(instance, arguments);
                }
                return instance;
            };
            return classPrototype;
        };
    })();

function mousePosition(e) {
    var event = e || window.event;

    if (event.pageX || event.pageY) {
        return {x:event.pageX, y:event.pageY};
    }     return {
        x:event.clientX + document.body.scrollLeft - document.body.clientLeft,
        y:event.clientY + document.body.scrollTop - document.body.clientTop
    };
}
function getPosition(target) {
    var left = 0, top = 0;     do {
        left += target.offsetLeft || 0;
        top += target.offsetTop || 0;
        target = target.offsetParent;
    } while(target);
    return {
        left: left,
        top: top
    };
}

var GraphHelper = Class({
container: null,
width: null,
height: null,
ctx: null,

initialize: function(container, width, height) {
this.container = container;
this.container.style.width = width;
this.container.style.height = height;
this.width = parseInt(width);
this.height = parseInt(height);
},
getCtx: function() {
if (!this.ctx) {
var cvs = document.createElement('canvas');

cvs.id = "canvas_" + new Date().getTime();
cvs.width = this.width;
cvs.height = this.height;
//cvs.style.borderStyle = "solid";
//cvs.style.borderWidth = "1px";
cvs.style.position = 'absolute';

this.container.appendChild(cvs);
if (isIE && !isIE9) {
G_vmlCanvasManager.initElement(cvs);
cvs = document.getElementById(cvs.id);
}
this.canvas = cvs;
this.ctx = cvs.getContext('2d');
}
return this.ctx;
},
addEventListener: function(event, fn) {
this.getCtx();
addEventListener(this.canvas, event, fn);
},
setStyle: function(props) {
for (var prop in props) {
this.canvas.style[prop] = props[prop];
}
},
clear: function() {
var ctx = this.getCtx();
ctx.clearRect(0, 0, this.width, this.height);
},
drawCircle: function(x, y, radius, strokeColor) {
var ctx = this.getCtx();
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2, false);
ctx.strokeStyle = strokeColor;
ctx.stroke();
}
});

function createImage(container, imageUrl, imageWidth, imageHeight) {
var image = createElement("img", {src: imageUrl}, {
height: imageHeight,
width: imageWidth,
position: "absolute",
zIndex: 1
});
container.appendChild(image);
}

function createMask(container, imageWidth, imageHeight) {

var graphHelper = GraphHelper.newInstance(container, imageWidth, imageHeight);
graphHelper.getCtx();
graphHelper.setStyle({
position: "absolute",
zIndex: 3
});
var startX = 0;
var startY = 0;
var radius = 0;
var drawStart = false;
graphHelper.addEventListener('mousedown', function(event) {
graphHelper.clear();
initMark(graphHelper);
var mousePos = mousePosition(event);
var canvasPos = getPosition(container);
startX = mousePos.x - canvasPos.left;
startY = mousePos.y - canvasPos.top;
drawStart = true;
});

graphHelper.addEventListener('mousemove', function(event) {
if (drawStart == false) {
return;
}
graphHelper.clear();
initMark(graphHelper);
var mousePos = mousePosition(event);
var canvasPos = getPosition(container);
var moveX = mousePos.x - canvasPos.left;
var moveY = mousePos.y - canvasPos.top;
radius = Math.sqrt(Math.pow(moveX - startX, 2) + Math.pow(moveY - startY, 2));

graphHelper.drawCircle(startX, startY, radius, "#110000");
});
graphHelper.addEventListener('mouseup', function(event) {
drawStart = false;
setValueToControl({x: startX, y: startY, radius: radius});
});
}

function initMark(graphHelper) {
for (var index = 0; index < List.length; index++) {
graphHelper.drawCircle(List[index].x, List[index].y, List[index].radius);
}
}

function setValueToControl(Info) {
List.push(Info);
}

function createHiddenControl(controlId) {
var hiddenInput = createElement("input", {
type: "hidden",
id: controlId
});
container.appendChild(hiddenInput);
}

var List = [];

ImageAccused = function(containerId, imageUrl, hiddenControlId, imageWidth, imageHeight) {
var container = document.getElementById(containerId);
container.style.width = imageWidth;
container.style.height = imageHeight;
container.style.position = "relative";

createMask(container, imageWidth, imageHeight);

createImage(container, imageUrl, imageWidth, imageHeight);

createHiddenControl(hiddenControlId);
}
})();
这是imageAccused.js

再用google搜下excanvas.compiled.js
这样ie上也可以用了另外，如果要提交到后台，将圆的信息写入到隐藏控件这部因为我这边时间不够，没写。但是给你留了接口
修改setValueToControl这个方法就可以得到。
其中List 中保存了所有圆的信息

这段js也发下吧？我的程序得在IE里面跑.....

/**
*
*/
(function() {

var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
var isIE9 = /msie 9/i.test(navigator.userAgent);

var opacity = function() {

if (isIE) {
return function(target, rate) {
target.style.filter = "alpha(opacity=" + (rate * 100) + ")";
};
} else {
return function(target, rate) {
target.style.opacity = rate;
};
}
}();

var addEventListener = function() {
if (window.addEventListener) {
return function(control, eventName, fn) {
control.addEventListener(eventName, fn, false);
};
} else if (window.attachEvent) {
return function(control, eventName, fn) {
control.attachEvent('on' + eventName, function(e) {fn.call(control, e);});
};
} else {
return function(control, eventName, fn) {
control['on' + eventName] = fn;
};
}
}();

function createElement(tagName, props, styles) {

props = props || {};

styles = styles || {};

var tag = document.createElement(tagName);

for (var propName in props) {
tag[propName] = props[propName];
}

for (var styleName in styles) {
tag.style[styleName] = styles[styleName];
}

return tag;
}

var Class = (function() {

        /**
         * Initialze object from class.
         * @param class object.
         */
        var initializeClass = (function() {
            if (Object.create) {
                return Object.create;
            } else {
                return function(o) {
                    function F() {}
                    F.prototype = o;
                    return new F();
                };
            }
        })();

        /**
         * The main function of Class.
         *
         * @param classContent
         * @param superClass
         */
        return function() {

            var classPrototype = arguments[arguments.length - 1] || {};

            for (var index = 0; index < arguments.length - 1; index++) {

                var superClass = arguments[index];

                if (typeof superClass["initialize"] == "function") {
                    classPrototype.superclass = superClass["initialize"];
                } else {
                    classPrototype.superclass = function() {};
                }

                for (var prop in superClass) {

                    if (prop == "initialize" || prop == "newInstance") {
                        continue;
                    }

                    if (classPrototype.hasOwnProperty(prop)) {
                        if (typeof superClass[prop] == "function") {
                            classPrototype.superclass[prop] = superClass[prop];
                        }
                    } else {
                        classPrototype[prop] = superClass[prop];
                    }
                }
            }
            classPrototype.newInstance = function() {
                var instance = initializeClass(this);
                if (instance["initialize"]) {
                    instance["initialize"].apply(instance, arguments);
                }
                return instance;
            };
            return classPrototype;
        };
    })();

function mousePosition(e) {
    var event = e || window.event;

    if (event.pageX || event.pageY) {
        return {x:event.pageX, y:event.pageY};
    }     return {
        x:event.clientX + document.body.scrollLeft - document.body.clientLeft,
        y:event.clientY + document.body.scrollTop - document.body.clientTop
    };
}
function getPosition(target) {
    var left = 0, top = 0;     do {
        left += target.offsetLeft || 0;
        top += target.offsetTop || 0;
        target = target.offsetParent;
    } while(target);
    return {
        left: left,
        top: top
    };
}

var GraphHelper = Class({
container: null,
width: null,
height: null,
ctx: null,

initialize: function(container, width, height) {
this.container = container;
this.container.style.width = width;
this.container.style.height = height;
this.width = parseInt(width);
this.height = parseInt(height);
},
getCtx: function() {
if (!this.ctx) {
var cvs = document.createElement('canvas');

cvs.id = "canvas_" + new Date().getTime();
cvs.width = this.width;
cvs.height = this.height;
//cvs.style.borderStyle = "solid";
//cvs.style.borderWidth = "1px";
cvs.style.position = 'absolute';

this.container.appendChild(cvs);
if (isIE && !isIE9) {
G_vmlCanvasManager.initElement(cvs);
cvs = document.getElementById(cvs.id);
}
this.canvas = cvs;
this.ctx = cvs.getContext('2d');
}
return this.ctx;
},
addEventListener: function(event, fn) {
this.getCtx();
addEventListener(this.canvas, event, fn);
},
setStyle: function(props) {
for (var prop in props) {
this.canvas.style[prop] = props[prop];
}
},
clear: function() {
var ctx = this.getCtx();
ctx.clearRect(0, 0, this.width, this.height);
},
drawCircle: function(x, y, radius, strokeColor) {
var ctx = this.getCtx();
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2, false);
ctx.strokeStyle = strokeColor;
ctx.stroke();
}
});

function createImage(container, imageUrl, imageWidth, imageHeight) {
var image = createElement("img", {src: imageUrl}, {
height: imageHeight,
width: imageWidth,
position: "absolute",
zIndex: 1
});
container.appendChild(image);
}

function createMask(container, imageWidth, imageHeight) {

var canvasPos = getPosition(container);

var canvasContainer = createElement("div", null, {
top: canvasPos.top + "px",
left: canvasPos.left + "px",
width: imageWidth,
height: imageHeight,
position: "absolute",
zIndex: 30,
borderStyle: "solid",
borderWidth: "1px",
backgroundColor: "#ffffff"
});
document.body.appendChild(canvasContainer);
opacity(canvasContainer, 0);

var graphHelper = GraphHelper.newInstance(container, imageWidth, imageHeight);
graphHelper.getCtx();
var startX = 0;
var startY = 0;
var radius = 0;
var drawStart = false;
graphHelper.setStyle({
position: "absolute",
zIndex: 4
});
addEventListener(canvasContainer, 'mousedown', function(event) {
graphHelper.clear();
initMark(graphHelper);
var mousePos = mousePosition(event);
startX = mousePos.x - canvasPos.left;
startY = mousePos.y - canvasPos.top;
drawStart = true;
if (isIE) {
canvasContainer.setCapture(true);
event.returnValue = false;
} else {
window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
event.preventDefault();
}
});

addEventListener(document, 'mousemove', function(event) {
if (drawStart == false) {
return;
}
graphHelper.clear();
initMark(graphHelper);
var mousePos = mousePosition(event);
var moveX = mousePos.x - canvasPos.left;
var moveY = mousePos.y - canvasPos.top;
radius = Math.sqrt(Math.pow(moveX - startX, 2) + Math.pow(moveY - startY, 2));

graphHelper.drawCircle(startX, startY, radius, "#110000");
if (isIE) {
event.returnValue = false;
} else {
event.preventDefault();
}
});
addEventListener(document, 'mouseup', function(event) {
drawStart = false;
setValueToControl({x: startX, y: startY, radius: radius});
if (isIE) {
canvasContainer.releaseCapture();
event.returnValue = false;
} else {
window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
event.preventDefault();
}
});
}

function initMark(graphHelper) {
for (var index = 0; index < List.length; index++) {
graphHelper.drawCircle(List[index].x, List[index].y, List[index].radius);
}
}

function setValueToControl(Info) {
List.push(Info);
}

function createHiddenControl(controlId) {
var hiddenInput = createElement("input", {
type: "hidden",
id: controlId
});
container.appendChild(hiddenInput);
}

var List = [];

ImageAccused = function(containerId, imageUrl, hiddenControlId, imageWidth, imageHeight) {
var container = document.getElementById(containerId);
container.style.width = imageWidth;
container.style.height = imageHeight;
container.style.position = "relative";

createImage(container, imageUrl, imageWidth, imageHeight);

createMask(container, imageWidth, imageHeight);

createHiddenControl(hiddenControlId);
}
})();
有些bug，改了改，
1解决ie下无法触发canvas事件的问题。
2解决ie和其他浏览器下触发事件不平滑的问题

我就是用圆的坐标保存进数据库的这种思路。所以加了hiddenControlId这个参数。这个参数你穿进去什么，后台就用什么来取。但是这段逻辑由于没什么时间，所以就没写。你可以通过setValueToControl这个方法来改造你想要的逻辑。
excanvas.compiled.js你去google下，是个开源的

本来以为canvas触发事件就行，没想到那么麻烦。希望ie8快点淘汰吧。

“所以加了hiddenControlId这个参数。这个参数你传进去什么，后台就用什么来取”
这句话什么意思？能稍微详细说下么？
还有个问题“如果我画错了的话，怎么把错的取消掉，可以一次把刚画的圆全部去掉”？

你可以加个按钮，调用一个方法
里面做两件事
1.List = []
2.graphHelper.clear();隐藏控件的名字叫hiddenControlId。。所以你可以这么取。另外，这里写的有点问题，修改后如下function createHiddenControl(controlId) {
        var hiddenInput = createElement("input", {
            type: "hidden",
            id: controlId,
            name: controlId
        });
        container.appendChild(hiddenInput);
    }

修改完毕，增加两个按钮，reviseLast，reviseAll
/**
*
*/
(function() {

var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
var isIE9 = /msie 9/i.test(navigator.userAgent);

var opacity = function() {

if (isIE) {
return function(target, rate) {
target.style.filter = "alpha(opacity=" + (rate * 100) + ")";
};
} else {
return function(target, rate) {
target.style.opacity = rate;
};
}
}();

var addEventListener = function() {
if (window.addEventListener) {
return function(control, eventName, fn) {
control.addEventListener(eventName, fn, false);
};
} else if (window.attachEvent) {
return function(control, eventName, fn) {
control.attachEvent('on' + eventName, function(e) {fn.call(control, e);});
};
} else {
return function(control, eventName, fn) {
control['on' + eventName] = fn;
};
}
}();

function createElement(tagName, props, styles) {

props = props || {};

styles = styles || {};

var tag = document.createElement(tagName);

for (var propName in props) {
tag[propName] = props[propName];
}

for (var styleName in styles) {
tag.style[styleName] = styles[styleName];
}

return tag;
}

var Class = (function() {

        /**
         * Initialze object from class.
         * @param class object.
         */
        var initializeClass = (function() {
            if (Object.create) {
                return Object.create;
            } else {
                return function(o) {
                    function F() {}
                    F.prototype = o;
                    return new F();
                };
            }
        })();

        /**
         * The main function of Class.
         *
         * @param classContent
         * @param superClass
         */
        return function() {

            var classPrototype = arguments[arguments.length - 1] || {};

            for (var index = 0; index < arguments.length - 1; index++) {

                var superClass = arguments[index];

                if (typeof superClass["initialize"] == "function") {
                    classPrototype.superclass = superClass["initialize"];
                } else {
                    classPrototype.superclass = function() {};
                }

                for (var prop in superClass) {

                    if (prop == "initialize" || prop == "newInstance") {
                        continue;
                    }

                    if (classPrototype.hasOwnProperty(prop)) {
                        if (typeof superClass[prop] == "function") {
                            classPrototype.superclass[prop] = superClass[prop];
                        }
                    } else {
                        classPrototype[prop] = superClass[prop];
                    }
                }
            }
            classPrototype.newInstance = function() {
                var instance = initializeClass(this);
                if (instance["initialize"]) {
                    instance["initialize"].apply(instance, arguments);
                }
                return instance;
            };
            return classPrototype;
        };
    })();

function mousePosition(e) {
    var event = e || window.event;

    if (event.pageX || event.pageY) {
        return {x:event.pageX, y:event.pageY};
    }     return {
        x:event.clientX + document.body.scrollLeft - document.body.clientLeft,
        y:event.clientY + document.body.scrollTop - document.body.clientTop
    };
}
function getPosition(target) {
    var left = 0, top = 0;     do {
        left += target.offsetLeft || 0;
        top += target.offsetTop || 0;
        target = target.offsetParent;
    } while(target);
    return {
        left: left,
        top: top
    };
}

var GraphHelper = Class({
container: null,
width: null,
height: null,
ctx: null,

initialize: function(container, width, height) {
this.container = container;
this.container.style.width = width;
this.container.style.height = height;
this.width = parseInt(width);
this.height = parseInt(height);
},
getCtx: function() {
if (!this.ctx) {
var cvs = document.createElement('canvas');

cvs.id = "canvas_" + new Date().getTime();
cvs.width = this.width;
cvs.height = this.height;
//cvs.style.borderStyle = "solid";
//cvs.style.borderWidth = "1px";
cvs.style.position = 'absolute';

this.container.appendChild(cvs);
if (isIE && !isIE9) {
G_vmlCanvasManager.initElement(cvs);
cvs = document.getElementById(cvs.id);
}
this.canvas = cvs;
this.ctx = cvs.getContext('2d');
}
return this.ctx;
},
addEventListener: function(event, fn) {
this.getCtx();
addEventListener(this.canvas, event, fn);
},
setStyle: function(props) {
for (var prop in props) {
this.canvas.style[prop] = props[prop];
}
},
clear: function() {
var ctx = this.getCtx();
ctx.clearRect(0, 0, this.width, this.height);
},
drawCircle: function(x, y, radius, strokeColor) {
var ctx = this.getCtx();
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI * 2, false);
ctx.strokeStyle = strokeColor;
ctx.stroke();
}
});

function createImage(container, imageUrl, imageWidth, imageHeight) {
var image = createElement("img", {src: imageUrl}, {
height: imageHeight,
width: imageWidth,
position: "absolute",
zIndex: 1
});
container.appendChild(image);
}

function createMask(container, imageWidth, imageHeight) {

var canvasPos = getPosition(container);

var canvasContainer = createElement("div", null, {
top: canvasPos.top + "px",
left: canvasPos.left + "px",
width: imageWidth,
height: imageHeight,
position: "absolute",
zIndex: 30,
borderStyle: "solid",
borderWidth: "1px",
backgroundColor: "#ffffff"
});
document.body.appendChild(canvasContainer);
opacity(canvasContainer, 0);

graphHelper = GraphHelper.newInstance(container, imageWidth, imageHeight);
graphHelper.getCtx();
var startX = 0;
var startY = 0;
var radius = 0;
var drawStart = false;
graphHelper.setStyle({
position: "absolute",
zIndex: 4
});
addEventListener(canvasContainer, 'mousedown', function(event) {
graphHelper.clear();
radius = 0;
initMark(graphHelper);
var mousePos = mousePosition(event);
startX = mousePos.x - canvasPos.left;
startY = mousePos.y - canvasPos.top;
drawStart = true;
if (isIE) {
canvasContainer.setCapture(true);
event.returnValue = false;
} else {
window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
event.preventDefault();
}
});

addEventListener(document, 'mousemove', function(event) {
if (drawStart == false) {
return;
}
graphHelper.clear();
initMark(graphHelper);
var mousePos = mousePosition(event);
var moveX = mousePos.x - canvasPos.left;
var moveY = mousePos.y - canvasPos.top;
radius = Math.sqrt(Math.pow(moveX - startX, 2) + Math.pow(moveY - startY, 2));

graphHelper.drawCircle(startX, startY, radius, "#110000");
if (isIE) {
event.returnValue = false;
} else {
event.preventDefault();
}
});
addEventListener(document, 'mouseup', function(event) {
if (drawStart == false) {
return;
}
drawStart = false;
if (radius != 0) {
setValueToControl({x: startX, y: startY, radius: radius});
}

if (isIE) {
canvasContainer.releaseCapture();
event.returnValue = false;
} else {
window.releaseEvents(Event.MOUSEMOVE | Event.MOUSEUP);
event.preventDefault();
}
});
}

function initMark(graphHelper) {
for (var index = 0; index < List.length; index++) {
graphHelper.drawCircle(List[index].x, List[index].y, List[index].radius);
}
}

function setValueToControl(Info) {
List.push(Info);
}

function createHiddenControl(controlId) {
var hiddenInput = createElement("input", {
type: "hidden",
id: controlId,
name: controlId
});
container.appendChild(hiddenInput);
}

var List = [];
var graphHelper = null;
ImageAccused = function(containerId, imageUrl, hiddenControlId, imageWidth, imageHeight) {
var container = document.getElementById(containerId);
container.style.width = imageWidth;
container.style.height = imageHeight;
container.style.position = "relative";

createImage(container, imageUrl, imageWidth, imageHeight);

createMask(container, imageWidth, imageHeight);

createHiddenControl(hiddenControlId);
}
ImageAccused.prototype.reviseLast = function() {

List.splice(List.length - 1, 1);
graphHelper.clear();
initMark(graphHelper);
};
ImageAccused.prototype.reviseAll = function() {
List = [];
graphHelper.clear();
initMark(graphHelper);
};
})();

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-31j">
<title>Insert title here</title>

<script type="text/javascript" src="imageAccused.js"></script>
<script type="text/javascript">var imageAccused = null;window.onload = function() {
// param容器id
// 图片路径
// 提交用的隐藏控件名
// 图片宽度
// 图片高度
imageAccused = new ImageAccused("container", "a.jpg", "location", "300px", "400px");
};</script>
</head>
<body>
    <input type="button" value="reviseLast" onclick="imageAccused.reviseLast();">
    <input type="button" value="reviseAll" onclick="imageAccused.reviseAll();">
    <br />
    <div style="position:relative;" id="container">

    </div>
</body>
</html>

另外，后台的问题，我建议你直接吧List内容保存进hiddenControlId里面，写成json的形式保存进数据库。但是后台不用解析，只保存就行。然后在画面初始化的时候，调用JSon.parse，取得Json数组，然后替换List，再次调用initMark就可以显示你在数据库保存的圆了

把List保存在hiddenControlId里？
但是我看初始化ImageAccused的时候，这个值传了一个字符串的localtion？

通过document.getElementsByName("location").value来获取这个list？

后台
request.getParameter("location");
前台只需要改
setValueToControl将hiddenControlId这个变量直接拿来用呗。。

百度json序列化与反序列化。你就在setValueToControl里序列化，传到后台，保存。到前台反序列化

container.appendChild(hiddenInput);
执行到这里的时候会报 container未定义。
setValueToControl里我怎么用hiddenControlId获取List的值？

createHiddenControl(hiddenControlId);-》
createHiddenControl(container, hiddenControlId);

1.网上查下json2.js，并导入到你的html
2.然后
  function setValueToControl(Info) {
        List.push(Info);
    }改成
function setValueToControl(Info) {
        List.push(Info);
        var transportObj = {};
        transportObj.data = List;
        hiddenInput.value = JSON.stringify(transportObj);
    }3.把var List = [];改成
var List = [], hiddenInput = null;4.把下面代码中的var去掉
    function createHiddenControl(controlId) {
        var hiddenInput = createElement("input", {
            type: "hidden",
            id: controlId,
            name: controlId
        });
        container.appendChild(hiddenInput);
    }

ImageAccused = function(containerId, imageUrl, hiddenControlId, imageWidth, imageHeight, initData) {
        var container = document.getElementById(containerId);
        container.style.width = imageWidth;
        container.style.height = imageHeight;
        container.style.position = "relative";

        createImage(container, imageUrl, imageWidth, imageHeight);

        createMask(container, imageWidth, imageHeight);

        createHiddenControl(hiddenControlId);

        if (initData) {
            var transportObj = JSON.parse(initData);
            List = transportObj.data;
            initMark(graphHelper);
        }
    }initData传入从后台取过来的db中的json字符串就行

把上面的都加上会报这样的错：JSON.parse: expected property name or '}'
[在此错误处中断] var transportObj = JSON.parse(initData);
而且reviseLast和reviseAll也不能用了？
我给initDate传了个模拟数据“"{'date':[{'x':100,'y':100,'radius':30},{'x':120,'y':120,'radius':40}]}"”也读不出来？

json的标准写法是加双引号，而不是单引号

如果你实在觉得麻烦，有一招
var transportObj = eval('(' + initData + ')');
不过是否是全浏览器兼容的就不知道了

function createHiddenControl(container, controlId) {
        hiddenInput = createElement("input", {
            type: "hidden",
name: controlId,
            id: controlId,
value: ""
        });
        container.appendChild(hiddenInput);
    }
在IE里这个input没有name属性是怎么回事？

还有个问题：
怎么改变圆的颜色为红色？graphHelper.drawCircle(startX, startY, radius, "#110000");修改这个里面的颜色，当画下一个圆的时候，上一个会变会黑色。

initMark中的调用没传入颜色。

调试易

在jsp页面画圆

解决方案 »