Canvas在线画图—简单制作一个画板
Posted UI设计自学平台
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Canvas在线画图—简单制作一个画板相关的知识，希望对你有一定的参考价值。
使用了canvas和自定义右键菜单
画图工具有很多bug，比如画矩形的时候不显示轨迹
重绘路径时也有些bug，还有使用火狐保存图片时保存不了 等等bug
最好用谷歌打开
原码如下：
<!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>画笔颜色 <input type="color" class='color'></li> <li>画笔大小
<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>
戳“阅读原文”入群免费领取前端开发教程！
以上是关于Canvas在线画图—简单制作一个画板的主要内容，如果未能解决你的问题，请参考以下文章