画板canvas
实现一个画板:1.容器
canvas = document.getElementById('J-draw-canvas');
ctx = canvas.getContext("2d");
getContext() 方法可返回一个对象,该对象提供了用于在画布上绘图的方法和属性;
2.绘画和记录步骤
ctx.beginPath(); // beginPath() 方法开始一条路径,或重置当前的路径
ctx.strokeStyle = 'black';
ctx.lineWidth = 5;
ctx.lineJoin = "round"; // 设置两条线相交时的拐角类型,默认尖角,设置为圆角
ctx.lineCap = "round"; // lineCap 属性设置或返回线条末端线帽的样式。
ctx.moveTo(lastX, lastY); // 把路径移动到画布中的指定点,不创建线条
ctx.lineTo(x, y); // 添加一个新点,然后在画布中创建从该点到最后指定点的线条
ctx.closePath(); // 创建从当前点回到起始点的路径
ctx.stroke(); // 绘制
--------
ps: touches是当前屏幕上所有触摸点的列表;
targetTouches是当前对象上所有触摸点的列表;
changedTouches是涉及当前事件的触摸点的列表。
3.返回上一步
ctx.getImageData // getImageData() 复制画布上指定矩形的像素数据,然后将这些数据放在一个数组里,需要返回上一步时就删除一组数据
4.清空
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); // 以绘图板宽高清空
preDrawAry = []; // 步数数组为空
5.将canvas转成图片,保存路径上传
var url = canvas.toDataURL('image/jpg'); // 向后端发请求保存
var $ = require('wiki-mobile-common:widget/lib/zepto/zepto.js'); var init = function () { var mousePressed = false; var lastX, lastY; var isMove = false; var isEnd = false; var canvas; var ctx; var preDrawAry = []; var submitLock = false; // 计算画板方法 function calBoard() { var boardSize = $(window).width() * 0.94; var maxHeight = $(window).height() - 165; if (boardSize < maxHeight) { $('#J-draw-board').css({ 'margin-top': (maxHeight - boardSize) / 2 + 10, 'margin-bottom': (maxHeight - boardSize) / 2 + 10, 'margin-left': 0 }); } else { boardSize = maxHeight; $('#J-draw-board').css({ 'margin-top': '10px', 'margin-bottom': '10px', 'margin-left': ($(window).width() * 0.94 - boardSize) / 2 }); } $('#J-draw-board').width(boardSize).height(boardSize); $('#J-draw-canvas')[0].width = boardSize - 1; $('#J-draw-canvas')[0].height = boardSize - 1; } setTimeout(function () { calBoard(); $('#J-draw-board').show(); $('.draw-footer').show(); }, 200); canvas = document.getElementById('J-draw-canvas'); ctx = canvas.getContext("2d"); // 选择笔的粗细 $('.pen-size').on('tap', function () { $('.pen-size').removeClass('current'); $(this).addClass('current'); }); // 绘画 $('#J-draw-canvas').on('touchstart', function (e) { $('#J-draw-tips').hide(); mousePressed = true; isMove = false; isEnd = false; var touch = event.changedTouches[0]; Draw(touch.pageX - $(this).offset().left, touch.pageY - $(this).offset().top, false); // 当前绘图表面状态 var preData = ctx.getImageData(0, 0, canvas.width, canvas.height); // 当前绘图表面进栈 preDrawAry.push(preData); e.preventDefault(); }); $('#J-draw-canvas').on('touchmove', function (e) { isMove = true; var touch = event.changedTouches[0]; if (mousePressed) { Draw(touch.pageX - $(this).offset().left, touch.pageY - $(this).offset().top, true); } e.preventDefault(); }); $('#J-draw-canvas').on('touchend', function (e) { mousePressed = false; isEnd = true; var touch = event.changedTouches[0]; Draw(touch.pageX - $(this).offset().left, touch.pageY - $(this).offset().top, false); e.preventDefault(); }); // 清空画板 $('#J-handle-clear').on('tap', function () { clearArea(); }); // 上一步 $('#J-handle-revoke').on('tap', function () { prevStep(); }); // 提交,上传作品 $('#J-draw-submit').on('tap', function () { if (preDrawAry.length < 3) { showTips('画的太简单了~', '再添几笔'); return; } $('.input-name').show(); $('#J-layer').height($(window).height()).css('display', 'block'); }); $('.upload-submit').on('tap', function () { if ($('.author-name').val() === '') { $('.input-name').hide(); showTips('大侠留个名号', '朕知道了', 'add-name-btn'); }else { uploadImage($('.author-name').val()); } }); $('#J-layer').on('touchstart', function () { $('.input-name').hide(); clearTips(); $(this).hide(); e.preventDefault(); }); // tips关闭 $('.tips-btn').live('tap', function () { clearTips(); $('#J-layer').hide(); }).on('touchstart', function (e) { e.preventDefault(); }); $('.tips-btn.add-name-btn').live('tap', function () { $('.input-name').show(); $('#J-layer').css('display', 'block'); $(this).removeClass('add-name-btn'); }); // 关闭默认行为 $('.tips-layer').on('touchstart', function (e) { e.preventDefault(); }); // 画图 function Draw(x, y, isDown) { if (isDown) { ctx.beginPath(); ctx.strokeStyle = 'black'; ctx.lineWidth = $('.pen-size.current').data('size'); ctx.lineJoin = "round"; ctx.lineCap = "round"; ctx.moveTo(lastX, lastY); ctx.lineTo(x, y); ctx.closePath(); ctx.stroke(); } lastX = x; lastY = y; if (!isMove && isEnd) { ctx.beginPath(); ctx.strokeStyle = 'black'; ctx.arc(lastX, lastY, $('.pen-size.current').data('size'), 0, 2*Math.PI, true); ctx.closePath(); ctx.fillStyle = 'black'; ctx.fill(); } } // 上一步 function prevStep() { if (preDrawAry.length > 0) { var popData = preDrawAry.pop(); ctx.putImageData(popData, 0, 0); } if (preDrawAry.length === 0) { $('#J-draw-tips').show(); } } // 清画板 function clearArea() { $('#J-draw-tips').show(); ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); preDrawAry = []; } // 上传作品 function uploadImage(name) { if (preDrawAry.length <= 0) { return; } if (submitLock) { return; } var url = canvas.toDataURL('image/jpg'); submitLock = true; $.post("/xx/api/publish", { content: url, name: name }, function (data) { if (data.errno === 0) { window.location.href = '/xx?drawingId=' + data.id + '#list'; }else if (data.errno === 4) { showTips('画的太简单了~', '再添几笔'); $('.input-name').hide(); submitLock = false; }else if (data.errno === 7) { showTips('提交太快了,休息一会再画吧~', '休息一下'); $('.input-name').hide(); submitLock = false; }else { showTips('上传失败', '再传一次', 'add-name-btn'); $('.input-name').hide(); submitLock = false; } }); } // 生成tips提示 function showTips(content, btn, btnClass) { if (!!btnClass) { $('.tips-btn').addClass(btnClass); } $('.tips-con').text(content); $('.tips-btn').text(btn); $('#J-layer').css('display', 'block'); $('.tips-layer').show(); } // 清空提示板 function clearTips() { $('.tips-con').text(''); $('.tips-btn').text(''); $('.tips-layer').hide(); } }
<div class="main"> <div class="draw-header"> <div class="draw-submit" id="J-draw-submit">发布</div> <div class="go-home"> <a href="/shiji/myshiji" class="go-home-link" id="J-go-home"> <em class="layout-icons layout-icons_left-arrow"></em> 回首页 </a> </div> </div> <div class="draw-board" id="J-draw-board"> <div class="draw-tips" id="J-draw-tips">幅图画</div> <canvas class="draw-canvas" width='0' height='0' id="J-draw-canvas"></canvas> </div> <div class="layer" id="J-layer"></div> <div class="input-name"> <input class="author-name" type="text" placeholder="请输入你的昵称" maxlength="20"/> <div class="upload-submit-container"><input class="upload-submit" type="button" value="确定"/></div> </div> <div class="tips-layer"> <div class="tips-con"></div> <div class="tips-btn"></div> </div> <div class="draw-footer"> <div class="draw-handle"> <div class="title">操作:</div> <div class="handle-btn handle-revoke" id="J-handle-revoke"> <em class="layout-icons layout-icons_revoke"></em>撤销 </div> <div class="handle-btn handle-clear" id="J-handle-clear"> <em class="layout-icons layout-icons_delete"></em>清空 </div> </div> <div class="draw-setting"> <div class="title">笔触:</div> <ul class="pen-size-list"> <li class="pen-size pen-size-small" data-size="2"><span></span></li> <li class="pen-size pen-size-middle current" data-size="4"><span></span></li> <li class="pen-size pen-size-big" data-size="6"><span></span></li> </ul> </div> </div> </div>