一个程序明白Javascript绘图

最新推荐文章于 2024-09-17 14:53:18 发布

alaclp

最新推荐文章于 2024-09-17 14:53:18 发布

阅读量774

点赞数

分类专栏：图像处理

图像处理专栏收录该内容

183 篇文章 6 订阅

订阅专栏

问题：一个页面中，不同方法间如何传递信息？此程序回答了这个问题

	<!DOCTYPE html>
	<html>
	<head>
	<title>html5 绘图板 demo -- http://jslover.com</title>
	</head>
	<body>
	<canvas width="500" height="200" style="border:1px solid red"></canvas>

	<div>
	<input type="button" id="btn" value="清空" onclick="draw.clear()"/>
	<input type="button" id="Button1" value="重绘" onclick="draw.reDraw()"/>
	<input type="button" id="Button2" value="生成图片" onclick="draw.toPng()"/>

	</div>
	<script>
	//绘图板
	function Drawbox(canvas) {
	this.canvas = canvas;
	this.context = this.canvas.getContext('2d');
	//线条宽度
	this.context.lineWidth = 2;
	//线条颜色
	this.context.strokeStyle = '#555';
	//线条圆角
	this.context.lineCap = "round";
	//状态
	this.drawing = false;
	//历史记录
	this.his = [];
	this.timeout_draw = 0;

	}
	Drawbox.prototype = {
	mousedown: function (e) {
	this.drawing = true;
	this.his.push({
	x: e.layerX
	, y: e.layerY

	});
	}
	, mouseup: function (e) {
	this.drawing = false;
	this.his.push({
	x: e.layerX
	, y: e.layerY
	//是否中止，鼠标放开时，记录状态，防止“连笔”
	, end: 1
	});
	}
	, mousemove: function (e) {
	var _this = this;
	if (_this.drawing) {
	//将坐标不断存入历史记录
	_this.his.push({
	x: e.layerX
	, y: e.layerY
	});
	_this.context.beginPath();
	var l = _this.his.length;
	if (!_this.his[l - 1].end) {
	_this.context.moveTo(_this.his[l - 2].x, _this.his[l - 2].y);
	_this.context.lineTo(_this.his[l - 1].x, _this.his[l - 1].y);
	_this.context.stroke();
	}
	}
	}
	, init: function () {
	var _this = this;
	_this.canvas.addEventListener('mousemove', function (e) { _this.mousemove(e) }, false);
	_this.canvas.addEventListener('mousedown', function (e) { _this.mousedown(e) }, false);
	_this.canvas.addEventListener('mouseup', function (e) { _this.mouseup(e) }, false);
	}
	//清空
	, clear: function (noClearHis) {
	var _this = this;
	clearTimeout(_this.timeout_draw);
	//清空
	_this.context.clearRect(0, 0, 3000, 3000);
	if (!noClearHis) {
	//清除历史记录
	_this.his.length = 0;
	}
	}
	//重绘
	, reDraw: function () {
	var _this = this;
	_this.clear(true);
	var i = 0;
	var length = _this.his.length;
	clearTimeout(_this.timeout_draw);
	if (length < 2) { return; }
	function draw() {
	if (!_this.his[i].end) {
	_this.context.moveTo(_this.his[i].x, _this.his[i].y);
	_this.context.lineTo(_this.his[i + 1].x, _this.his[i + 1].y);
	_this.context.stroke();
	}
	_this.timeout_draw = setTimeout(function () {
	if (i < length - 1) {
	draw();
	}
	}, 10);
	++i;
	}
	draw();
	}
	//导出PNG图片
	, toPng: function () {
	var url = this.canvas.toDataURL();
	if (document.getElementById("temp_img")) {
	document.getElementById("temp_img").src = url;
	} else {
	var img = document.createElement('img');
	img.id = "temp_img";
	img.src = url;
	document.body.appendChild(img);
	}
	}
	};

	var draw = new Drawbox(document.getElementsByTagName('canvas')[0]);
	draw.init();

	</script>
	<div>
	<br/>
	原文地址:<a href="http://jslover.com/?p=360" title="一个简易的HTML5绘图板，带重绘功能">http://jslover.com/?p=360</a>
	</div>
	</body>