使用画布和自定义右键菜单

绘图工具有很多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/guonei/1648122.html