canvas实现画图板（原型）

最新推荐文章于 2024-05-10 10:10:22 发布
最新推荐文章于 2024-05-10 10:10:22 发布
阅读量694 收藏
点赞数 5
分类专栏： HTML5 文章标签： canvas js prototype
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangzhneg123/article/details/87904911
版权

效果实现：

源码展示：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>canvas实现画板</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
body,html {
	font-size:100%;
	padding:0;
	margin:0;
}
/* Reset */
*,*:after,*:before {
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
}
.clearfix:before,.clearfix:after {
	content:" ";
	display:table;
}
.clearfix:after {
	clear:both;
}
body {
	background:#494A5F;
	color:#D5D6E2;
	font-weight:500;
	font-size:1.05em;
	font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;
}
a {
	color:#2fa0ec;
	text-decoration:none;
	outline:none;
}
a:hover,a:focus {
	color:#74777b;
}
/*nav*/
button {
	display:inline-block;
	margin:0.5em;
	padding:0.6em 1em;
	border:3px solid #fff;
	font-weight:700;
	background:#1d7db1;
	color:#fff;
}
.center {
	text-align:center;
}
h5 {
	width:100%;
	padding:0;
	margin:0;
	font-size:24px;
	text-align:center;
	height:40px;
	line-height:40px;
}
.sketchpad {
	background:#FFF;
	width:320px;
	height:500px;
	border-radius:2px;
	-webkit-box-shadow:2px 2px 5px 0px rgba(50,50,50,0.75);
	-moz-box-shadow:2px 2px 5px 0px rgba(50,50,50,0.75);
	box-shadow:2px 2px 5px 0px rgba(50,50,50,0.75);
}
.color-line {
	text-align:center;
	height:50px;
	line-height:50px;
}
.color-line input {
	vertical-align:middle;
}
.color-line span {
	font-size:18px;
}
</style>
</head>
<body>
<div id="main_content_wrap" class="outer">
    <section id="main_content" class="inner">
        <h5>画板</h5>
        <div style="text-align: center">
            <canvas class="sketchpad" id="sketchpad"><canvas>
				</canvas></canvas></div>
				<div class="color-line">
					<span>颜色:</span>
					<input id="color-picker" type="color">
					<span>画笔大小:</span>
					<input id="size-picker" type="range" min="1" max="50">
				</div>
		</section>
	</div>
	
	
	<script type="text/javascript">
		// 创建sketchpad面向对象
		var sketchpad;
		$(document).ready(function () {
			sketchpad = new Sketchpad({
				element: '#sketchpad',
				width: 320,
				height: 500,
			});
			$('#color-picker').change(color);//颜色
			$('#color-picker').val('#000');//颜色默认黑色
			$('#size-picker').change(size);//大小
			$('#size-picker').val(1);//大小默认1
		});
		// 颜色
		function color(event) {
			sketchpad.color = $(event.target).val();
		}
		// 大小
		function size(event) {
			sketchpad.penSize = $(event.target).val();
		}
	</script>

<script>
// zhangyibo
// sketchpad.redraw(sketchpad.strokes); // 监听数组变化绘图方法
// this.reset();绘图方法
function Sketchpad(config) {
    for (var key in this.constructor.prototype) {
        this[key] = this[key].bind(this);
    }

    if (!config.hasOwnProperty('element')) {
        console.error('SKETCHPAD ERROR: No element selected');
        return;
    }

    if (typeof(config.element) === 'string') {
        this.element = $(config.element);
    } else {
        this.element = config.element;
    }

    // 宽度
    this._width = config.width || this.element.attr('data-width') || 0;
    // 高度
    this._height = config.height || this.element.attr('data-height') || 0;
    // 颜色
    this.color = config.color || this.element.attr('data-color') || '#000000';
    // 大小
    this.penSize = config.penSize || this.element.attr('data-penSize') || 5;
    // 数组坐标点
    this.strokes = config.strokes || [];
    this._currentStroke = {
        color: null,
        size: null,
        lines: [],
    };


    this.undoHistory = config.undoHistory || [];

    this._sketching = false;
    // 画图
    this.reset();
    this.change();
}

