开发者

Excanvas does not work in IE8

Excanvas does not work in IE8!!! I write program to paint by mouse on canvas element. There are fragment of my js-code

window.attachEvent('onload', function () {

        function init() {
            var w = document.getElementById('signatureImage').getAttribute('width');
            var h = document.getElementById('signatureImage').getAttribute('height');
            var removeSignatureImage = document.getElementById('signatureImage');
            removeSignatureImage.parentNode.removeChild(removeSignatureImage);
            var canvasDiv = document.getElementById('canvasDiv');
            canvas = document.createElement('canvas');
            canvas.setAttribute('width', w);
            canvas.setAttribute('height', h);
            canvas.setAttribute('style', 'border:1px solid #000000');
            canvas.setAttribute('id', 'signatureImage');
            canvasDiv.appendChild(canvas);

            if (typeof G_vmlCanvasManager != 'undefined') {
                canvas = window.G_vmlCanvasManager.initElement(canvas);
            }
            context = canvas.getContext("2d");
            tool = new tool_pencil();
            // Attach the mousedown, mousemove and mouseup event listeners.
      开发者_JS百科      var trackend = false;
            var trackstart = false;
            var trackmid = false;

            canvas.onselectstart = function () {
                canvas.onmousemove(); trackstart = true; 
            return false; }
            canvas.onclick = function () { trackend = true; }
            canvas.onmousemove = function () {
                var mtarget = document.getElementById('signatureImage');
                var x = event.clientX - canvas.offsetLeft;
                var y = event.clientY - canvas.offsetTop;
                var mtype = 'mousemove';

                if (trackstart) {
                    trackstart = false;
                    trackmid = true;
                    mtype = 'mousedown';
                }

                if (trackend) {
                    trackmid = false;
                    mtype = 'mouseup';
                }

                if (trackend || trackmid || trackstart) {
                    trackend = false;
                    ev_canvas({
                        type: mtype,
                        _x: x,
                        _y: y,
                        target: mtarget
                    });
                }
            }
        }

        function tool_pencil() {
            var tool = this;
            this.started = false;

            function getCoord(ev) {
                var x = ev._x;
                var y = ev._y;

                if (tool.started == true) {
                    coords += x + "," + y + " ";
                }

                return [x, y];
            }
            this.mousedown = function (ev) {
                context.beginPath();
                context.moveTo(ev._x, ev._y);
                tool.started = true;

            };

            this.mousemove = function (ev) {
                if (tool.started) {
                    context.lineTo(ev._x, ev._y);
                    context.stroke();
                    var coord = getCoord(ev);
                }
            };

            this.mouseup = function (ev) {

                if (tool.started) {
                    tool.mousemove(ev);
                    tool.started = false;
                    coordList += coords + ";";
                    document.getElementById('coord').value = coordList;
                    coords = "";

                }
            };
        }

When there is context.lineTo(ev._x, ev._y); context.stroke(); - nothing happens! Although the coordinates are passed and canvas painted and initialized

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