使用画布和自定义右键菜单
绘图工具有很多bug,比如画矩形时不显示轨迹
重绘路径时也有一些bug,使用Firefox时也有不保存图片等bug。
最好用谷歌打开
原代码如下:
& lthtmllang="en " >
& lthead>。& ltmetacharset="UTF-8 " >;& lttitle>。油漆工具
边距:0;
填充:0;
/*不要让鼠标选择文本*/
-web kit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
用户选择:无;
/*移除滚动条*/
overflow-x:隐藏;
overflow-y:隐藏;
}身体{
背景:黑色;
}画布{
边框:5px solid # ada 9 a 9;
边界半径:8px
位置:绝对;
最高:50%;
左:50%;
transform:translate(-50%,-50%);
背景:rgb(235,235,235);
}.菜单{
位置:绝对;
宽度:150像素;
显示:无;
box-shadow:3px 3px 5px # 88888;
z指数:999;
}.menuul{
宽度:150像素;
}.menuulli{
列表样式类型:无;
宽度:150像素;
高度:36px
背景:# e4e5e6
框尺寸:边框;
border-top:1pxsolid # d0d 0d 0;
行高:36px
左填充:13px
font-size:14px;
光标:指针;
}.menuulli:hover{
背景:# 626262;
border-top:1pxsolid # 626262;
颜色:白色;
}.menuulli:第一个孩子{
背景:线性渐变(90度,黑色,# b1b1 b 1);
border-top:无;
颜色:白色;
}.颜色{
宽度:35px
高度:20px
} & lt/style>。& lt/head>。& ltbody>。& ltdivclass="menu">。& ltul>。& ltli>。画布工具& lt/li>。& ltli>。画笔颜色
& ltselect name = " sel " class = ' select ' & gt。& ltoptionvalue="1 " >1px<。/option>。& ltoptionvalue="5 " >5px<。/option>。& ltoptionvalue="10 " >10px<。/option>。& ltoptionvalue="15 " >15px<。/option>。& lt/select>。& lt/li>。& ltliclass='line'>。这条线
& lt/html>。
& lt>。窗户。= function(){
var vas = document . query selector(' canvas ');
var CTX = vas . GetContext(' 2d ');
var color = document . query selector('。颜色');
var select = document . query selector('。选择');
varline = document.querySelector('。线');
varrect = document.querySelector('。rect ');
var clear = document . query selector('。clear’);
varclearAll = document . query selector('。clearAll ');
varmenu = document.querySelector('。菜单');
varre draw = document . query selector('。REraW ');
varsaveAll = document . query selector('。save all’);
//自定义菜单标志= trueselect . onmousedown = function(){ flagm = false;} select . onmouseout = function(){ flagm = true;} document . oncontext menu = function(e){
vare = e | | window.event//兼容ie menu . style . left = e . PageX+' px ';menu . style . top = e . Pagey+' px ';menu . style . display = ' block ';
returnfalse//防止当前默认事件发生}
document.onclick = function(){
if(flagm){ menu . style . display = ' none ';} }
/* - */vartools = { color: 'black ',lineWd: '1 ',lineWhat: 'line'}
var startx = 0;
var starty = 0;flag = false
vararrPoint =[];vas . AddEventListener(' mouse down ',函数(e){ flag = true;CTX . BeginPath();CTX . LineWidth = tools . Linewd;CTX . strokestyle = tools . color;startX = e.offsetXstartY = e.offsetYarr point . push(0);//tag}) vas。addeventlistener ('mousemove ',函数(e) {
if(flag) {
varX = e.offsetX
varY = e.offsetY
if(tools.lineWhat == 'line') {
//画出线ctx.lineTo(X,Y);CTX . stroke();arrPoint.push({ x: X,Y:Y });//保存绘图路径} else if(tools . line what = = ' clear '){//橡皮擦ctx.clearRect(X,Y,20,20);} } })vas . addevent listener(' mouse up ',函数(e){ flag = false;
if(tools.lineWhat == 'rect') {
//绘制矩形varendX = e.offsetX
varendY = e.offsetYctx.strokeRect(startX,startY,endX - startX,endY-startY);arr point . push(0);//tag}}) vas。addeventlistener ('mouseleave ',function(){ flag = false;arr point . push(0);//tag })REDRAW . onclick = function(){//REDRAW path//console . log(arr point);ctx.clearRect(0,0,vas.width,vas . height);//clear空canvas vartimer = set interval(function(){
var point = ArrPoint . shift();
// shift从标头中删除一个值,并返回删除的值a = arr。shift () arr = [b,c] if (point = = 0) {CTX。begin path();} else { flag = falsectx.lineTo(point.x,point . y);//根据保存的路径绘制CTX . stroke();} if(ArrPoint . length & lt;1) { clearInterval(定时器);} },10)} //下载画布saveAll.onclick = function(){
var src = vas . TotaToul(' image/png ',1);
varcreate_a = document。(' a ');create _ a.href = srccreate_a.download = '只是做IT ';//定义下载文件名create _ a . click();} color . onmousedown = function(){ flagm = false;} color . addevent listener(' mouse leave ',function(){ flagm = true;})color . addevent listener(' change ',function(){ flagm = true;menu . style . display = ' none ';tools . color = this . value;})select . onchange = function(){ tools . LineWd = this . value;flagm = truemenu . style . display = ' none ';} line . onclick = function(){ tools . LineWhat = ' line ';} rect . onclick = function(){ tools . line WhAT = ' rect ';} clear . onclick = function(){ tools . line WhAT = ' clear ';} clearall . onclick = function(){ CTX . clear rect(0,0,vas.width,vas . height);} } & lt/>。
戳“看原文!
1.《画板在线 Canvas在线画图—简单制作一个画板》援引自互联网,旨在传递更多网络信息知识,仅代表作者本人观点,与本网站无关,侵删请联系页脚下方联系方式。
2.《画板在线 Canvas在线画图—简单制作一个画板》仅供读者参考,本网站未对该内容进行证实,对其原创性、真实性、完整性、及时性不作任何保证。
3.文章转载时请保留本站内容来源地址,https://www.lu-xu.com/jiaoyu/1648115.html