一个程序明白Javascript绘图
2012-12-26 01:30
295 查看
问题:一个页面中,不同方法间如何传递信息?此程序回答了这个问题
<!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> |
相关文章推荐
- 有趣的Javascript:只需一个JS让万恶的IE5、IE6、IE7、IE8全都支持H5原生Canvas绘图(有演示demo)
- 发一个昨天晚上新鲜出炉的Javascript(js)分页程序,带详解,业余水平。。。。 不用任何jquery 之类的库
- 一个很酷的程序JavaScript做的MID歌曲搜索播放器[IE](JS)
- 一个简单的web点名程序(基于javascript)
- 使用事件处理创建一个简单的绘图实例程序 python
- javascript 实现一个网页,然后计算出有多少剩余时间的倒计时程序
- MFC 一个简单的绘图程序
- 一个JavaScript的倒计时程序
- Html5 Canvas+Javascript实现一个简单画图程序(二)
- Html5 Canvas+Javascript实现一个简单画图程序(三)
- 用javascript写一个图片剪切程序的困扰!
- 一个简单有用的JavaScript CRACK程序的解决技术关键点
- jqPlot,一个 jQuery这个 JavaScript 框架的绘图插件
- 使用javascript写一个小的程序,通过年月来显示当月中的星期
- 用javascript语言编写一个小程序:在一个文本框(用户名框)中按回车键时,跳转到另一个文本框(密码框)中,密码框回车之后,打一个登陆成功。点击button也是登陆成功。
- vb中一个绘图的小程序
- 一个不错的javascript矢量绘图脚本
- 使用JavaScript完成一个对字符串数组进行排序的小程序
- 通过一个模拟程序让你明白WCF大致的执行流程
- [JavaScript]一个非常标准的发送XMLHTTP请求的Javascript程序[转载]