Excanvas 在 IE8 中不工作

发布于 2024-11-16 02:07:33 字数 3659 浏览 3 评论 0原文

Excanvas 在 IE8 中不工作!我编写了用鼠标在画布元素上绘画的程序。 有我的 js 代码片段

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.
            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 = "";

                }
            };
        }

当有 context.lineTo(ev._x, ev._y); 时, context.lines(); - 什么也没有发生!尽管传递了坐标并绘制并初始化了画布

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.
            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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文