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

您的位置:首頁技術文章
文章詳情頁

javascript實現畫板功能

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

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

畫板功能的實現

<!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’; //線條起始與結尾樣式 this.context.lineJoin = ’round’; //轉彎 this.draw(); //畫筆函數 this.btnFn(); //按鈕函數 }, 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, //鼠標點距離減去canvas離左邊的距離等于畫布點 m_y = e.pageY - c_y; //鼠標點距離減去canvas離上邊的距離等于畫布點 self.context.beginPath(); self.context.moveTo(m_x,m_y);//鼠標在畫布上的點 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){ //定義一把鎖,防止鼠標移開滑動 self.context.lineTo(e.pageX-c_x,e.pageY-c_y); self.context.stroke(); //繪制出路徑 } }) cavs.mouseup(function(){ self.context.closePath(); //結束自動閉合 self.bool = false; //鼠標不移動時畫筆斷開 }) cavs.mouseleave(function(){ self.context.closePath(); //結束自動閉合 self.bool = false; //鼠標不移動時畫筆斷開 }) }, 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){ //當顏色變化時改變字體的顏色 self.context.strokeStyle = $(this).val(); }) this.lineRuler.change(function(e){ //線條的變化值 self.context.lineWidth = $(this).val(); }) } } drawingLineObj.init(); </script></html>

javascript實現畫板功能

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持好吧啦網。

標簽: JavaScript
相關文章:
主站蜘蛛池模板: 经济师考试_2025中级经济师报名时间_报名入口_考试时间_华课网校经济师培训网站 | 新密高铝耐火砖,轻质保温砖价格,浇注料厂家直销-郑州荣盛窑炉耐火材料有限公司 | 专业广州网站建设,微信小程序开发,一物一码和NFC应用开发、物联网、外贸商城、定制系统和APP开发【致茂网络】 | 儋州在线-儋州招聘找工作、找房子、找对象,儋州综合生活信息门户! | 天津市能谱科技有限公司-专业的红外光谱仪_红外测油仪_紫外测油仪_红外制样附件_傅里叶红外光谱技术生产服务厂商 | 流量卡中心-流量卡套餐查询系统_移动电信联通流量卡套餐大全 | 手板-手板模型-手板厂-手板加工-生产厂家,[东莞创域模型] | 工程管道/塑料管材/pvc排水管/ppr给水管/pe双壁波纹管等品牌管材批发厂家-河南洁尔康建材 | 纳米二氧化硅,白炭黑,阴离子乳化剂-臻丽拾科技 | 企业彩铃制作_移动、联通、电信集团彩铃上传开通_彩铃定制_商务彩铃管理平台-集团彩铃网 | 上海乾拓贸易有限公司-日本SMC电磁阀_德国FESTO电磁阀_德国FESTO气缸 | 电缆接头_防水接头_电缆防水接头_防水电缆接头_上海闵彬 | 361°官方网站| 磁力抛光机_磁力研磨机_磁力去毛刺机_精密五金零件抛光设备厂家-冠古科技 | NMRV减速机|铝合金减速机|蜗轮蜗杆减速机|NMRV减速机厂家-东莞市台机减速机有限公司 | 123悬赏网_发布悬赏任务_广告任务平台| 山东臭氧发生器,臭氧发生器厂家-山东瑞华环保设备 | MES系统-WMS系统-MES定制开发-制造执行MES解决方案-罗浮云计算 | 阴离子_阳离子聚丙烯酰胺厂家_聚合氯化铝价格_水处理絮凝剂_巩义市江源净水材料有限公司 | 耐腐蚀泵,耐腐蚀真空泵,玻璃钢真空泵-淄博华舜耐腐蚀真空泵有限公司 | 信阳网站建设专家-信阳时代网联-【信阳网站建设百度推广优质服务提供商】信阳网站建设|信阳网络公司|信阳网络营销推广 | 浙江寺庙设计-杭州寺院设计-宁波寺庙规划_汉匠 | 扒渣机厂家_扒渣机价格_矿用扒渣机_铣挖机_撬毛台车_襄阳永力通扒渣机公司 | 制氮设备-变压吸附制氮设备-制氧设备-杭州聚贤气体设备制造有限公司 | 酒精检测棒,数显温湿度计,酒安酒精测试仪,酒精检测仪,呼气式酒精检测仪-郑州欧诺仪器有限公司 | 储气罐,真空罐,缓冲罐,隔膜气压罐厂家批发价格,空压机储气罐规格型号-上海申容压力容器集团有限公司 | 家德利门业,家居安全门,别墅大门 - 安徽家德利门业有限公司 | C形臂_动态平板DR_动态平板胃肠机生产厂家制造商-普爱医疗 | 熔体泵|换网器|熔体齿轮泵|熔体计量泵厂家-郑州巴特熔体泵有限公司 | 超声骨密度仪,双能X射线骨密度仪【起草单位】,骨密度检测仪厂家 - 品源医疗(江苏)有限公司 | TPE_TPE热塑性弹性体_TPE原料价格_TPE材料厂家-惠州市中塑王塑胶制品公司- 中塑王塑胶制品有限公司 | 周口风机|周风风机|河南省周口通用风机厂 | 聚氨酯保温钢管_聚氨酯直埋保温管道_聚氨酯发泡保温管厂家-沧州万荣防腐保温管道有限公司 | 房车价格_依维柯/大通/东风御风/福特全顺/江铃图片_云梯搬家车厂家-程力专用汽车股份有限公司 | 冷水机,风冷冷水机,水冷冷水机,螺杆冷水机专业制造商-上海祝松机械有限公司 | 板框压滤机-隔膜压滤机配件生产厂家-陕西华星佳洋装备制造有限公司 | 临沂招聘网_人才市场_招聘信息_求职招聘找工作请认准【马头商标】 | 交流伺服电机|直流伺服|伺服驱动器|伺服电机-深圳市华科星电气有限公司 | 烟台螺纹,烟台H型钢,烟台钢材,烟台角钢-烟台市正丰金属材料有限公司 | 青岛美佳乐清洁工程有限公司|青岛油烟管道清洗|酒店|企事业单位|学校工厂厨房|青岛油烟管道清洗 插针变压器-家用电器变压器-工业空调变压器-CD型电抗器-余姚市中驰电器有限公司 | 深圳美安可自动化设备有限公司,喷码机,定制喷码机,二维码喷码机,深圳喷码机,纸箱喷码机,东莞喷码机 UV喷码机,日期喷码机,鸡蛋喷码机,管芯喷码机,管内壁喷码机,喷码机厂家 |