js实现一个canvas画板效果代码
代码语言:html
所属分类:布局界面
代码描述:js实现一个canvas画板效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background: #A5A5A5; font: 16px/1.5 "Avenir", "Arial", "Hiragino Sans GB", "\5FAE\8F6F\96C5\9ED1", "\5b8b\4f53", "sans-serif"; } @font-face { font-family: "iconfont"; src: url("https://at.alicdn.com/t/font_1458104486_2104871.eot"); src: url("https://at.alicdn.com/t/font_1458104486_2104871.eot?#iefix") format("embedded-opentype"), url("https://at.alicdn.com/t/font_1458104486_2104871.woff") format("woff"), url("https://at.alicdn.com/t/font_1458104486_2104871.ttf") format("truetype"), url("https://at.alicdn.com/t/font_1458104486_2104871.svg#iconfont") format("svg"); } .textarea { position: absolute; left: 50%; top: 50%; z-index: 9999; padding: 5px; width: 200px; height: 80px; background: transparent; border: 1px solid #404040; outline: none; font: inherit; color: #f4f4f4; resize: none; } .paint { position: absolute; left: 50%; top: 50%; margin: -254px 0 0 -354px; width: 700px; height: 500px; background: #282828; border: 4px solid #8A8A8A; } .importImage { display: none; } .paint-area { float: left; position: relative; } .paint-show {} .paint-draw { position: absolute; right: 0; top: 0; } .paint-tools { float: left; position: relative; width: 48px; height: 100%; background: #535353; border-right: 2px solid #8a8a8a; } .paint-tools-item { display: block; position: relative; margin: 7px auto 0; width: 28px; height: 28px; border: 1px solid transparent; font: 20px/28px "iconfont"; text-align: center; color: #DCDCDC; cursor: pointer; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; -webkit-text-stroke-width: 0.2px; text-stroke-width: 0.2px; } .paint-tools-item:hover, .paint-tools-active { background: #747474; border-color: #919191; } .paint-tools-pencil:before { font-size: 18px; content: "\e608"; } .paint-tools-strokeRect:before { font-size: 26px; content: "\e607"; } .paint-tools-fillRect:before { display: block; margin-top: -1px; content: "\e605"; } .paint-tools-strokeArc:before { font-size: 22px; content: "\e606"; } .paint-tools-fillArc:before { display: block; margin-top: -2px; font-size: 18px; content: "\e604"; } .paint-tools-image:before { display: block; margin-top: -1px; content: "\e603"; } .paint-tools-palette:before { display: block; margin-top: -2px; font-size: 25px; content: "\e600"; } .paint-tools-streak:before { font-size: 26px; content: "\e609"; } .paint-tools-rubber:before { content: "\e602"; } .paint-tools-empty:before { content: "\e601"; } .paint-tools-text:before { content: "\e60a"; } .paint-tools-save:before { content: "\e60c"; } .paint-tools-download:before { display: block; margin-top: -2px; font-size: 24px; content: "\e60b"; } .dialog { display: none; position: absolute; left: 100%; top: 10px; z-index: 90; margin-left: -8px; padding: 3px; width: 92px; background: #606060; border: 1px solid #3A3A3A; } .dialog-item { float: left; position: relative; margin: 2px; width: 24px; height: 24px; background: #747474; border: 1px solid transparent; cursor: pointer; } .dialog-item:hover, .dialog-item-active { border-color: #919191; } .streak-list .dialog-item:before { position: absolute; left: 50%; top: 50%; margin: -1px 0 0 -9px; width: 18px; height: 2px; overflow: hidden; background: #3A3A3A; content: ' '; } .streak-list .dialog-item:nth-child(1):before { height: 1px; } .streak-list .dialog-item:nth-child(2):before { height: 2px; } .streak-list .dialog-item:nth-child(3):before { margin-top: -1px; height: 3px; } .streak-list .dialog-item:nth-child(4):before { margin-top: -2px; height: 4px; } .streak-list .dialog-item:nth-child(5):before { margin-top: -2px; height: 5px; } .streak-list .dialog-item:nth-child(6):before { margin-top: -3px; height: 6px; } </style> </head> <body > <div class="paint" id="paint"> <div class="paint-tools"> <!-- 线条 --> <i class="paint-tools-item paint-tools-pencil paint-tools-active" title="画笔" data-action="pencil"></i> <!-- 文字 --> <i class="paint-tools-item paint-tools-text" title="文字" data-action="text"></i> <!-- 空心矩形 --> <i class="paint-tools-item paint-tools-strokeRect" title="空心矩形" data-action="strokeRect"></i> <!-- 实心矩形 --> <i class="paint-tools-item paint-tools-fillRect" title="实心矩形" data-action="fillRect"></i> <!-- 空心圆 --> <i class="paint-tools-item paint-tools-strokeArc" title="空心圆" data-action="strokeArc"></i> <!-- 实心圆 --> <i class="paint-tools-item paint-tools-fillArc" title="实心圆" data-action="fillArc"></i> <!-- 图片绘制 --> <!-- <i class="paint-tools-item paint-tools-image" title="图片" data-action="image"></i> --> <!-- 调色板 --> <i class="paint-tools-item paint-tools-palette" title="调色板" data-action="palette"></i> <!-- 线条粗细 --> <i class="paint-tools-item paint-tools-streak" title="线条粗细" data-action="streak"></i> <!-- 橡皮擦 --> <i class="paint-tools-item paint-tools-rubber" title="橡皮擦" data-action="rubber"></i> <!-- 清空画图板 --> <i class="paint-tools-item paint-tools-empty" title="清空画图板" data-action="empty"></i> <!-- 存为图像 --> <!-- <i class="paint-tools-item paint-tools-save" title="存为图像" data-action="save"></i> --> <!-- 下载图像 --> <i class="paint-tools-item paint-tools-download" title="下载图像" data-action="download"></i> <!-- 线条容器 --> <div class="dialog streak-list"></div> <!-- 颜色容器 --> <div class="dialog palette-list"></div> </div> <div class="paint-area"> <canvas width="650" height="500" class="paint-show"></canvas> <canvas width="650" height="500" cl.........完整代码请登录后点击上方下载按钮下载查看
网友评论0