- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>
- Canvas画图板
- </title>
- <style type="text/css">
- body{ background-color: #eee } #can{ display: block; background-color:
- #fff; border: 1px solid #ccc; border-radius: 5px; margin: 100px auto 0;
- cursor:pointer; } .tools{ width: 600px; height: 120px; margin: 10px auto
- 0; } .tools .title{ width: 600px; height: 20px; line-height: 20px; text-indent:
- 10px; } .tools .tools-wrap{ width: 600px; height: 100px; } .tools .tools-wrap>div{
- width: 100px; height: 100px; float: left; } .tools .tools-wrap>div>a{ display:
- block; width: 100px; height: 100px; } .tools .tools-wrap>div>a>.icon{ display:
- block; background: #fff; border-left: 1px solid #ccc; box-sizing: border-box;
- border-radius: 5px; } .tools .tools-wrap>div>a>.icon.active{ box-shadow:
- 0 2px 5px #000; margin-top: -2px; } .colorBoard,.thickness{ position: absolute;
- width: 30px; height: 180px; } .colorBoard>li{ list-style: none; width:
- 30px; height: 30px; cursor: pointer; } .thickness .progress{ width: 4px;
- height: 180px; background-color: #9324A0; border-radius: 4px; } .thickness
- .bar{ position: absolute; top: 0; left: -8px; width: 20px; height: 20px;
- background-color: #9324A0; cursor: pointer; border-radius: 50%; } .thickness>span{
- position: absolute; top: -20px; left: 0; } .thickness>span:nth-child(2){
- top: 195px; } .clear{ position: absolute; top: 450px; } .input{ position:
- absolute; width: 300px; height: 30px; border: 1px dotted #000; outline:
- none; padding: 10px; }
- </style>
- </head>
- <body>
- <canvas id="can" width="500" height="500">
- 您的浏览器不支持Canvas,请更换浏览器!
- </canvas>
- <!--工具栏-->
- <div class="tools">
- <div class="title">
- 工具栏
- </div>
- <div class="tools-wrap">
- <div>
- <a href="javascript:;" title="荧光笔">
- <canvas class="icon" width="100" height="100">
- </canvas>
- </a>
- </div>
- <!-- <div><a href="javascript:;" title="自由线"><canvas class="icon" width="100" height="100"></canvas></a></div> -->
- <div>
- <a href="javascript:;" title="直线">
- <canvas class="icon" width="100" height="100">
- </canvas>
- </a>
- </div>
- <div>
- <a href="javascript:;" title="矩形">
- <canvas class="icon" width="100" height="100">
- </canvas>
- </a>
- </div>
- <div>
- <a href="javascript:;" title="椭圆">
- <canvas class="icon" width="100" height="100">
- </canvas>
- </a>
- </div>
- <div>
- <a href="javascript:;" title="文字">
- <canvas class="icon" width="100" height="100">
- </canvas>
- </a>
- </div>
- <div>
- <a href="javascript:;" title="橡皮擦">
- <canvas class="icon" width="100" height="100">
- </canvas>
- </a>
- </div>
- </div>
- </div>
- <!--颜色板-->
- <ul class="colorBoard">
- <li style="background-color: red">
- </li>
- <li style="background-color: green">
- </li>
- <li style="background-color: blue">
- </li>
- <li style="background-color: #E88218">
- </li>
- <li style="background-color: #ccc">
- </li>
- <li style="background-color: #985C5C">
- </li>
- </ul>
- <!--粗细-->
- <div class="thickness">
- <span>
- 1
- </span>
- <span>
- 10
- </span>
- <div class="progress">
- </div>
- <div class="bar">
- </div>
- </div>
- <button class="clear">
- 清除全屏
- </button>
- <script type="text/javascript">
- var tool = {
- "pen": {
- "strokeStyle": "#6853DA",
- "fillStyle": "#EA1FC8",
- "lineWidth": 3,
- "lineJoin": "round",
- "shadowBlur": 5,
- "shadowColor": "#ECE60D"
- },
- /*"curve":{
- "strokeStyle":"#0f0",
- "fillStyle":"#0f0",
- "lineWidth":5
- },*/
- "line": {
- "strokeStyle": "#000",
- "fillStyle": "#000",
- "lineWidth": 5
- },
- "rectangle": {
- "strokeStyle": "#6457D4",
- "fillStyle": "#3A29CA",
- "lineWidth": 2
- },
- "ellipse": {
- "strokeStyle": "#f00",
- "fillStyle": "#f00",
- "lineWidth": 1
- },
- "text": {
- "font": "bold 48px 微软雅黑",
- "textAlign": "center",
- "fillStyle": "#AF25D2"
- },
- "eraser": {
- "strokeStyle": "#ccc",
- "lineWidth": 3
- }
- }
- var oUl = document.getElementsByClassName("colorBoard")[0];
- var oLi = oUl.getElementsByTagName("li");
- var oThickness = document.getElementsByClassName("thickness")[0];
- var oBar = document.getElementsByClassName("bar")[0];
- var oClear = document.getElementsByClassName("clear")[0];
- var oDiv = document.getElementsByClassName("tools-wrap")[0];
- var divList = oDiv.getElementsByTagName("div");
- var a = document.getElementsByTagName("a");
- var len = divList.length;
- var cans = document.getElementsByClassName("icon");
- var ctxs = [];
- var canvas = document.getElementById("can");
- var context = canvas.getContext("2d");
- var _x, _y, _dist, _top, type = 0,
- color = "#000",
- lineWidth = 1,
- oInput;
- //工具栏
- for (var i = 0; i < len; i++) {
- var ctx = cans[i].getContext("2d");
- ctxs.push(ctx);
- switch (i) {
- case 0:
- ctxs[i].beginPath();
- ctxs[i].strokeStyle = tool.pen.strokeStyle;
- ctxs[i].fillStyle = tool.pen.fillStyle;
- ctxs[i].lineStyle = tool.pen.lineStyle;
- ctxs[i].lineWidth = tool.pen.lineWidth;
- ctxs[i].moveTo(50, 20);
- ctxs[i].lineTo(60, 30);
- ctxs[i].lineTo(40, 80);
- ctxs[i].lineTo(30, 70);
- ctxs[i].moveTo(30, 70);
- ctxs[i].lineTo(30, 90);
- ctxs[i].lineTo(40, 80);
- ctxs[i].lineJoin = tool.pen.lineJoin;
- ctxs[i].shadowBlur = tool.pen.shadowBlur;
- ctxs[i].shadowColor = tool.pen.shadowColor;
- ctxs[i].closePath();
- ctxs[i].stroke();
- ctxs[i].fill();
- break;
- /*case 1:
- ctxs[i].strokeStyle = tool.curve.strokeStyle;
- ctxs[i].lineWidth = tool.curve.lineWidth;
- ctxs[i].bezierCurveTo(20,80,70,80,80,20);
- ctxs[i].stroke();
- break;*/
- case 1:
- ctxs[i].beginPath();
- ctxs[i].strokeStyle = tool.line.strokeStyle;
- ctxs[i].lineWidth = tool.line.lineWidth;
- ctxs[i].moveTo(20, 80);
- ctxs[i].lineTo(80, 20);
- ctxs[i].closePath();
- ctxs[i].stroke();
- break;
- case 2:
- ctxs[i].beginPath();
- ctxs[i].strokeStyle = tool.rectangle.strokeStyle;
- ctxs[i].fillStyle = tool.rectangle.fillStyle;
- ctxs[i].lineWidth = tool.rectangle.lineWidth;
- ctxs[i].strokeRect(20, 20, 60, 60);
- ctxs[i].fillRect(20, 20, 60, 60);
- ctxs[i].closePath();
- ctxs[i].stroke();
- ctxs[i].fill();
- break;
- case 3:
- ctxs[i].beginPath();
- ctxs[i].strokeStyle = tool.ellipse.strokeStyle;
- ctxs[i].fillStyle = tool.ellipse.fillStyle;
- ctxs[i].lineWidth = tool.ellipse.lineWidth;
- ctxs[i].arc(50, 50, 30, 0, 2 * Math.PI, false);
- ctxs[i].closePath();
- ctxs[i].stroke();
- ctxs[i].fill();
- break;
- case 4:
- ctxs[i].beginPath();
- ctxs[i].font = tool.text.font;
- ctxs[i].textAlign = tool.text.textAlign;
- ctxs[i].fillStyle = tool.text.fillStyle;
- ctxs[i].fillText("T", 50, 70);
- ctxs[i].closePath();
- break;
- case 5:
- ctxs[i].beginPath();
- ctxs[i].strokeStyle = tool.eraser.strokeStyle;
- ctxs[i].fillStyle = tool.eraser.fillStyle;
- ctxs[i].lineWidth = tool.eraser.lineWidth;
- ctxs[i].strokeRect(30, 20, 40, 60);
- ctxs[i].rotate(Math.PI / 4);
- ctxs[i].closePath();
- ctxs[i].stroke();
- break;
- }
- }
- //颜色板
- oUl.style.left = canvas.offsetLeft - 100 + "px";
- oUl.style.top = 150 + "px";
- oThickness.style.left = canvas.offsetLeft + canvas.offsetWidth + 100 + "px";
- oThickness.style.top = 180 + "px";
- oClear.style.left = canvas.offsetLeft + canvas.offsetWidth + 80 + "px";
- //改变颜色
- for (var i = 0; i < oLi.length; i++) {
- oLi[i].onclick = function() {
- color = this.style.backgroundColor;
- }
- }
- //改变宽度
- oBar.onmousedown = function(ev) {
- var This = this;
- ev = ev || window.event;
- _dist = ev.offsetY;
- this.onmousemove = function(ev) {
- ev = ev || window.event;
- _top = ev.offsetY + this.offsetTop - _dist;
- if (_top <= 0 || _top >= 160) {
- This.onmousemove = null;
- }
- This.style.top = _top + "px";
- }
- this.onmouseup = function(ev) {
- ev = ev || window.event;
- This.onmousemove = null;
- This.onmouseup = null;
- var long = This.offsetTop;
- if (long <= 0) {
- long = 0;
- }
- if (long >= 160) {
- long = 160;
- }
- lineWidth = Math.round(long / 16);
- }
- }
- //改变type----工具类型
- for (var i = 0; i < len; i++) {
- cans[i].index = i;
- cans[i].onclick = function() {
- type = this.index;
- //画图板画图
- switch (type) {
- case 0:
- canvas.onmousedown = function(ev) {
- var This = this;
- ev = ev || window.event;
- _x = ev.offsetX;
- _y = ev.offsetY;
- context.save();
- context.beginPath();
- context.fillStyle = color;
- context.arc(_x, _y, lineWidth / 2, 0, 2 * Math.PI, false);
- context.shadowBlur = 5;
- context.shadowColor = color;
- context.closePath();
- context.fill();
- context.restore();
- this.onmousemove = function(ev) {
- context.save();
- context.beginPath();
- context.strokeStyle = color;
- context.lineJoin = "round";
- context.lineCap = "round";
- context.shadowBlur = 5;
- context.shadowColor = color;
- context.lineWidth = lineWidth;
- context.moveTo(_x, _y);
- context.lineTo(ev.offsetX, ev.offsetY);
- _x = ev.offsetX;
- _y = ev.offsetY;
- context.closePath();
- context.stroke();
- context.restore();
- }
- this.onmouseup = function() {
- This.onmousemove = null;
- This.onmouseup = null;
- }
- };
- break;
- case 1:
- canvas.onmousedown = function(ev) {
- var This = this;
- ev = ev || window.event;
- _x = ev.offsetX;
- _y = ev.offsetY;
- context.save();
- context.beginPath();
- context.fillStyle = color;
- context.arc(_x, _y, lineWidth / 2, 0, 2 * Math.PI, false);
- context.closePath();
- context.fill();
- context.restore();
- this.onmouseup = function(ev) {
- context.save();
- context.beginPath();
- context.strokeStyle = color;
- context.lineJoin = "round";
- context.lineCap = "round";
- context.lineWidth = lineWidth;
- context.moveTo(_x, _y);
- context.lineTo(ev.offsetX, ev.offsetY);
- _x = ev.offsetX;
- _y = ev.offsetY;
- context.closePath();
- context.stroke();
- context.restore();
- This.onmouseup = null;
- }
- };
- break;
- case 2:
- canvas.onmousedown = function(ev) {
- var This = this;
- ev = ev || window.event;
- _x = ev.offsetX;
- _y = ev.offsetY;
- context.save();
- context.beginPath();
- context.fillStyle = color;
- context.arc(_x, _y, lineWidth / 2, 0, 2 * Math.PI, false);
- context.closePath();
- context.fill();
- context.restore();
- this.onmouseup = function(ev) {
- context.save();
- context.beginPath();
- context.strokeStyle = color;
- context.fillStyle = color;
- context.lineWidth = lineWidth;
- context.strokeRect(_x, _y, ev.offsetX - _x, ev.offsetY - _y);
- context.fillRect(_x, _y, ev.offsetX - _x, ev.offsetY - _y);
- _x = ev.offsetX;
- _y = ev.offsetY;
- context.closePath();
- context.stroke();
- context.fill();
- context.restore();
- This.onmouseup = null;
- }
- };
- break;
- case 3:
- canvas.onmousedown = function(ev) {
- var This = this;
- ev = ev || window.event;
- _x = ev.offsetX;
- _y = ev.offsetY;
- context.save();
- context.beginPath();
- context.fillStyle = color;
- context.arc(_x, _y, lineWidth / 2, 0, 2 * Math.PI, false);
- context.closePath();
- context.fill();
- context.restore();
- this.onmouseup = function(ev) {
- context.save();
- context.beginPath();
- context.fillStyle = color;
- context.arc(_x, _y, Math.sqrt(Math.pow(ev.offsetX - _x, 2) + Math.pow(ev.offsetY - _y, 2)), 0, 2 * Math.PI, false);
- _x = ev.offsetX;
- _y = ev.offsetY;
- context.closePath();
- context.fill();
- context.restore();
- This.onmouseup = null;
- }
- };
- break;
- case 4:
- canvas.onclick = function(ev) {
- ev = ev || window.event;
- _x = ev.offsetX;
- _y = ev.offsetY;
- oInput = document.createElement("input");
- oInput.className = "input";
- oInput.style.top = _y + this.offsetTop + "px";
- oInput.style.left = _x + this.offsetLeft + "px";
- document.body.appendChild(oInput);
- };
- document.onkeydown = function(ev) {
- ev = ev || window.event;
- if (ev.keyCode == 13) {
- var text = oInput.value;
- document.body.removeChild(oInput);
- context.save();
- context.beginPath();
- context.fillStyle = color;
- context.font = "bold " + lineWidth * 12 + "px 微软雅黑";
- context.textAlign = "left";
- context.fillText(text, _x, _y);
- context.closePath();
- context.restore();
- }
- }
- break;
- case 5:
- canvas.onmousedown = function(ev) {
- var This = this;
- ev = ev || window.event;
- _x = ev.offsetX;
- _y = ev.offsetY;
- context.save();
- context.beginPath();
- context.fillStyle = "#fff";
- context.arc(_x, _y, lineWidth / 2, 0, 2 * Math.PI, false);
- context.closePath();
- context.fill();
- context.restore();
- this.onmousemove = function(ev) {
- context.save();
- context.beginPath();
- context.strokeStyle = "#fff";
- context.lineJoin = "round";
- context.lineCap = "round";
- context.lineWidth = lineWidth;
- context.moveTo(_x, _y);
- context.lineTo(ev.offsetX, ev.offsetY);
- _x = ev.offsetX;
- _y = ev.offsetY;
- context.closePath();
- context.stroke();
- context.restore();
- }
- this.onmouseup = function() {
- This.onmousemove = null;
- This.onmouseup = null;
- }
- };
- break;
- }
- }
- }
- //清除全屏
- oClear.onclick = function() {
- context.clearRect(0, 0, canvas.width, canvas.height);
- }
- </script>
- </body>
- </html>
来源: http://www.qdfuns.com/notes/44356/09dc36ed09dba66ea75803cc7382be3c.html