前端canvas实现图画工具
生活随笔
收集整理的這篇文章主要介紹了
前端canvas实现图画工具
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
視頻展示
前端canvas實現圖畫工具
作者有話說
這幾天學了canvas標簽，在熟悉了canvas的一些屬性后我決定做有個關于canvas的一個圖畫工具。在b站也有看到類似的功能，在看了關于這類程序后我覺得我也可以試試，順便鞏固一下自己這幾天學的知識。
大概思路
代碼（index.html）
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="http://at.alicdn.com/t/font_2782973_i88dmcolper.css"><link rel="stylesheet" href="canvas畫筆工具.css"><link rel="stylesheet" href="alert.css"> </head> <body><!-- 菜單功能 --><div class="menu"><!-- 畫筆 --><div class="btn iconfont icon-lujing98" id="drawPen" style="color: green;font-size: 30px;"></div><!-- 矩形 --><div class="btn iconfont icon-juxing" id="rect" style="color: skyblue;font-size: 30px;"></div><!-- 圓 --><div class="btn iconfont icon-yuan1" id="round" style="color: purple;font-size: 30px;"></div><!-- 線條厚度 --><div class="btn iconfont icon-tuopu-xiantiaocuxi" id="lineThick" style="color: orange;font-size: 30px;"><!-- 線條 --><ul><li class="iconfont icon-hengxian- lineWidth" style="font-size: 20px;"></li><li class="iconfont icon-hengxian- lineWidth" style="font-size: 28px;"></li><li class="iconfont icon-hengxian- lineWidth" style="font-size: 38px;"></li><li class="iconfont icon-hengxian- lineWidth" style="font-size: 53px;"></li></ul></div><!-- 顏色 --><div class="btn iconfont icon-xuanzeyanse" id="sel_color" style="color: red;font-size: 30px;"><!-- 顏色塊 --><ul class="color_block_ul"><li class="color_block" style="background-color: orchid;"></li><li class="color_block" style="background-color: black;"></li><li class="color_block" style="background-color: pink;"></li><li class="color_block" style="background-color: red;"></li><li class="color_block" style="background-color: yellow;"></li><li class="color_block" style="background-color: green;"></li><li class="color_block" style="background-color: #99d9ea;"></li><li class="color_block" style="background-color: #c8bfe7;"></li><li class="color_block" style="background-color: #b97a57;"></li><li class="color_block" style="background-color: #c3c3c3;"></li></ul></div><!-- 橡皮擦按鈕 --><div class="btn iconfont icon-noChoiceEraser eraser_btn" style="color:#fa9693;;font-size: 30px;"></div><!-- 下載圖片按鈕 --><div class="btn downLoad">下載圖片</div></div><!-- 畫布 --><canvas id="mycanvas" style="z-index: 99;"></canvas><!-- 橡皮檫模型 --><div class="eraser"></div><!-- 下載圖圖片的a標簽 --><a href="" download="download" class="downLoad_img"></a><script src="alert.js"></script><script>// 獲取canvas標簽var mycanvas = document.querySelector('#mycanvas');mycanvas.setAttribute('width',mycanvas.offsetWidth);mycanvas.setAttribute('height',mycanvas.offsetHeight);var ctx = mycanvas.getContext('2d');var eraser = document.querySelector('.eraser'); //橡皮擦// 畫布對象var draw_board = {type: "null",isDraw: false,beginX: 0, //鼠標在canvas畫布上按下的x坐標beginY: 0, //鼠標在canvas畫布上按下的y坐標dataPx: 0,lineWidth: 3, //初始化線條的長度color: null, //默認顏色黑色// 畫筆penFn: function(e) {var x = e.pageX - mycanvas.offsetLeft;var y = e.pageY - mycanvas.offsetTop;ctx.beginPath();ctx.fillStyle = draw_board.color; //改變畫筆的顏色·ctx.arc(x,y,draw_board.lineWidth,0,Math.PI*2);ctx.fill();ctx.closePath();},// 畫矩形rectFn: function(e) {var x = e.pageX - mycanvas.offsetLeft;var y = e.pageY - mycanvas.offsetTop;ctx.beginPath();ctx.strokeStyle = draw_board.color;ctx.clearRect(0,0,mycanvas.offsetWidth,mycanvas.offsetHeight); //由于畫筆是用一個個小圓構成的，所以每次都要清除畫板數據，不然會導致線條的成型if(draw_board.dataPx != 0) {ctx.putImageData(draw_board.dataPx,0,0,0,0,mycanvas.offsetWidth,mycanvas.offsetHeight); //保留畫板數據}ctx.lineWidth = draw_board.lineWidth;ctx.strokeRect(draw_board.beginX,draw_board.beginY,x-draw_board.beginX,y-draw_board.beginY);ctx.closePath(); },// 畫圓roundFn: function(e) {var x = e.pageX - mycanvas.offsetLeft;var y = e.pageY - mycanvas.offsetTop;ctx.beginPath();ctx.lineWidth = draw_board.lineWidth;ctx.strokeStyle = draw_board.color;ctx.clearRect(0,0,mycanvas.offsetWidth,mycanvas.offsetHeight);ctx.arc(draw_board.beginX,draw_board.beginY,Math.abs(y-draw_board.beginY),0,2*Math.PI);if(draw_board.dataPx != 0) {ctx.putImageData(draw_board.dataPx,0,0,0,0,mycanvas.offsetWidth,mycanvas.offsetHeight);}ctx.stroke();ctx.closePath();},// 橡皮檫eraserFn: function(e) {var x = e.pageX - mycanvas.offsetLeft;var y = e.pageY - mycanvas.offsetTop;eraser.style.left = x + "px";eraser.style.top = y + 82 + "px";ctx.beginPath();ctx.clearRect(x,y,50,50);ctx.closePath();}};var btn = document.querySelectorAll('.btn');function click_boxshowdow(tool) {btn.forEach((item)=> {item.classList.remove('active');});tool.classList.add('active');};// 1 選中畫筆var drawPen = document.querySelector('#drawPen');drawPen.onclick = function() {draw_board.type = "pen";click_boxshowdow(this);}// 2 選中矩形var rect = document.querySelector('#rect');rect.onclick = function() {draw_board.type = "rect";click_boxshowdow(this);}// 3 選中圓形var round = document.querySelector('#round');round.onclick = function() {draw_board.type = "round";click_boxshowdow(this);}// 選中線段粗細var lineThick = document.querySelector('#lineThick');var line_lis = document.querySelectorAll('.lineWidth');var flag_line = true;lineThick.onclick = function() {click_boxshowdow(this);if(flag_line) {line_lis.forEach(item=> {item.style.display = "block";});flag_line = false;} else {line_lis.forEach(item=> {item.style.display = "none";});flag_line = true;}}// 點擊改變線的粗細for(let i = 0;i < line_lis.length;i++) {line_lis[i].onclick = function() {if(i == 0) {draw_board.lineWidth = 1;} else if(i == 1) {draw_board.lineWidth = 2;} else if(i == 2) {draw_board.lineWidth = 4;} else {draw_board.lineWidth = 7;}}}// 選中顏色var flag_color = true;var color_lis = document.querySelectorAll('.color_block');var select_color = document.querySelector('#sel_color');select_color.addEventListener('click',function() {click_boxshowdow(this);if(flag_color) {color_lis.forEach(item=> {item.style.display = "block";});flag_color = false;} else {color_lis.forEach(item=> {item.style.display = "none";});flag_color = true;}});// 點擊改變線條的顏色for(let j = 0;j < color_lis.length;j++) {color_lis[j].onclick = function() {switch(j) {case 0:draw_board.color = "orchid";break;case 1:draw_board.color = "black";break;case 2:draw_board.color = "pink";break;case 3:draw_board.color = "red";break;case 4:draw_board.color = "yellow";break;case 5:draw_board.color = "green";break;case 6:draw_board.color = "#99d9ea";break;case 7:draw_board.color = "#c8bfe7";break;case 8:draw_board.color = "#b97a57";break;case 9:draw_board.color = "#c3c3c3";break;}}}// 選中橡皮擦var eraser_exit = true;var eraser_btn = document.querySelector('.eraser_btn');eraser_btn.onclick = function() {click_boxshowdow(this);if(eraser_exit) {eraser.style.display = "block";eraser_exit = false;} else {eraser.style.display = "none";eraser_exit = true;}draw_board.type = "eraser";}// 選中下載圖片var num = -1;var downLoad = document.querySelector('.downLoad');downLoad.onclick = function() {click_boxshowdow(this);var url = mycanvas.toDataURL();var p = {content: '<img src= ' + '"' + url + '"' + '>',title: '點擊確定下載圖片'}PopupWindow(p,++num,url);}// 在畫布中鼠標按下事件mycanvas.onmousedown = function(e) {if(!eraser_exit) {eraser.style.display = "block";}draw_board.isDraw = true;draw_board.beginX = e.pageX - mycanvas.offsetLeft;draw_board.beginY= e.pageY - mycanvas.offsetTop;}// 在畫布中鼠標抬起時間mycanvas.onmouseup = function(e) {draw_board.isDraw = false;draw_board.dataPx = ctx.getImageData(0,0,mycanvas.offsetWidth,mycanvas.offsetHeight);}// 在畫布中鼠標移動事件mycanvas.onmousemove = function(e) {if(draw_board.isDraw) {if(draw_board.type != 'null') {var str = draw_board.type + "Fn";draw_board[str](e);}}}</script> </body> </html>canvas畫筆工具.css
* {padding: 0;margin: 0; }.lineWidth {list-style: none;border-radius: 15px;border: 1px solid pink;height: 37px;line-height: 37px;display: none; } .lineWidth:hover {background-color: skyblue; } .color_block {display: none;list-style: none;margin-top: 5px;height: 25px;line-height: 25px;width: 110px;background-color: orange; } .color_block:hover {width: 130px; } .color_block div {display: none;float: left;margin-right: 7px;width: 30px;height: 30px;background-color: skyblue; } body {position: relative;width: 100vw;height: 100vh;display: flex;flex-direction: column;justify-content: flex-start; } .menu {z-index: 999;display: flex;justify-content: space-around;align-items: center;width: 100%;height: 100px;} .btn {border: 3px solid pink;width: 120px;height: 53px;border-radius: 15px;line-height: 53px;text-align: center;cursor: pointer;display: flex;flex-direction: column; } #mycanvas {height: 100vh;border: 3px solid skyblue; } .active {box-shadow: 0 0 20px 3px gold;border: 3px solid gold; } .eraser {position: absolute;display: none;width: 50px;height: 50px;background-color: pink;opacity: 0.5;left: 1800px; }alert.js（點擊下載畫好的圖片時的彈窗）
function PopupWindow(args,num,url) {if(num >=1) {var div_box = document.querySelector('.alert');var body = document.querySelector('body');body.removeChild(div_box);}var div = document.createElement('div');var body = document.querySelector('body');mycanvas.style.backgroundColor = "#333";div.className = "alert";div.innerHTML = `<div class="title">` + args.title + `</div><div class="main">` + args.content + `</div><div class="bottom"><button class = "cancel">取消</button><button class = "right">確定</button></div>`;body.appendChild(div);var right = document.querySelector('.right');var cancel = document.querySelector('.cancel');var div_box = document.querySelector('.alert');right.onclick = function() {var downLoad_img = document.querySelector('.downLoad_img');downLoad_img.setAttribute("href",url);mycanvas.style.backgroundColor = "white";downLoad_img.click();div_box.style.display = "none";}cancel.onclick = function() {div_box.style.display = "none";mycanvas.style.backgroundColor = "white";} };alert.css
.alert {position: absolute;z-index: 99999;left: 33%;top: 27%;width: 450px;height: 300px;border: 1px solid pink;background-color: white; } .title {width: 100%;height: 60px;text-align: center;line-height: 60px;background-color: #ccc;color: white; } .main {width: 100%;height: 60%; } .main img {width: 100%;height: 100%; } .bottom {display: flex;flex-direction: row;justify-content: space-around;align-items: center;width: 100%;height: 20%;line-height: 20%;border-top: 1px solid pink; }/* 以下為下載圖片按鈕樣式 */ /* 確定按鈕特效 */ .right,.cancel {position: relative;width: 100px;height: 50px;border: 1px solid white;transition: all 1s ease-in-out;background-color: white; } .right:hover {background-color: pink;color: white;transition-delay: 0.4s; } .right::before,.right::after {content: '';position: absolute;width: 15px;height: 15px;border: 2px pink solid;transition: width 0.2s ease-in-out 0.2s; }.right::before {left: 0;top: 0;border-right: 0;border-bottom: 0; }.right::after {right: 0;bottom: 0;border-left: 0;border-top: 0; }.right:hover::after, .right:hover::before {width: 96px;height: 46px; }/* 取消按鈕特效 */ .cancel::before,.cancel::after {content: '';position: absolute;width: 15px;height: 15px;border: 2px orange solid;transition: width 0.2s ease-in-out 0.2s; } .cancel::before {left: 0;top: 0;border-right: 0;border-bottom: 0; } .cancel::after {right: 0;bottom: 0;border-left: 0;border-top: 0; } .cancel:hover {background-color: orange;color: white;transition-delay: 0.4s; } .cancel:hover::after, .cancel:hover::before {width: 96px;height: 46px; }總結
以上是生活随笔為你收集整理的前端canvas实现图画工具的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 大咖们的15条产品方法论，你都知道吗？
- 下一篇： HTML提供模板供用户编辑,[html模