Posted in Javascript onAugust 30, 2018
本文实例讲述了JS+HTML5 Canvas实现简单的写字板功能。分享给大家供大家参考,具体如下:
先来看运行效果:
具体代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>3water.com JS写字板</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <style type="text/css"> body,html { padding: 0; margin: 0; } a,div,span { font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif; } .canvas-box { display: block; margin: 40px auto; background: #f5f5f5; } .color-box { width: 1080px; display: block; margin: 20px auto; text-align: center; } .color-item { display: inline-block; vertical-align: middle; width: 48px; height: 24px; margin: 10px; background: #989898; cursor: pointer; } .red { background: #e01d5b; } .blue { background: #1d6ae0; } .green { background: #1de087; } .yellow { background: #f3e41d; } .orange { background: #f9850b; } .black { background: #333; } .color-item.active { border: solid 3px #565656; } .btn { display: block; width: 120px; height: 40px; line-height: 40px; margin: 10px auto; text-align: center; font-size: 18px; border: solid 1px #999; border-radius: 5px; cursor: pointer; } </style> </head> <body> <canvas class="canvas-box" id="canvas"></canvas> <div class="color-box"> <span class="color-item red"></span> <span class="color-item blue"></span> <span class="color-item green"></span> <span class="color-item yellow"></span> <span class="color-item orange"></span> <span class="color-item black active"></span> </div> <div class="btn" onclick="clearDraw()">清除</div> <script type="text/javascript"> var canvas = document.getElementById('canvas'); var context = canvas.getContext("2d"); var isDraw = false; //定义变量控制画笔是否可用 var movePos; //定义变量存放初始画笔开始位置 var linWidth = 10; var linColor = '#333'; window.onload = function(){ draw(); } function draw(){ canvas.width = 500; canvas.height = 500; context.strokeStyle = "red"; context.lineWidth = 10; context.beginPath(); context.strokeRect(0,0,500,500); //设置画笔颜色,宽度 context.strokeStyle = "red"; context.lineWidth = 1; //使线段连续,圆滑 context.lineCap = "round"; context.lineJoin = "round"; drawDashedLine(context,0,0,500,500); drawDashedLine(context,0,500,500,0); drawLine(context,0,250,500,250); drawLine(context,250,0,250,500); } //画虚线(参照网上大神) function drawDashedLine(context, x1, y1, x2, y2, dashLength) { dashLength = dashLength === undefined ? 5 : dashLength; var deltaX = x2 - x1; var deltaY = y2 - y1; var numDashes = Math.floor( Math.sqrt(deltaX * deltaX + deltaY * deltaY) / dashLength); for (var i=0; i < numDashes; ++i) { context[ i % 2 === 0 ? 'moveTo' : 'lineTo' ] (x1 + (deltaX / numDashes) * i, y1 + (deltaY / numDashes) * i); } context.stroke(); }; //画直线 function drawLine(context,x1,y1,x2,y2){ context.moveTo(x1,y1); context.lineTo(x2,y2); context.stroke(); }; //获取鼠标相对与canvas位置 function getPos(x,y){ var box = canvas.getBoundingClientRect(); return {x: x-box.left,y: y-box.top}; }; //画笔 function drawing(e){ if(isDraw){ var position = getPos(e.clientX,e.clientY); context.strokeStyle = linColor; context.lineWidth = linWidth; context.save(); context.beginPath(); context.moveTo(movePos.x,movePos.y); context.lineTo(position.x,position.y); context.stroke(); movePos = position; context.restore(); } } //鼠标点下 canvas.onmousedown = function(e){ isDraw = true; movePos = getPos(e.clientX,e.clientY); drawing(e); } //鼠标移动 canvas.onmousemove = function(e){ drawing(e); } //鼠标松开 canvas.onmouseup = function(e){ isDraw = false; } //鼠标离开 canvas.onmouseout =function(e){ isDraw = false; } //选择画笔颜色 $('.color-item').on('click',function(){ $(this).addClass('active').siblings().removeClass('active'); linColor = $(this).css('background-color'); }); //清除 function clearDraw(){ context.clearRect(0,0,500,500); draw(); } </script> </body> </html>
感兴趣的朋友还可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码,亲身体验一下运行效果。
更多关于JavaScript相关内容还可查看本站专题:《JavaScript+HTML5特效与技巧汇总》、《JavaScript图形绘制技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
JS+HTML5 Canvas实现简单的写字板功能示例
- Author -
邹大叔声明:登载此文出于传递更多信息之目的,并不意味着赞同其观点或证实其描述。
Reply on: @reply_date@
@reply_contents@