javascript 之一个简单的画图demo

最新推荐文章于 2022-11-02 18:40:11 发布

瞎胡扯

最新推荐文章于 2022-11-02 18:40:11 发布

阅读量1.9k

点赞数

分类专栏： Web前端文章标签： javascript function html5 浏览器 chrome border

Web前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

这是一个用javascript 在canvas 上实现的简单的画图应用，用支持html5 的浏览器可以看到如下效果：

功能很简单，原理其实和拖放是类似的，主要是三个事件：

1. 在canvas 上绑定mousedown 事件以标志绘画的开始（调用moveTo 移动画笔）

2. 在document 上绑定mousemove 事件来处理绘画时的行为（调用lineTo 以及stroke 进行绘画）

3. 在document 上绑定mouseup 事件以标志绘画的结束（解绑document 上的两个事件）

实现时需特别注意的一点是调用moveTo 以及lineTo 方法时如何传递正确的坐标值，这个坐标值应该是光标相对于canvas 左上角的偏移量，获取时需要把canvas 相对于当前视口的位置考虑进去，getBoundingClientRect 方法则正好派上了用场（支持HTML5 的浏览器应该都实现了这个方法），最后用event 对象的clientX, clientY 减去getBoundingClientRect 方法返回的left, top 值即可。

就这样一个简单的鼠绘功能就完成了，不足之处也有，比如不能够画点。。。我个人觉得用canvas 来做画图还是比较弱的，复杂一些的功能就不太好实现了，不过大家也可以尝试下哦，比如要添加个保存图片的方法，定义Draw.prototype.save = function() {...}，其中可调用toDataURL 方法实现。

这里有个不错的HTML5 canvas 教程可供初学者学习~

最后附上源码：

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

原文链接： http://www.cnblogs.com/eric6/archive/2011/07/26/2116893.html

瞎胡扯

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
javascript 之一个简单的画图demo

这是一个用javascript 在canvas 上实现的简单的画图应用，用支持html5 的浏览器可以看到如下效果：功能很简单，原理其实和拖放是类似的，主要是三个事件：1. 在canvas 上绑定mousedown 事件以标志绘画的开始（调用moveTo 移动画笔）2. 在doc
复制链接

扫一扫