├── README.md ├── canvas_inline ├── images │ ├── arc.png │ ├── bg.png │ ├── brush.png │ ├── line.png │ ├── logo.jpg │ ├── paint.png │ ├── poly.png │ ├── text.png │ ├── arcfill.png │ ├── canvas.png │ ├── dropper.png │ ├── eraser.png │ ├── h5_audio.PNG │ ├── h5_video.PNG │ ├── line1px.png │ ├── line3px.png │ ├── line5px.png │ ├── line8px.png │ ├── screen.png │ ├── icon_close.png │ ├── magnifier.png │ ├── rectangle.png │ ├── h5_video_attr.PNG │ └── icon_box-empty.png ├── js │ ├── Canvas.js │ ├── Color.js │ ├── lineWidth.js │ ├── ToolShape.js │ └── ToolShapeFunc.js ├── css │ └── style.css └── index.html ├── .gitattributes └── .gitignore /README.md: -------------------------------------------------------------------------------- 1 | # canvas_inline 2 | 在线画图板 3 | -------------------------------------------------------------------------------- /canvas_inline/images/arc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/canvas_inline/master/canvas_inline/images/arc.png -------------------------------------------------------------------------------- /canvas_inline/images/bg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/canvas_inline/master/canvas_inline/images/bg.png -------------------------------------------------------------------------------- /canvas_inline/images/brush.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/canvas_inline/master/canvas_inline/images/brush.png -------------------------------------------------------------------------------- /canvas_inline/images/line.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/canvas_inline/master/canvas_inline/images/line.png -------------------------------------------------------------------------------- /canvas_inline/images/logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/canvas_inline/master/canvas_inline/images/logo.jpg -------------------------------------------------------------------------------- /canvas_inline/images/paint.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/canvas_inline/master/canvas_inline/images/paint.png -------------------------------------------------------------------------------- /canvas_inline/images/poly.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/canvas_inline/master/canvas_inline/images/poly.png -------------------------------------------------------------------------------- /canvas_inline/images/text.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/canvas_inline/master/canvas_inline/images/text.png -------------------------------------------------------------------------------- /canvas_inline/images/arcfill.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/canvas_inline/master/canvas_inline/images/arcfill.png -------------------------------------------------------------------------------- /canvas_inline/images/canvas.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/canvas_inline/master/canvas_inline/images/canvas.png -------------------------------------------------------------------------------- /canvas_inline/images/dropper.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/canvas_inline/master/canvas_inline/images/dropper.png -------------------------------------------------------------------------------- /canvas_inline/images/eraser.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/canvas_inline/master/canvas_inline/images/eraser.png -------------------------------------------------------------------------------- /canvas_inline/images/h5_audio.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/canvas_inline/master/canvas_inline/images/h5_audio.PNG -------------------------------------------------------------------------------- /canvas_inline/images/h5_video.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/canvas_inline/master/canvas_inline/images/h5_video.PNG -------------------------------------------------------------------------------- /canvas_inline/images/line1px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/canvas_inline/master/canvas_inline/images/line1px.png -------------------------------------------------------------------------------- /canvas_inline/images/line3px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/canvas_inline/master/canvas_inline/images/line3px.png -------------------------------------------------------------------------------- /canvas_inline/images/line5px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/canvas_inline/master/canvas_inline/images/line5px.png -------------------------------------------------------------------------------- /canvas_inline/images/line8px.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/canvas_inline/master/canvas_inline/images/line8px.png -------------------------------------------------------------------------------- /canvas_inline/images/screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/canvas_inline/master/canvas_inline/images/screen.png -------------------------------------------------------------------------------- /canvas_inline/images/icon_close.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/canvas_inline/master/canvas_inline/images/icon_close.png -------------------------------------------------------------------------------- /canvas_inline/images/magnifier.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/canvas_inline/master/canvas_inline/images/magnifier.png -------------------------------------------------------------------------------- /canvas_inline/images/rectangle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/canvas_inline/master/canvas_inline/images/rectangle.png -------------------------------------------------------------------------------- /canvas_inline/images/h5_video_attr.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/canvas_inline/master/canvas_inline/images/h5_video_attr.PNG -------------------------------------------------------------------------------- /canvas_inline/images/icon_box-empty.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/aliuq/canvas_inline/master/canvas_inline/images/icon_box-empty.png -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # Custom for Visual Studio 5 | *.cs diff=csharp 6 | 7 | # Standard to msysgit 8 | *.doc diff=astextplain 9 | *.DOC diff=astextplain 10 | *.docx diff=astextplain 11 | *.DOCX diff=astextplain 12 | *.dot diff=astextplain 13 | *.DOT diff=astextplain 14 | *.pdf diff=astextplain 15 | *.PDF diff=astextplain 16 | *.rtf diff=astextplain 17 | *.RTF diff=astextplain 18 | -------------------------------------------------------------------------------- /canvas_inline/js/Canvas.js: -------------------------------------------------------------------------------- 1 | (function(window){ 2 | 'use strict'; 3 | 4 | function Canvas(){ 5 | //获取CanvasID 6 | this.cvs = document.getElementById("canvas"); 7 | //获取2d对象 8 | this.cxt = this.cvs.getContext("2d"); 9 | 10 | // this.offsetLeft = this.cvs.offsetLeft; 11 | // this.offsetTop = this.cvs.offsetTop; 12 | // return { 13 | // cvs : this.cvs, 14 | // cxt : this.cxt 15 | // } 16 | } 17 | 18 | window.Canvas = Canvas; 19 | })(window) -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Windows image file caches 2 | Thumbs.db 3 | ehthumbs.db 4 | 5 | # Folder config file 6 | Desktop.ini 7 | 8 | # Recycle Bin used on file shares 9 | $RECYCLE.BIN/ 10 | 11 | # Windows Installer files 12 | *.cab 13 | *.msi 14 | *.msm 15 | *.msp 16 | 17 | # Windows shortcuts 18 | *.lnk 19 | 20 | # ========================= 21 | # Operating System Files 22 | # ========================= 23 | 24 | # OSX 25 | # ========================= 26 | 27 | .DS_Store 28 | .AppleDouble 29 | .LSOverride 30 | 31 | # Thumbnails 32 | ._* 33 | 34 | # Files that might appear in the root of a volume 35 | .DocumentRevisions-V100 36 | .fseventsd 37 | .Spotlight-V100 38 | .TemporaryItems 39 | .Trashes 40 | .VolumeIcon.icns 41 | 42 | # Directories potentially created on remote AFP share 43 | .AppleDB 44 | .AppleDesktop 45 | Network Trash Folder 46 | Temporary Items 47 | .apdisk 48 | -------------------------------------------------------------------------------- /canvas_inline/js/Color.js: -------------------------------------------------------------------------------- 1 | // ——————颜色模块—————— 2 | this.canvas = new Canvas(); 3 | var colorUl = document.getElementById("color_ul"); 4 | var colorLi = colorUl.getElementsByTagName('li'); 5 | 6 | // 初始化颜色 7 | colorDef(colorLi[0]); 8 | 9 | colorUl.addEventListener('click',function(event){ 10 | event = event || window.event; 11 | var target = event.target || window.event.srcElement; 12 | if(target.nodeName.toLowerCase() === 'li'){ 13 | (function(){ 14 | // 清空全部 15 | for( var i = 0; i < colorLi.length; i++ ){ 16 | colorLi[i].style.border = ""; 17 | } 18 | colorDef(target); 19 | })(); 20 | } 21 | }) 22 | function colorDef(obj){ 23 | this.canvas.cxt.strokeStyle = obj.className; 24 | this.canvas.cxt.fillStyle = obj.className; 25 | obj.style.border= "2px solid #fff"; 26 | } -------------------------------------------------------------------------------- /canvas_inline/js/lineWidth.js: -------------------------------------------------------------------------------- 1 | // ——————线宽模块—————— 2 | this.canvas = new Canvas(); 3 | var lineWidthUl = document.getElementById("line_width"); 4 | var lineWidthLi = lineWidthUl.getElementsByTagName('li'); 5 | 6 | // 初始化线宽 7 | lineDef('line_1px', 1); 8 | 9 | lineWidthUl.addEventListener('click',function(event){ 10 | event = event || window.event; 11 | var target = event.target || window.event.srcElement; 12 | // 清空全部 13 | for( var i = 0; i < lineWidthLi.length; i++ ){ 14 | lineWidthLi[i].style.background = ""; 15 | } 16 | if(target.nodeName.toLowerCase() === 'li' || target.nodeName.toLowerCase() === 'img'){ 17 | var lineWidth = target.className.substr(5, 1); 18 | lineDef(target.className, lineWidth); 19 | } 20 | },false) 21 | function lineDef(className, px){ 22 | var oli = document.getElementsByClassName(className); 23 | this.canvas.cxt.lineWidth = px; 24 | oli[0].style.background = "yellow"; 25 | } -------------------------------------------------------------------------------- /canvas_inline/css/style.css: -------------------------------------------------------------------------------- 1 | * { padding: 0; margin: 0; list-style: none; } 2 | body{ background-color: #ABCDEF; } 3 | /*头部 Start*/ 4 | #header{ 5 | font-size: 40px; 6 | width: 1000px; 7 | height: 100px; 8 | margin: 0 auto; 9 | text-align: center; 10 | line-height: 100px; 11 | } 12 | /*头部 End*/ 13 | 14 | /*内容模块 Start*/ 15 | #content{ 16 | width: 1000px; 17 | height: 600px; 18 | background-color: #ccc; 19 | margin: 0 auto; 20 | padding: 10px; 21 | } 22 | /*工具栏 五个 Start*/ 23 | #content #toolsUl { height: 200px; width: 1000px;} 24 | #content #toolsUl li.toolModel{ 25 | background-color:gray; 26 | height: 190px; 27 | width: 199px; 28 | float: left; 29 | border-right: 1px solid #000; 30 | } 31 | /*工具栏 标题*/ 32 | #toolsUl li h3{ text-align: center;padding: 5px; } 33 | 34 | /*图像下的样式*/ 35 | #toolsUl li .ul1{ padding:30px; } 36 | #toolsUl li .ul1 li { list-style:square; padding-bottom:10px; } 37 | #toolsUl li .ul1 li button{ background: gray; border: 1px solid #000; } 38 | #toolsUl li .ul1 li button:hover{ border: 1px solid #fff; } 39 | 40 | /*工具和形状下的样式*/ 41 | .tool_shape_ul{ padding: 30px 20px;} 42 | .tool_shape_ul li{ 43 | float: left; 44 | border: 1px solid dimgray; 45 | margin-right: 1px; 46 | margin-bottom: 10px; 47 | height: 30px; 48 | width: 50px; 49 | text-align: center; 50 | } 51 | .tool_shape_ul li:hover{ border: 1px solid #fff; } 52 | .tool_shape_ul li img{ width: 35px; height: 25px;} 53 | 54 | /*线宽下的样式*/ 55 | #line_width {padding:20px 30px} 56 | #line_width li{ padding-bottom: 5px; } 57 | #line_width li:hover{ border: 1px solid #fff; } 58 | #line_width li img{ width: 139px; } 59 | 60 | /*颜色下的样式*/ 61 | #color_ul { padding: 30px 20px; } 62 | #color_ul li{ 63 | border: 2px solid #000; 64 | height:25px; 65 | width: 25px; 66 | float: left; 67 | margin: 1px; 68 | margin-bottom: 4px; 69 | } 70 | #color_ul li:hover{ border: 2px solid #fff; } 71 | 72 | #color_ul .red{ background: red; } 73 | #color_ul .green{ background: green; } 74 | #color_ul .blue{ background: blue; } 75 | #color_ul .yellow{ background: yellow; } 76 | #color_ul .white{ background: white; } 77 | #color_ul .black{ background: black; } 78 | #color_ul .pink{ background: pink; } 79 | #color_ul .purple{ background: purple; } 80 | #color_ul .orange{ background: orange; } 81 | #color_ul .cyan{ background: cyan; } 82 | 83 | /*工具栏 五个 End*/ 84 | 85 | 86 | 87 | /*画图板 Start*/ 88 | /*画板溢出自适应 Start*/ 89 | #content #over{ width: 1000px; height: 400px; overflow: auto; } 90 | /*画板溢出自适应 End*/ 91 | 92 | #content #canvas{ background-color: #fff; } 93 | #content #canvas:hover{ cursor: crosshair; } 94 | /*画图板 End*/ 95 | 96 | /*内容模块 End*/ 97 | /* 保存图片 */ 98 | #flag{ 99 | position: fixed; 100 | left: 0; 101 | right: 0; 102 | top: 0; 103 | bottom: 0; 104 | background: rgba(0, 0, 0, 0.3); 105 | display: none; 106 | } 107 | #photo{ 108 | border: 1px solid #333; 109 | background: #fff;; 110 | position: absolute; 111 | width: 600px; 112 | height: 400px; 113 | left: 50%; 114 | top: 50%; 115 | margin-left:-300px; 116 | margin-top: -200px; 117 | display: none; 118 | z-index: 99; 119 | } 120 | #photo span{ 121 | position: absolute; 122 | right: 0; 123 | top: 0; 124 | cursor: pointer; 125 | } 126 | 127 | /*底部 Start*/ 128 | #footer{ 129 | width: 1000px; 130 | height: 50px; 131 | margin: 0 auto; 132 | text-align: center; 133 | padding-top: 15px; 134 | } 135 | /*底部 End*/ 136 | -------------------------------------------------------------------------------- /canvas_inline/js/ToolShape.js: -------------------------------------------------------------------------------- 1 | //——————工具模块—————— 2 | // ——————形状模块—————— 3 | this.canvas = new Canvas(); 4 | this.Func = new Func(); 5 | var toolUl = document.getElementById('tool_ul'); 6 | var toolLi = toolUl.getElementsByTagName('li'); 7 | var shapeUl = document.getElementById('shape_ul'); 8 | var shapeLi = shapeUl.getElementsByTagName('li'); 9 | 10 | // 初始化 11 | toolShapeDef(toolLi[0].className); 12 | this.Func.drawBrush(); 13 | var that = this; 14 | 15 | toolUl.addEventListener('click',function(event){ 16 | event = event || window.event; 17 | var target = event.target || window.event.srcElement; 18 | if(target.nodeName.toLowerCase() === 'li' || target.nodeName.toLowerCase() === 'img'){ 19 | switch(target.className){ 20 | case 'tool_brush': 21 | toolShapeDef(target.className); 22 | that.Func.drawBrush(); 23 | break; 24 | case 'tool_eraser': 25 | toolShapeDef(target.className); 26 | that.Func.drawEraser(); 27 | break; 28 | case 'tool_paint': 29 | toolShapeDef(target.className); 30 | that.Func.drawPaint(); 31 | break; 32 | case 'tool_dropper': 33 | toolShapeDef(target.className); 34 | that.Func.drawDropper(); 35 | break; 36 | case 'tool_text': 37 | toolShapeDef(target.className); 38 | that.Func.drawWord(); 39 | break; 40 | case 'tool_magnifier': 41 | toolShapeDef(target.className); 42 | that.Func.drawMagnifier(); 43 | break; 44 | } 45 | } 46 | },false); 47 | 48 | shapeUl.addEventListener('click',function(event){ 49 | event = event || window.event; 50 | var target = event.target || window.event.srcElement; 51 | if(target.nodeName.toLowerCase() === 'li' || target.nodeName.toLowerCase() === 'img'){ 52 | switch(target.className){ 53 | case 'shape_line': 54 | toolShapeDef(target.className); 55 | that.Func.drawLine(); 56 | break; 57 | case 'shape_arc': 58 | toolShapeDef(target.className); 59 | that.Func.drawArc(); 60 | break; 61 | case 'shape_screen': 62 | toolShapeDef(target.className); 63 | that.Func.drawScreen(); 64 | break; 65 | case 'shape_poly': 66 | toolShapeDef(target.className); 67 | that.Func.drawPoly(); 68 | break; 69 | case 'shape_arcfill': 70 | toolShapeDef(target.className); 71 | that.Func.drawArcFill(); 72 | break; 73 | case 'shape_rectangle': 74 | toolShapeDef(target.className); 75 | that.Func.drawRectFill(); 76 | break; 77 | } 78 | } 79 | },false); 80 | 81 | function toolShapeDef(className){ 82 | var oli = document.getElementsByClassName(className); 83 | for( var i = 0; i < toolLi.length; i++ ){ 84 | toolLi[i].style.background = ""; 85 | } 86 | for( var i = 0; i < shapeLi.length; i++ ){ 87 | shapeLi[i].style.background = ""; 88 | } 89 | oli[0].style.background = "yellow"; 90 | } 91 | 92 | // 清空画布 93 | var clear = document.getElementById('clear'); 94 | clear.onclick = function(){ 95 | // 清除画布方法 96 | that.Func.clearPainting(); 97 | } 98 | 99 | var save = document.getElementById('save'); 100 | save.onclick = function(){ 101 | that.Func.saveImg(); 102 | } 103 | 104 | var close = document.getElementById('close'); 105 | close.onclick = function(){ 106 | that.Func.closeSaveImg(); 107 | } 108 | 109 | -------------------------------------------------------------------------------- /canvas_inline/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML5 学习记录——在线画图板 6 | 7 | 8 | 9 | 10 |
11 |
12 | 73 |
74 |
75 | 76 | 您的浏览暂不支持Canvas，请升级您的浏览器。 77 | 78 |
79 |
80 |
81 |
82 | 83 | 84 |
85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | -------------------------------------------------------------------------------- /canvas_inline/js/ToolShapeFunc.js: -------------------------------------------------------------------------------- 1 | (function(window){ 2 | 'use strict'; 3 | 4 | //获取CanvasID 5 | var cvs = document.getElementById("canvas"); 6 | //获取2d对象 7 | var cxt = cvs.getContext("2d"); 8 | // console.log(cvs); 9 | // console.log(cxt); 10 | function Func(){ 11 | var photo = document.getElementById('photo'); 12 | var flag = document.getElementById('flag'); 13 | } 14 | 15 | Func.prototype = { 16 | constructor : Func, 17 | //画笔函数 18 | drawBrush : function(){ 19 | // ——————设置标志位—————— 20 | var flag = 0; 21 | //鼠标按下事件，获取开始点坐标 22 | cvs.onmousedown = function(evt){ 23 | //兼容IE和火狐……等浏览器 24 | evt = window.event ? window.event : evt; 25 | // evt.pageX 为页面上X坐标; cvs.offsetLeft 为画布相对于左上角的X坐标 26 | var startX = evt.pageX - this.offsetLeft; 27 | // evt.pageY 为页面上Y坐标; cvs.offsetTop 为画布相对于左上角的Y坐标 28 | var startY = evt.pageY - this.offsetTop; 29 | //开始路径 30 | cxt.beginPath(); 31 | cxt.moveTo( startX, startY ); 32 | //标志位=1，已触发点击事件 33 | flag = 1; 34 | } 35 | 36 | // 鼠标移动事件，获取lineTo坐标 37 | cvs.onmousemove = function(evt){ 38 | //兼容IE和火狐……等浏览器 39 | evt = window.event ? window.event : evt; 40 | // evt.pageX 为页面上X坐标; cvs.offsetLeft 为画布相对于左上角的X坐标 41 | var endX = evt.pageX - this.offsetLeft; 42 | // evt.pageY 为页面上Y坐标; cvs.offsetTop 为画布相对于左上角的Y坐标 43 | var endY = evt.pageY - this.offsetTop; 44 | //判断是否触发了点击事件 45 | if(flag){ 46 | //画路径 47 | cxt.lineTo( endX, endY ); 48 | cxt.stroke(); 49 | } 50 | 51 | } 52 | 53 | // 鼠标松开事件，关闭路径 54 | cvs.onmouseup = function(){ 55 | flag = 0; 56 | } 57 | 58 | //鼠标移出事件 59 | cvs.onmouseout = function(){ 60 | flag = 0; 61 | } 62 | }, 63 | //橡皮擦函数 64 | drawEraser : function(){ 65 | var eraserFlag = 0; 66 | //鼠标按下事件，开始擦除 67 | cvs.onmousedown = function(evt){ 68 | evt = window.event ? window.event : evt; 69 | var startX = evt.pageX - this.offsetLeft; 70 | var startY = evt.pageY - this.offsetTop; 71 | //擦除函数 72 | cxt.clearRect( startX-cxt.lineWidth, startY-cxt.lineWidth, cxt.lineWidth*2, cxt.lineWidth*2 ); 73 | eraserFlag = 1; 74 | 75 | } 76 | //鼠标移动事件，擦除 77 | cvs.onmousemove = function(evt){ 78 | evt = window.event ? window.event : evt; 79 | var startX = evt.pageX - this.offsetLeft; 80 | var startY = evt.pageY - this.offsetTop; 81 | //判断是否触发了鼠标点击事件 82 | if( eraserFlag ){ 83 | //擦除函数 84 | cxt.clearRect( startX-cxt.lineWidth, startY-cxt.lineWidth, cxt.lineWidth*2, cxt.lineWidth*2 ); 85 | } 86 | } 87 | //鼠标抬起，结束擦除 88 | cvs.onmouseup = function(){ 89 | eraserFlag = 0; 90 | } 91 | //鼠标移开事件 92 | cvs.onmouseout = function(){ 93 | eraserFlag = 0; 94 | } 95 | }, 96 | //油漆桶函数 97 | drawPaint : function(){ 98 | //鼠标按下事件 99 | cvs.onmousedown = function(evt){ 100 | evt = window.event ? window.event : evt; 101 | cxt.fillRect( 0, 0, cvs.width, cvs.height ); 102 | cxt.fill(); 103 | } 104 | //注销鼠标抬起，鼠标移动，鼠标移开事件 105 | cxt.onmouseup = null; 106 | cxt.onmousemove = null; 107 | cxt.onmouseout = null; 108 | }, 109 | //吸管函数 110 | drawDropper : function (){ 111 | var that = this; 112 | //鼠标按下事件 113 | cvs.onmousedown = function(evt){ 114 | var toolUl = document.getElementById('tool_ul'); 115 | var toolLi = toolUl.getElementsByTagName('li'); 116 | evt = window.event ? window.event : evt; 117 | var startX = evt.pageX - this.offsetLeft; 118 | var startY = evt.pageY - this.offsetTop; 119 | // 获取按下的位置的图像信息,是一个对象 120 | var obj = cxt.getImageData( startX, startY, 1, 1 ); 121 | // 获取Data，在data数组中，每四个元素表示一个像素点,这四个取值范围都为0~255 122 | // obj.data = [ 123 | // 红, 绿, 蓝色, 透明度, 124 | // 红, 绿, 蓝色, 透明度, 125 | // 红, 绿, 蓝色, 透明度 126 | // ]; 127 | // 将获取到的rgb值赋给color 128 | var color = "rgb( "+obj.data[0]+", "+obj.data[1]+", "+obj.data[2]+" )"; 129 | cxt.strokeStyle = color; 130 | cxt.fillStyle = color; 131 | for( var i = 0; i < toolLi.length; i++ ){ 132 | toolLi[i].style.background = ""; 133 | } 134 | toolShapeDef(toolLi[0].className); 135 | that.drawBrush(); 136 | } 137 | //注销其他事件 138 | cxt.onmouseup = null; 139 | cxt.onmousemove = null; 140 | cxt.onmouseout = null; 141 | }, 142 | //文本函数 143 | drawWord : function(){ 144 | var startX = 0; 145 | var startY = 0; 146 | //鼠标按下事件 147 | cvs.onmousedown = function(evt){ 148 | evt = window.event ? window.event : evt; 149 | startX = evt.pageX - this.offsetLeft; 150 | startY = evt.pageY - this.offsetTop; 151 | // prompt window自有函数，弹窗函数，可接受字符串的输入。 152 | var txt = prompt( "请输入文字？", "" ); 153 | // 设置文本样式 154 | cxt.font = "30px 楷体"; 155 | //文本填充函数 156 | if( txt != null ){ 157 | cxt.fillText( txt, startX, startY ); 158 | } 159 | } 160 | //注销其他鼠标事件 161 | cvs.onmouseup = null; 162 | cvs.onmousemove = null; 163 | cvs.onmouseout = null; 164 | }, 165 | //放大镜函数 166 | drawMagnifier : function(){ 167 | var reg = "^[0-9]{1,3}$"; 168 | var value = prompt( "请输入需要调整的缩放比例", "100" ); 169 | var newW = cvs.width * value / 100; 170 | var newH = cvs.height * value / 100; 171 | if( value.match(reg) ){ 172 | cvs.style.width = parseInt( newW ); 173 | cvs.style.height = parseInt( newH ); 174 | }else{ 175 | alert("请输入正确的数值！！！"); 176 | } 177 | }, 178 | //画线 179 | drawLine : function(){ 180 | //鼠标按下事件，获取开始点坐标 181 | cvs.onmousedown = function(evt){ 182 | //兼容IE和火狐……等浏览器 183 | evt = window.event ? window.event : evt; 184 | // evt.pageX 为页面上X坐标; cvs.offsetLeft 为画布相对于左上角的X坐标 185 | var startX = evt.pageX - this.offsetLeft; 186 | // evt.pageY 为页面上Y坐标; cvs.offsetTop 为画布相对于左上角的Y坐标 187 | var startY = evt.pageY - this.offsetTop; 188 | //开始路径 189 | cxt.beginPath(); 190 | cxt.moveTo( startX, startY ); 191 | } 192 | // 鼠标松开事件，关闭路径 193 | cvs.onmouseup = function(evt){ 194 | //兼容IE和火狐……等浏览器 195 | evt = window.event ? window.event : evt; 196 | // evt.pageX 为页面上X坐标; cvs.offsetLeft 为画布相对于左上角的X坐标 197 | var endX = evt.pageX - this.offsetLeft; 198 | // evt.pageY 为页面上Y坐标; cvs.offsetTop 为画布相对于左上角的Y坐标 199 | var endY = evt.pageY - this.offsetTop; 200 | //画路径 201 | cxt.lineTo( endX, endY ); 202 | cxt.closePath(); 203 | cxt.stroke(); 204 | } 205 | // 注销鼠标移动事件 206 | cvs.onmousemove = null; 207 | 208 | //注销鼠标移出事件 209 | cvs.onmouseout = null; 210 | }, 211 | //画圆 212 | drawArc : function (){ 213 | //获取圆心,鼠标按下事件 214 | var startX = 0; 215 | var startY = 0; 216 | cvs.onmousedown = function(evt){ 217 | evt = window.event ? window.event : evt; 218 | startX = evt.pageX - this.offsetLeft; 219 | startY = evt.pageY - this.offsetTop; 220 | } 221 | //获取半径,鼠标松开事件 222 | cvs.onmouseup = function(evt){ 223 | evt = window.event ? window.event : evt; 224 | var endX = evt.pageX - this.offsetLeft; 225 | var endY = evt.pageY - this.offsetTop; 226 | //求半径，利用c*c = a*a + b*b， 227 | var r = Math.sqrt( (endX-startX)*(endX-startX) + (endY-startY)*(endY-startY) ); 228 | //画圆 229 | cxt.beginPath(); 230 | cxt.arc( startX, startY, r, 0, 360, false ); 231 | cxt.closePath(); 232 | cxt.stroke(); 233 | } 234 | //注销鼠标移开和鼠标移动事件 235 | cvs.onmousemove = null; 236 | cvs.onmouseout = null; 237 | }, 238 | //画方框 239 | drawScreen : function (){ 240 | //获取起始点坐标，鼠标点击事件 241 | var startX = 0; 242 | var startY = 0; 243 | cvs.onmousedown = function(evt){ 244 | evt = window.event ? window.event : evt; 245 | startX = evt.pageX - this.offsetLeft; 246 | startY = evt.pageY - this.offsetTop; 247 | } 248 | //获取长宽,鼠标松开事件 249 | cvs.onmouseup = function(evt){ 250 | evt = window.event ? window.event : evt; 251 | var endX = evt.pageX - this.offsetLeft; 252 | var endY = evt.pageY - this.offsetTop; 253 | //画方框 254 | cxt.beginPath(); 255 | cxt.rect( startX, startY, endX-startX, endY-startY ); 256 | cxt.closePath(); 257 | cxt.stroke(); 258 | } 259 | //注销鼠标移出和鼠标移动事件 260 | cxt.onmousemove = null; 261 | cxt.onmouseout = null; 262 | }, 263 | //画三角形 264 | drawPoly : function (){ 265 | //三角形中心坐标，鼠标按下事件 266 | var startX = 0; 267 | var startY = 0; 268 | cvs.onmousedown = function(evt){ 269 | evt = window.event ? window.event : evt; 270 | startX = evt.pageX - this.offsetLeft; 271 | startY = evt.pageY - this.offsetTop; 272 | } 273 | //鼠标松开事件，求得三个点的坐标 274 | cvs.onmouseup = function(evt){ 275 | evt = window.event ? window.event : evt; 276 | var endX = evt.pageX - this.offsetLeft; 277 | var endY = evt.pageY - this.offsetTop; 278 | //画三角形 279 | cxt.beginPath(); 280 | //顶点坐标A ( startX, 2*startY-endY ) 281 | cxt.moveTo( startX, 2*startY-endY ); 282 | //左下角坐标C ( endX, endY ) 283 | cxt.lineTo( endX, endY ); 284 | //右下角坐标B ( 2*startX-endX, endY ) 285 | cxt.lineTo( 2*startX-endX, endY ); 286 | cxt.closePath(); 287 | cxt.stroke(); 288 | } 289 | //注销事件 290 | cvs.onmouseout = null; 291 | cvs.onmousemove = null; 292 | }, 293 | //画圆形(填充) 294 | drawArcFill : function(){ 295 | //获取圆心,鼠标按下事件 296 | var startX = 0; 297 | var startY = 0; 298 | cvs.onmousedown = function(evt){ 299 | evt = window.event ? window.event : evt; 300 | startX = evt.pageX - this.offsetLeft; 301 | startY = evt.pageY - this.offsetTop; 302 | } 303 | //获取半径,鼠标松开事件 304 | cvs.onmouseup = function(evt){ 305 | evt = window.event ? window.event : evt; 306 | var endX = evt.pageX - this.offsetLeft; 307 | var endY = evt.pageY - this.offsetTop; 308 | //求半径，利用c*c = a*a + b*b， 309 | var r = Math.sqrt( (endX-startX)*(endX-startX) + (endY-startY)*(endY-startY) ); 310 | //画圆 311 | cxt.beginPath(); 312 | cxt.arc( startX, startY, r, 0, 360, false ); 313 | cxt.closePath(); 314 | cxt.fill(); 315 | } 316 | //注销鼠标移开和鼠标移动事件 317 | cvs.onmousemove = null; 318 | cvs.onmouseout = null; 319 | }, 320 | //画方形(填充) 321 | drawRectFill : function (){ 322 | //获取起始点坐标，鼠标点击事件 323 | var startX = 0; 324 | var startY = 0; 325 | cvs.onmousedown = function(evt){ 326 | evt = window.event ? window.event : evt; 327 | startX = evt.pageX - this.offsetLeft; 328 | startY = evt.pageY - this.offsetTop; 329 | } 330 | //获取长宽,鼠标松开事件 331 | cvs.onmouseup = function(evt){ 332 | evt = window.event ? window.event : evt; 333 | var endX = evt.pageX - this.offsetLeft; 334 | var endY = evt.pageY - this.offsetTop; 335 | //画方框 336 | cxt.beginPath(); 337 | cxt.rect( startX, startY, endX-startX, endY-startY ); 338 | cxt.closePath(); 339 | cxt.fill(); 340 | } 341 | //注销鼠标移出和鼠标移动事件 342 | cxt.onmousemove = null; 343 | cxt.onmouseout = null; 344 | }, 345 | // 清空画布 346 | clearPainting : function(){ 347 | cxt.clearRect( 0, 0, cvs.width, cvs.height ); 348 | }, 349 | // 保存图片 350 | saveImg : function(){ 351 | var imgSave = document.getElementById('img_save'); 352 | var imgData = cvs.toDataURL(); 353 | imgSave.src = imgData; 354 | 355 | photo.style.display = 'block'; 356 | flag.style.display = 'block'; 357 | }, 358 | // 关闭保存图片 359 | closeSaveImg : function(){ 360 | photo.style.display = 'none'; 361 | flag.style.display = 'none'; 362 | } 363 | } 364 | 365 | window.Func = Func; 366 | })(window); --------------------------------------------------------------------------------