canvas-drawline4.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>draw demo</title>
</head>
<body>
 
<canvas id="the_stage" width="600" height="400" style="border:1px solid #999;">您的浏览器不支持canvas!</canvas>
 
<script>
function Draw(arg) {
    if (arg.nodeType) {
        this.canvas = arg;
    } else if (typeof arg == 'string') {
        this.canvas = document.getElementById(arg);
    } else {
        return;
    }
    this.init();
}
Draw.prototype = {
    init: function() {
        var that = this;
        if (!this.canvas.getContext) {
            return;
        }
        this.context = this.canvas.getContext('2d');
        this.canvas.onselectstart = function () {
            return false;  //修复chrome下光标样式的问题
        };
        this.canvas.onmousedown = function(event) {
            that.drawBegin(event);
        };
    },
    drawBegin: function(e) {
        var that = this,
            stage_info = this.canvas.getBoundingClientRect();
        window.getSelection ? window.getSelection().removeAllRanges() :
                                document.selection.empty();  //清除文本的选中
        this.context.moveTo(
            e.clientX - stage_info.left,
            e.clientY - stage_info.top
        );
        document.onmousemove = function(event) {
            that.drawing(event);
        };
        document.onmouseup = this.drawEnd;
    },
    drawing: function(e) {
        var stage_info = this.canvas.getBoundingClientRect();
        this.context.lineTo(
            e.clientX - stage_info.left,
            e.clientY - stage_info.top
        );
        this.context.stroke();
    },
    drawEnd: function() {
        document.onmousemove = document.onmouseup = null;
    }
};
var draw = new Draw('the_stage');
</script>
</body>
</html>