//
// Private API
//
// 监听数组变化
Sketchpad.prototype.change = function(event) {
    Array.prototype._push = Array.prototype.push;
    Array.prototype.push = function(v) {
        this._push(v);
        if (typeof this.pushListener == 'function') this.pushListener.call(this, v)
    }
    // this.strokes= [];
    console.log(this.strokes)
    this.strokes.pushListener = function(v) {
        console.log('数组发生变化');
        console.log(sketchpad.strokes)
        sketchpad.redraw(sketchpad.strokes); // 监听数组变化绘图
    }
};
// 位置
Sketchpad.prototype._cursorPosition = function(event) {
    return {
        x: event.pageX - $(this.canvas).offset().left,
        y: event.pageY - $(this.canvas).offset().top,
    };
};

Sketchpad.prototype._draw = function(start, end, color, size) {
    this._stroke(start, end, color, size, 'source-over');
};

Sketchpad.prototype._erase = function(start, end, color, size) {
    this._stroke(start, end, color, size, 'destination-out');
};

Sketchpad.prototype._stroke = function(start, end, color, size, compositeOperation) {
    this.context.save();
    this.context.lineJoin = 'round';
    this.context.lineCap = 'round';
    this.context.strokeStyle = color;
    this.context.lineWidth = size;
    this.context.globalCompositeOperation = compositeOperation;
    this.context.beginPath();
    this.context.moveTo(start.x, start.y);
    this.context.lineTo(end.x, end.y);
    this.context.closePath();
    this.context.stroke();

    this.context.restore();
};

//
// Callback Handlers
//

Sketchpad.prototype._mouseDown = function(event) {
    this._lastPosition = this._cursorPosition(event);
    this._currentStroke.color = this.color;
    this._currentStroke.size = this.penSize;
    this._currentStroke.lines = [];
    this._sketching = true;
    this.canvas.addEventListener('mousemove', this._mouseMove);
};

Sketchpad.prototype._mouseUp = function(event) {
    if (this._sketching) {
        this.strokes.push($.extend(true, {}, this._currentStroke));
        this._sketching = false;
    }
    this.canvas.removeEventListener('mousemove', this._mouseMove);
};

Sketchpad.prototype._mouseMove = function(event) {
    var currentPosition = this._cursorPosition(event);

    this._draw(this._lastPosition, currentPosition, this.color, this.penSize);
    this._currentStroke.lines.push({
        start: $.extend(true, {}, this._lastPosition),
        end: $.extend(true, {}, currentPosition),
    });

    this._lastPosition = currentPosition;
};

Sketchpad.prototype._touchStart = function(event) {
    event.preventDefault();
    if (this._sketching) {
        return;
    }
    this._lastPosition = this._cursorPosition(event.changedTouches[0]);
    this._currentStroke.color = this.color;
    this._currentStroke.size = this.penSize;
    this._currentStroke.lines = [];
    this._sketching = true;
    this.canvas.addEventListener('touchmove', this._touchMove, false);
};

Sketchpad.prototype._touchEnd = function(event) {
    event.preventDefault();
    if (this._sketching) {
        this.strokes.push($.extend(true, {}, this._currentStroke));
        this._sketching = false;
    }
    this.canvas.removeEventListener('touchmove', this._touchMove);
};

Sketchpad.prototype._touchCancel = function(event) {
    event.preventDefault();
    if (this._sketching) {
        this.strokes.push($.extend(true, {}, this._currentStroke));
        this._sketching = false;
    }
    this.canvas.removeEventListener('touchmove', this._touchMove);
};

Sketchpad.prototype._touchLeave = function(event) {
    event.preventDefault();
    if (this._sketching) {
        this.strokes.push($.extend(true, {}, this._currentStroke));
        this._sketching = false;
    }
    this.canvas.removeEventListener('touchmove', this._touchMove);
};

Sketchpad.prototype._touchMove = function(event) {
    event.preventDefault();
    var currentPosition = this._cursorPosition(event.changedTouches[0]);

    this._draw(this._lastPosition, currentPosition, this.color, this.penSize);
    this._currentStroke.lines.push({
        start: $.extend(true, {}, this._lastPosition),
        end: $.extend(true, {}, currentPosition),
    });

    this._lastPosition = currentPosition;
};

//
// Public API
//

Sketchpad.prototype.reset = function() {
    // Set attributes
    this.canvas = this.element[0];
    this.canvas.width = this._width;
    this.canvas.height = this._height;
    this.context = this.canvas.getContext('2d');

    // Setup event listeners
    this.redraw(this.strokes);

    if (this.readOnly) {
        return;
    }

    // Mouse
    this.canvas.addEventListener('mousedown', this._mouseDown);
    this.canvas.addEventListener('mouseout', this._mouseUp);
    this.canvas.addEventListener('mouseup', this._mouseUp);

    // Touch
    this.canvas.addEventListener('touchstart', this._touchStart);
    this.canvas.addEventListener('touchend', this._touchEnd);
    this.canvas.addEventListener('touchcancel', this._touchCancel);
    this.canvas.addEventListener('touchleave', this._touchLeave);
};

