电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術(shù)文章
文章詳情頁

javascript實現(xiàn)畫板功能

瀏覽:21日期:2023-06-22 08:36:25

本文實例為大家分享了javascript實現(xiàn)畫板功能的具體代碼,供大家參考,具體內(nèi)容如下

畫板功能的實現(xiàn)

<!DOCTYPE html><html> <head> <meta charset='utf-8'> <title></title> <style type='text/css'> *{ margin: 0; padding: 0; list-style: none; } body{ background:url(11.jpg) 0 0 no-repeat; } .wrapper{ margin: 10px; } .wrapper canvas{ border: 1px solid blue; border-radius:25px; box-shadow: 10px 10px 5px brown; margin-bottom: 16px; background-color: #fff; } .wrapper .btn-list{ width: 1000px; text-align: center; } .wrapper .btn-list li{ display: inline-block; margin-left: 40px; } .wrapper .btn-list li input{ background-color: darkgreen; color: blanchedalmond border: none; padding: 6px 13px; cursor: pointer; border-radius:25px; font-size: 18px; display: block; transition-duration: 0.2s; } .wrapper .btn-list li input:hover{ border: 1px solid chocolate; box-shadow: 0 12px 15px 0 rgba(0,0,0,0.5); } </style> </head> <body> <!-- div.wrapper>canvas+ul.btn-list>li*5>input --> <div class='wrapper'> <canvas height='500'></canvas> <ul class='btn-list'> <li><input type='color' value='colorBoard'></li> <li><input type='button' value='清屏'></li> <li><input type='button' value='橡皮'></li> <li><input type='button' value='撤銷'></li> <li><input type='range' value='線條' min='1' max='30'></li> </ul> </div> </body> <script src='http://www.hdgsjgj.cn/bcjs/jquery-3.4.1.min.js'></script> <script> var drawingLineObj = { cavs:$(’.cavs’), context:$(’.cavs’).get(0).getContext(’2d’), colorBoard:$(’#colorBoard’), cleanBoard:$(’#cleanBoard’), arrImg:[], eraser:$('#eraser'), rescind:$(’#rescind’), lineRuler:$(’#lineRuler’), bool:false, init:function(){ this.context.lineCap = ’round’; //線條起始與結(jié)尾樣式 this.context.lineJoin = ’round’; //轉(zhuǎn)彎 this.draw(); //畫筆函數(shù) this.btnFn(); //按鈕函數(shù) }, draw:function(){ var cavs = this.cavs, self = this; var c_x = cavs.offset().left, //canvas離左邊的距離 c_y = cavs.offset().top; //canvas離上邊的距離 cavs.mousedown(function(e){ e = e||window.event; self.bool = true; var m_x = e.pageX - c_x, //鼠標(biāo)點距離減去canvas離左邊的距離等于畫布點 m_y = e.pageY - c_y; //鼠標(biāo)點距離減去canvas離上邊的距離等于畫布點 self.context.beginPath(); self.context.moveTo(m_x,m_y);//鼠標(biāo)在畫布上的點 var imgData = self.context.getImageData(0,0,self.cavs[0].width,self.cavs[0].height); self.arrImg.push(imgData); //console.log(self.arrImg); }) cavs.mousemove(function(e){ if(self.bool){ //定義一把鎖,防止鼠標(biāo)移開滑動 self.context.lineTo(e.pageX-c_x,e.pageY-c_y); self.context.stroke(); //繪制出路徑 } }) cavs.mouseup(function(){ self.context.closePath(); //結(jié)束自動閉合 self.bool = false; //鼠標(biāo)不移動時畫筆斷開 }) cavs.mouseleave(function(){ self.context.closePath(); //結(jié)束自動閉合 self.bool = false; //鼠標(biāo)不移動時畫筆斷開 }) }, btnFn:function(){ var self = this; $(’.btn-list’).on(’click’,function(e){ e = e||window.event; switch(e.target.id){ //target case ’cleanBoard’: self.context.clearRect(0,0,self.cavs[0].width,self.cavs[0].height) //[0] break case ’eraser’: self.context.strokeStyle = ’#fff’ break case ’rescind’: if(self.arrImg.length>0){ self.context.putImageData(self.arrImg.pop(),0,0); break } } }) this.colorBoard.change(function(e){ //當(dāng)顏色變化時改變字體的顏色 self.context.strokeStyle = $(this).val(); }) this.lineRuler.change(function(e){ //線條的變化值 self.context.lineWidth = $(this).val(); }) } } drawingLineObj.init(); </script></html>

javascript實現(xiàn)畫板功能

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。

標(biāo)簽: JavaScript
相關(guān)文章:
主站蜘蛛池模板: Safety light curtain|Belt Sway Switches|Pull Rope Switch|ultrasonic flaw detector-Shandong Zhuoxin Machinery Co., Ltd | 贴板式电磁阀-不锈钢-气动上展式放料阀-上海弗雷西阀门有限公司 工业机械三维动画制作 环保设备原理三维演示动画 自动化装配产线三维动画制作公司-南京燃动数字 | 武汉宣传片制作-视频拍摄-企业宣传片公司-武汉红年影视 | 干洗加盟网-洗衣店品牌排行-干洗设备价格-干洗连锁加盟指南 | 超细|超微气流粉碎机|气流磨|气流分级机|粉体改性机|磨粉机|粉碎设备-山东埃尔派粉体科技 | 专业音响设备_舞台音响设备_会议音响工程-首选深圳一禾科技 | 粉末冶金注射成型厂家|MIM厂家|粉末冶金齿轮|MIM零件-深圳市新泰兴精密科技 | 全国国际学校排名_国际学校招生入学及学费-学校大全网 | 卫生纸复卷机|抽纸机|卫生纸加工设备|做卫生纸机器|小型卫生纸加工需要什么设备|卫生纸机器设备多少钱一台|许昌恒源纸品机械有限公司 | 全自动在线分板机_铣刀式在线分板机_曲线分板机_PCB分板机-东莞市亿协自动化设备有限公司 | 电动球阀_不锈钢电动球阀_电动三通球阀_电动调节球阀_上海湖泉阀门有限公司 | 博博会2021_中国博物馆及相关产品与技术博览会【博博会】 | 压滤机-洗沙泥浆处理-压泥机-山东创新华一环境工程有限公司 | 骨灰存放架|骨灰盒寄存架|骨灰架厂家|智慧殡葬|公墓陵园管理系统|网上祭奠|告别厅智能化-厦门慈愿科技 | 最新电影-好看的电视剧大全-朝夕电影网 | 影合社-影视人的内容合作平台| 冲击式破碎机-冲击式制砂机-移动碎石机厂家_青州市富康机械有限公司 | VI设计-LOGO设计公司-品牌设计公司-包装设计公司-导视设计-杭州易象设计 | 脉冲布袋除尘器_除尘布袋-泊头市净化除尘设备生产厂家 | 元拓建材集团官方网站| 全自动烧卖机厂家_饺子机_烧麦机价格_小笼汤包机_宁波江北阜欣食品机械有限公司 | CCC验厂-家用电器|服务器CCC认证咨询-奥测世纪 | 定制防伪标签_防伪标签印刷_防伪标签厂家-510品保防伪网 | 行业分析:提及郑州火车站附近真有 特殊按摩 ?2025实地踩坑指南 新手如何避坑不踩雷 | 西门子气候补偿器,锅炉气候补偿器-陕西沃信机电工程有限公司 | 隐形纱窗|防护纱窗|金刚网防盗纱窗|韦柏纱窗|上海青木装潢制品有限公司|纱窗国标起草单位 | 体感VRAR全息沉浸式3D投影多媒体展厅展会游戏互动-万展互动 | 净化车间_洁净厂房_净化公司_净化厂房_无尘室工程_洁净工程装修|改造|施工-深圳净化公司 | 尚为传动-专业高精密蜗轮蜗杆,双导程蜗轮蜗杆,蜗轮蜗杆减速机,蜗杆减速机生产厂家 | 药品/药物稳定性试验考察箱-埃里森仪器设备(上海)有限公司 | 滚珠丝杆升降机_螺旋升降机_丝杠升降机-德迈传动 | 碎石机设备-欧版反击破-欧版颚式破碎机(站)厂家_山东奥凯诺机械 高低温试验箱-模拟高低温试验箱订制-北京普桑达仪器科技有限公司【官网】 | 袋式过滤器,自清洗过滤器,保安过滤器,篮式过滤器,气体过滤器,全自动过滤器,反冲洗过滤器,管道过滤器,无锡驰业环保科技有限公司 | uv固化机-丝印uv机-工业烤箱-五金蚀刻机-分拣输送机 - 保定市丰辉机械设备制造有限公司 | 涂层测厚仪_漆膜仪_光学透过率仪_十大创新厂家-果欧电子科技公司 | 砂尘试验箱_淋雨试验房_冰水冲击试验箱_IPX9K淋雨试验箱_广州岳信试验设备有限公司 | 自动记录数据电子台秤,记忆储存重量电子桌称,设定时间记录电子秤-昆山巨天 | 体感VRAR全息沉浸式3D投影多媒体展厅展会游戏互动-万展互动 | 济南网站建设|济南建网站|济南网站建设公司【济南腾飞网络】【荐】 | 电加热导热油炉-空气加热器-导热油加热器-翅片电加热管-科安达机械 | 卫生型双针压力表-高温防腐差压表-安徽康泰电气有限公司 |