使用了 canvas 和自定义右键菜单
画图工具有很多 bug, 比如画矩形的时候不显示轨迹
重绘路径时也有些 bug, 还有使用火狐保存图片时保存不了 等等 bug
最好用谷歌打开
玩玩就行, 别说出来, 说出来我也不会改的
好吧, 是我懒
(效果预览说明: 单击右键可选择工具)
html 代码
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title > 画图工具 </title>
- <style>
- * {
- margin: 0;
- padding: 0;
- /* 不让鼠标选中文字 */
- -webkit-user-select: none;
- -moz-user-select: none;
- -ms-user-select: none;
- user-select: none;
- /* 去除滚动条 */
- overflow-x: hidden;
- overflow-y: hidden;
- }
- body {
- background: black;
- }
- canvas {
- border: 5px solid #ada9a9;
- border-radius: 8px;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- background: rgb(235, 235, 235);
- }
- .menu {
- position: absolute;
- width: 150px;
- display: none;
- box-shadow: 3px 3px 5px #888888;
- z-index: 999;
- }
- .menu ul {
- width: 150px;
- }
- .menu ul li {
- list-style-type: none;
- width: 150px;
- height: 36px;
- background: #e4e5e6;
- box-sizing: border-box;
- border-top: 1px solid #d0d0d0;
- line-height: 36px;
- padding-left: 13px;
- font-size: 14px;
- cursor: pointer;
- }
- .menu ul li:hover {
- background: #626262;
- border-top: 1px solid #626262;
- color: white;
- }
- .menu ul li:first-child {
- background: linear-gradient(90deg, black, #b1b1b1);
- border-top: none;
- color: white;
- }
- .color {
- width: 35px;
- height: 20px;
- }
- </style>
- </head>
- <body>
- <div class="menu">
- <ul>
- <li>Canvas Tools</li>
- <li > 画笔颜色 & nbsp; <input type="color" class='color'></li>
- <li > 画笔大小 & nbsp;
- <select name="sel" class='select'>
- <option value="1">1px</option>
- <option value="5">5px</option>
- <option value="10">10px</option>
- <option value="15">15px</option>
- </select>
- </li>
- <li class='line'> 线条 </li>
- <li class='rect'> 矩形 </li>
- <li class='clear'> 橡皮擦 </li>
- <li class='reDraw'> 重绘路径 </li>
- <li class='clearAll'> 重置画布 </li>
- <li class='saveAll'> 保存画布 </li>
- </ul>
- </div>
- <canvas width=800 height=500></canvas>
- </body>
- </html>
- <script>
- window.onload = function() {
- var vas = document.querySelector('canvas');
- var ctx = vas.getContext('2d');
- var color = document.querySelector('.color');
- var select = document.querySelector('.select');
- var line = document.querySelector('.line');
- var rect = document.querySelector('.rect');
- var clear = document.querySelector('.clear');
- var clearAll = document.querySelector('.clearAll');
- var menu = document.querySelector('.menu');
- var reDraw = document.querySelector('.reDraw');
- var saveAll = document.querySelector('.saveAll');
- // 自定义菜单
- flagm = true;
- select.onmousedown = function() {
- flagm = false;
- }
- select.onmouseout = function() {
- flagm = true;
- }
- document.oncontextmenu = function(e) {
- var e = e || window.event; // 兼容 ie
- menu.style.left = e.pageX + 'px';
- menu.style.top = e.pageY + 'px';
- menu.style.display = 'block';
- return false; // 阻止当前默认事件发生
- }
- document.onclick = function() {
- if (flagm) {
- menu.style.display = 'none';
- }
- }
- /*----------------------------*/
- var tools = {
- color: 'black',
- lineWd: '1',
- lineWhat: 'line'
- }
- var startX = 0;
- var startY = 0;
- flag = false;
- var arrPoint = [];
- vas.addEventListener('mousedown', function(e) {
- flag = true;
- ctx.beginPath();
- ctx.lineWidth = tools.lineWd;
- ctx.strokeStyle = tools.color;
- startX = e.offsetX;
- startY = e.offsetY;
- arrPoint.push(0); // 标记
- })
- vas.addEventListener('mousemove', function(e) {
- if (flag) {
- var X = e.offsetX;
- var Y = e.offsetY;
- if (tools.lineWhat == 'line') {
- // 画线
- ctx.lineTo(X, Y);
- ctx.stroke();
- arrPoint.push({
- x: X,
- y: Y
- }); // 保存绘图路径
- } else if (tools.lineWhat == 'clear') { // 橡皮擦
- ctx.clearRect(X, Y, 20, 20);
- }
- }
- })
- vas.addEventListener('mouseup', function(e) {
- flag = false;
- if (tools.lineWhat == 'rect') {
- // 画矩形
- var endX = e.offsetX;
- var endY = e.offsetY;
- ctx.strokeRect(startX, startY, endX - startX, endY - startY);
- arrPoint.push(0); // 标记
- }
- })
- vas.addEventListener('mouseleave', function() {
- flag = false;
- arrPoint.push(0); // 标记
- })
- reDraw.onclick = function() { // 重绘路径
- // console.log(arrPoint);
- ctx.clearRect(0, 0, vas.width, vas.height); // 清空画布
- var timer = setInterval(function() {
- var point = arrPoint.shift();
- // shift 从头部删除一个值 返回被删除的值 a= arr.shift() arr= [b, c]
- if (point == 0) {
- ctx.beginPath();
- } else {
- flag = false;
- ctx.lineTo(point.x, point.y); // 按照保存好的路径绘图
- ctx.stroke();
- }
- if (arrPoint.length <1) {
- clearInterval(timer);
- }
- }, 10)
- }
- // 下载画布
- saveAll.onclick = function() {
- var src = vas.toDataURL('image/png', 1);
- var create_a = document.createElement('a');
- create_a.href = src;
- create_a.download = 'Just do IT'; // 定义下载文件名
- create_a.click();
- }
- color.onmousedown = function() {
- flagm = false;
- }
- color.addEventListener('mouseleave', function() {
- flagm = true;
- })
- color.addEventListener('change', function() {
- flagm = true;
- menu.style.display = 'none';
- tools.color = this.value;
- })
- select.onchange = function() {
- tools.lineWd = this.value;
- flagm = true;
- menu.style.display = 'none';
- }
- line.onclick = function() {
- tools.lineWhat = 'line';
- }
- rect.onclick = function() {
- tools.lineWhat = 'rect';
- }
- clear.onclick = function() {
- tools.lineWhat = 'clear';
- }
- clearAll.onclick = function() {
- ctx.clearRect(0, 0, vas.width, vas.height);
- }
- }
- </script>
来源: http://www.qdfuns.com/article/47709/3ccddd6bc0af80dd7a6aa3fb494d760c.html