Sketchpad.prototype.drawStroke = function(stroke) {
    for (var j = 0; j < stroke.lines.length; j++) {
        var line = stroke.lines[j];
        this._draw(line.start, line.end, stroke.color, stroke.size);
    }
};

Sketchpad.prototype.redraw = function(strokes) {
    for (var i = 0; i < strokes.length; i++) {
        this.drawStroke(strokes[i]);
    }
};

Sketchpad.prototype.toObject = function() {
    return {
        width: this.canvas.width,
        height: this.canvas.height,
        strokes: this.strokes,
        undoHistory: this.undoHistory,
    };
};

Sketchpad.prototype.toJSON = function() {
    return JSON.stringify(this.toObject());
};

Sketchpad.prototype.animate = function(ms, loop, loopDelay) {
    this.clear();
    var delay = ms;
    var callback = null;
    for (var i = 0; i < this.strokes.length; i++) {
        var stroke = this.strokes[i];
        for (var j = 0; j < stroke.lines.length; j++) {
            var line = stroke.lines[j];
            callback = this._draw.bind(this, line.start, line.end,
                stroke.color, stroke.size);
            this.animateIds.push(setTimeout(callback, delay));
            delay += ms;
        }
    }
    if (loop) {
        loopDelay = loopDelay || 0;
        callback = this.animate.bind(this, ms, loop, loopDelay);
        this.animateIds.push(setTimeout(callback, delay + loopDelay));
    }
};

Sketchpad.prototype.cancelAnimation = function() {
    for (var i = 0; i < this.animateIds.length; i++) {
        clearTimeout(this.animateIds[i]);
    }
};

Sketchpad.prototype.clear = function() {
    this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
};

Sketchpad.prototype.undo = function() {
    this.clear();
    var stroke = this.strokes.pop();
    if (stroke) {
        this.undoHistory.push(stroke);
        this.redraw(this.strokes);
    }
};

Sketchpad.prototype.redo = function() {
    var stroke = this.undoHistory.pop();
    if (stroke) {
        this.strokes.push(stroke);
        this.drawStroke(stroke);
    }
};
</script>

</body>
</html>

 

