一个程序明白Javascript绘图

来源：互联网发布：国二c语言题库编辑：程序博客网时间：2024/06/06 19:23

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

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