Mr.王征
关注
  • 5
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Canvas写一个画板
weixin_56674431的博客
04-04 601
html5的canvas做一个简易的画板
Canvas绘制原型与线型
weixin_43786904的博客
02-10 238
1.圆形绘制 画家.arc(圆心x,圆心y,圆弧半径r,开始弧度,结束弧度,false); 画家.arc(圆心x,圆心y,圆弧半径,结束弧度,开始弧度,true); 说明： 弧度不是角度。(0~2)*Math.PI ps:false先开始后结束，如果是true是先结束后开始 pss：都是顺时针画弧 2.线形 (1)设置线宽：画家.lineWidth = 具体数值; (2)设置端点：画家.lineC...
Canvas绘制图片和区域（前端使用Canvas绘制图片，并在图片上绘制区域）
最新发布
weixin_65793170的博客
05-10 2390
1. 初始化Canvas画布// 获取canvas容器元素并设置宽高// 获取canvas元素并获取2D绘图上下文// 2. 初始化图片Canvas// 计算画布和图片的宽高比} else {// 设置三个canvas的宽高// 加载图片并绘制到imgCanvas上console.log("图片已加载");// 渲染已有数据// 3. 开始绘制。
canvas学习（四）:简单画板
weixin_43909743的博客
08-30 1518
前言 canvas实现画板功能，有画笔、矩形、圆形、线段粗细、画笔颜色等功能 是对canvas的综合学习回顾 步骤 基本样式 <style type="text/css"> *{ margin: 0; padding: 0; box-sizing: border-box; } body{ width: 100vw; height: 100vh; display: flex; flex
canvas实现简单画板
harmsworth的博客
07-04 6021
前言 canvas 可以实现鼠标或者手指作画。具体用到了 mouse 事件和 touch 事件。下面就实现了一个简单的画板，实际效果如下： 解析 在页面中，有文字、按钮，有包裹进度条的块。 有如下需求： 线条能在按钮上显示，并且按钮能点击 进度条所在 div 块上能作画，并且进度条块能点击 目前已经实现了第一个需求，您可以点击这里：简单画板-进度条不能画线 代码 <!DOCTYPE html> <html lang="en"> <head> <meta c
实现一个canvas画板
阿嚏乱码的地方
03-11 6894
&lt;canvas&gt;是HTML5新增的元素，可用于通过使用JavaScript中的脚本来绘制图形。例如，它可以用于绘制图形，制作照片，创建动画，甚至可以进行实时视频处理或渲染。 ——摘自MDN canvas MDN canvas有许多的API，可以插入图片，可以编写文字，可以处理视频。按照MDN给出的canvasPAI，可以将canvas学的很好，但是前端学习的精髓是用到什么...
基于HTMLCanvas的画图板设计和实现.doc
11-23
本文详细介绍了实现过程中的关键技术和思路，并讨论了Canvas元素在画图板设计和实现中的应用和优点。 CSS3技术应用： 在画图板的设计和实现过程中，本文还讨论了CSS3技术的应用，包括选择器、样式和动画等功能。CSS...
canvas 画图板.zip
08-04
下面我们将深入探讨 Canvas API 以及如何使用这些资源来实现一个画图板。 首先，`index.html` 是网页的主文件，它定义了页面的基本结构。在这个项目中，`index.html` 应该包含一个 `<canvas>` 元素，它是整个画图板...
基于HTML5 Canvas的画图板设计与实现
04-26
本文详细分析了HTML5技术的简介和发展前景，并深入探讨了HTML5引入的核心标签Canvas元素，介绍了Canvas可以实现的主要功能，在此基础上实现了部分类似Windows画图板的功能，包括铅笔、图章仿制、画直线、圆、矩形、...
js canvas实现画图、滤镜效果
10-17
主要为大家详细介绍了js canvas实现画图、滤镜效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
html5 canvas实现绘图板
05-12
html5 canvas绘图板，实现了如下功能： 1、调色（只有固定的几种颜色）、 2、改变笔触粗细、 3、撤销、 4、保存图片到本地、 5、改变画布颜色
基于HTML5 Canvas和jQuery 的画图工具的实现
08-13
基于HTML5 Canvas和jQuery 的画图工具的实现 参考博文： http://blog.csdn.net/luanlouis/article/details/38490589
基于HTML5_Canvas的画图板设计与实现
05-18
本文详细分析了HTML5技术的简介和发展前景，并深入探讨了HTML5引入的核心标签Canvas元素，介绍了Canvas可以实现的主要功能，在此基础上实现了部分类似Windows画图板的功能，包括铅笔、图章仿制、画直线、圆、矩形、橡皮擦、背景图、取色板、插入文字等功能，在实现过程中也利用了最新的CSS3技术，最后再次总结了这次毕设的经验和对未来的展望。
js+html5实现canvas绘制简单矩形的方法
10-24
主要介绍了js+html5实现canvas绘制简单矩形的方法,涉及html5图形绘制的基本技巧,需要的朋友可以参考下
HTML5 canvas实现画板功能
SiaEyre
05-14 5395
HTML5新标签： <canvas></canvas>定义画布，需要配合js完成功能。在canvas标签内部的内容为不支持canvas时显示的内容。行内样式width与height设置画布大小。用css设置画布大小，可能会导致<canvas>元素中展示的内容变形。 <input type = "color"> 定义拾色器 <input t...
canvas fabric.js api梳理
热门推荐
晏紫苏_cc的博客
09-04 1万+
下面是canvas fabric.js的用法锁住 lockMovementX lockMovementY lockRotation lockScalingX lockScalingY选中元素时去掉连接线object.hasBorders = false;选中元素时去掉四边的框object.hasControls=false;设置选中元素时的样子object.set({ b
一个小画板（使用canvas）
qq_30221295的博客
03-03 439
主要使用了canvas标签写了一个小的画板，可以随意用鼠标画图并且可以保存图片到本地。 其中画笔的颜色和画笔的大小可以选择。 链接地址：小画板
HTML通过canvas实现简单的画图功能
CaseyWei
07-25 5206
  功能描述：  有红绿蓝三种颜色的画笔，可以选择画笔的粗细，画出的图可以保存到右边的六个画框中。当右边的六个画框都画满之后，便不能继续保存来了。可以清除画框，清除画布。保存的图片可以右击保存为png格式。 实现效果如图所示：  实现代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta cha...
canvas图像的描边与填充效果
hb707934728的博客
04-10 6903
Magnifying Glass body { background: #dddddd; } #canvas { position: absolute; left: 0px; top: 0px; margin: 20px; background

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值