```javascript
<html lang="en"><head>
? ? ? ? <meta charset="UTF-8">
? ? ? ? <title>畫板</title>
? ? ? ? <style>
? ? ? ? ? ? ? ? body,html{ width: 100%; height: 100%; background-repeat: no-repeat; background-position: 0 0 no-repeat; background-size: cover; overflow: hidden; font-family: "Microsoft yahei"; background-color: #fff;-webkit-user-select: none;?
? -moz-user-select:none;?
? -o-user-select:none;?
? -ms-user-select:none; }
? ? ? ? ? ? ? ? li{ list-style-type: none; }
? ? ? ? ? ? ? ? ul{ padding-left: 10px }
? ? ? ? ? ? ? ? h1{
? ? ? ? ? ? ? ? ? ? position:fixed;
? ? ? ? ? ? ? ? ? ? left:15px;
? ? ? ? ? ? ? ? ? ? top:5px;
? ? ? ? ? ? ? ? ? ? width:250px;
? ? ? ? ? ? ? ? ? ? height:60px;
? ? ? ? ? ? ? ? ? ? color: #ff5e83;
? ? ? ? ? ? ? ? ? ? font-size:26px;
? ? ? ? ? ? ? ? ? ? line-height:60px;
? ? ? ? ? ? ? ? ? ? text-align:center;
? ? ? ? ? ? ? ? ? ? background-color:;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? canvas{ position: fixed; left: 280px; top: 5px; display: block; cursor: pointer; background-color: #FFFFFF; border: 1px solid #CCCCCC; }
? ? ? ? ? ? ? ? .container{
? ? ? ? ? ? ? ? ? ? width:250px;
? ? ? ? ? ? ? ? ? ? height:60px;
? ? ? ? ? ? ? ? ? ? position:fixed;
? ? ? ? ? ? ? ? ? ? left:15px;
? ? ? ? ? ? ? ? ? ? top:70px;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? .container h2{
? ? ? ? ? ? ? ? ? ? width:100%;
? ? ? ? ? ? ? ? ? ? height:60px;
? ? ? ? ? ? ? ? ? ? font-size:22px;
? ? ? ? ? ? ? ? ? ? text-align:center;
? ? ? ? ? ? ? ? ? ? color: #ff377e;
? ? ? ? ? ? ? ? ? ? font-weight:normal;
? ? ? ? ? ? ? ? ? ? line-height:60px;
? ? ? ? ? ? ? ? ? ? border-bottom:1px solid #000;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? .container h3{
? ? ? ? ? ? ? ? ? ? width:100%;
? ? ? ? ? ? ? ? ? ? height:30px;
? ? ? ? ? ? ? ? ? ? font-size:18px;
? ? ? ? ? ? ? ? ? ? text-align:center;
? ? ? ? ? ? ? ? ? ? color: #41b1ff;
? ? ? ? ? ? ? ? ? ? font-weight:normal;
? ? ? ? ? ? ? ? ? ? line-height:30px;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? .row{ width: 100%; height: auto; background-color: rgba(192,192,192,0.50); overflow: hidden;? ? ? ? }
? ? ? ? ? ? ? ? .type{
? ? ? ? ? ? ? ? ? ? width:100%;
? ? ? ? ? ? ? ? ? ? height:auto;
? ? ? ? ? ? ? ? ? ? margin:20px 0;
? ? ? ? ? ? ? ? ? ? padding-bottom:10px;
? ? ? ? ? ? ? ? ? ? border-bottom:1px solid #fff;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? .type:after{
? ? ? ? ? ? ? ? ? ? content:"";
? ? ? ? ? ? ? ? ? ? display:block;
? ? ? ? ? ? ? ? ? ? clear:both;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? .type li{
? ? ? ? ? ? ? ? ? ? float:left;
? ? ? ? ? ? ? ? ? ? width:90px;
? ? ? ? ? ? ? ? ? ? height:45px;
? ? ? ? ? ? ? ? ? ? margin:0 auto;
? ? ? ? ? ? ? ? ? ? background-color:#0078ff;
? ? ? ? ? ? ? ? ? ? color:#fff;
? ? ? ? ? ? ? ? ? ? font-size:18px;
? ? ? ? ? ? ? ? ? ? line-height:45px;
? ? ? ? ? ? ? ? ? ? text-align:center;
? ? ? ? ? ? ? ? ? ? margin-bottom:15px;
? ? ? ? ? ? ? ? ? ? border-radius:5px;
? ? ? ? ? ? ? ? ? ? cursor:pointer;
? ? ? ? ? ? ? ? ? ? transition:all 0.7s;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? .type li:hover{
? ? ? ? ? ? ? ? ? ? background-color:#fff;
? ? ? ? ? ? ? ? ? ? color:#0078ff;
? ? ? ? ? ? ? ? ? ? box-shadow:0 0 10px rgba(0, 120, 255, 0.77);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? .type .typeactive{
? ? ? ? ? ? ? ? ? ? background-color:#fff;
? ? ? ? ? ? ? ? ? ? color:#0078ff;
? ? ? ? ? ? ? ? ? ? box-shadow:0 0 10px rgba(0, 120, 255, 0.77);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? .type li:nth-child(odd){
? ? ? ? ? ? ? ? ? ? margin-left:25px;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? .type li:nth-child(even){
? ? ? ? ? ? ? ? ? ? margin-left:20px;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? .style{
? ? ? ? ? ? ? ? ? ? width:100%;
? ? ? ? ? ? ? ? ? ? height:40px;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? .style li{
? ? ? ? ? ? ? ? ? ? float:left;
? ? ? ? ? ? ? ? ? ? width:90px;
? ? ? ? ? ? ? ? ? ? height:45px;
? ? ? ? ? ? ? ? ? ? background-color:#FFBC00;
? ? ? ? ? ? ? ? ? ? color:#fff;
? ? ? ? ? ? ? ? ? ? font-size:18px;
? ? ? ? ? ? ? ? ? ? line-height:45px;
? ? ? ? ? ? ? ? ? ? text-align:center;
? ? ? ? ? ? ? ? ? ? border-radius:5px;
? ? ? ? ? ? ? ? ? ? cursor:pointer;
? ? ? ? ? ? ? ? ? ? transition:all 0.7s;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? .style li:hover{
? ? ? ? ? ? ? ? ? ? color: #ffa800;
? ? ? ? ? ? ? ? ? ? background-color:#fff;
? ? ? ? ? ? ? ? ? ? box-shadow:0 0 10px rgba(255, 232, 95, 0.77);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? .style .styleactive{
? ? ? ? ? ? ? ? ? ? color: #ffa800;
? ? ? ? ? ? ? ? ? ? background-color:#fff;
? ? ? ? ? ? ? ? ? ? box-shadow:0 0 10px rgba(255, 232, 95, 0.77);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? .style li:nth-child(1){
? ? ? ? ? ? ? ? ? ? margin-left:25px;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? .style li:nth-child(2){
? ? ? ? ? ? ? ? ? ? margin-left:20px;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? .poly{
? ? ? ? ? ? ? ? ? ? position:relative;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? .bian{
? ? ? ? ? ? ? ? ? ? position:absolute;
? ? ? ? ? ? ? ? ? ? left:100px;top:0;
? ? ? ? ? ? ? ? ? ? width:90px;
? ? ? ? ? ? ? ? ? ? height:auto;
? ? ? ? ? ? ? ? ? ? border-radius:5px;
? ? ? ? ? ? ? ? ? ? background-color:#EC494E;
? ? ? ? ? ? ? ? ? ? overflow:hidden;
? ? ? ? ? ? ? ? ? ? overflow:hidden;
? ? ? ? ? ? ? ? ? ? transform:scale(1.2);
? ? ? ? ? ? ? ? ? ? display:none;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? .bian span{
? ? ? ? ? ? ? ? ? ? display:block;
? ? ? ? ? ? ? ? ? ? float:left;
? ? ? ? ? ? ? ? ? ? width:40px;
? ? ? ? ? ? ? ? ? ? height:45px;
? ? ? ? ? ? ? ? ? ? font-size:16px;
? ? ? ? ? ? ? ? ? ? color:#fff;
? ? ? ? ? ? ? ? ? ? text-align:center;
? ? ? ? ? ? ? ? ? ? line-height:40px;
? ? ? ? ? ? ? ? ? ? color:#fff;
? ? ? ? ? ? ? ? ? ? transition:all 0.7s;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? .bian input{
? ? ? ? ? ? ? ? ? ? float:left;
? ? ? ? ? ? ? ? ? ? width:45px;
? ? ? ? ? ? ? ? ? ? height:35px;
? ? ? ? ? ? ? ? ? ? margin-top:5px;
? ? ? ? ? ? ? ? ? ? border:1px solid #fff;
? ? ? ? ? ? ? ? ? ? box-sizing:border-box;
? ? ? ? ? ? ? ? ? ? text-align:center;
? ? ? ? ? ? ? ? ? ? line-height:40px;
? ? ? ? ? ? ? ? ? ? font-size:18px;
? ? ? ? ? ? ? ? ? ? color:#fff;
? ? ? ? ? ? ? ? ? ? background:#EC494E;
? ? ? ? ? ? ? ? ? ? border-radius:3px;
? ? ? ? ? ? ? ? ? ? box-shadow:0 0 0 4px #fff inset;
? ? ? ? ? ? ? ? ? ? transition:all 0.7s;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? .cut,.create,.back{
? ? ? ? ? ? ? ? ? ? float:left;
? ? ? ? ? ? ? ? ? ? width:90px;
? ? ? ? ? ? ? ? ? ? height:45px;
? ? ? ? ? ? ? ? ? ? margin-left:25px;
? ? ? ? ? ? ? ? ? ? margin-bottom:15px;
? ? ? ? ? ? ? ? ? ? background-color: #5bd219;
? ? ? ? ? ? ? ? ? ? color:#fff;
? ? ? ? ? ? ? ? ? ? font-size:18px;
? ? ? ? ? ? ? ? ? ? line-height:45px;
? ? ? ? ? ? ? ? ? ? text-align:center;
? ? ? ? ? ? ? ? ? ? border-radius:5px;
? ? ? ? ? ? ? ? ? ? cursor:pointer;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? .copy,.clear,.save{
? ? ? ? ? ? ? ? ? ? float:left;
? ? ? ? ? ? ? ? ? ? width:90px;
? ? ? ? ? ? ? ? ? ? height:45px;
? ? ? ? ? ? ? ? ? ? margin-left:20px;
? ? ? ? ? ? ? ? ? ? margin-bottom:15px;
? ? ? ? ? ? ? ? ? ? background-color: #5bd219;
? ? ? ? ? ? ? ? ? ? color:#fff;
? ? ? ? ? ? ? ? ? ? font-size:18px;
? ? ? ? ? ? ? ? ? ? line-height:45px;
? ? ? ? ? ? ? ? ? ? text-align:center;
? ? ? ? ? ? ? ? ? ? border-radius:5px;
? ? ? ? ? ? ? ? ? ? cursor:pointer;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? .shezhi{
? ? ? ? ? ? ? ? ? ? transition:all 0.7s;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? .shezhistyle{
? ? ? ? ? ? ? ? ? ? background:#fff;
? ? ? ? ? ? ? ? ? ? color:#5bd219;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? .create{
? ? ? ? ? ? ? ? ? ? position:relative;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? .xinjian{
? ? ? ? ? ? ? ? ? ? position:absolute;
? ? ? ? ? ? ? ? ? ? left:0;top:0;
? ? ? ? ? ? ? ? ? ? width:200px;
? ? ? ? ? ? ? ? ? ? height:165px;
? ? ? ? ? ? ? ? ? ? border-radius:5px;
? ? ? ? ? ? ? ? ? ? background-color:#EC494E;
? ? ? ? ? ? ? ? ? ? box-shadow:0 0 15px rgba(236, 73, 78, 0.76);
? ? ? ? ? ? ? ? ? ? cursor:default;
? ? ? ? ? ? ? ? ? ? display:none;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? .xinjian:hover{
? ? ? ? ? ? ? ? ? ? color:#fff;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? .xinjian_before{
? ? ? ? ? ? ? ? ? ? position:absolute;
? ? ? ? ? ? ? ? ? ? right:0;
? ? ? ? ? ? ? ? ? ? top:0;
? ? ? ? ? ? ? ? ? ? width:20px;
? ? ? ? ? ? ? ? ? ? height:20px;
? ? ? ? ? ? ? ? ? ? color:#fff;
? ? ? ? ? ? ? ? ? ? line-height:16px;
? ? ? ? ? ? ? ? ? ? text-indent:-1px;
? ? ? ? ? ? ? ? ? ? font-size:30px;
? ? ? ? ? ? ? ? ? ? border:1px solid #fff;
? ? ? ? ? ? ? ? ? ? transform:rotate(45deg);
? ? ? ? ? ? ? ? ? ? border-radius:50%;
? ? ? ? ? ? ? ? ? ? cursor:pointer;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? .xinjian h6{
? ? ? ? ? ? ? ? ? ? width:100%;
? ? ? ? ? ? ? ? ? ? height:50px;
? ? ? ? ? ? ? ? ? ? color:#fff;
? ? ? ? ? ? ? ? ? ? line-height:50px;
? ? ? ? ? ? ? ? ? ? text-align:center;
? ? ? ? ? ? ? ? ? ? font-size:20px;
? ? ? ? ? ? ? ? ? ? font-weight:normal;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? #ding{
? ? ? ? ? ? ? ? ? ? width:60px;
? ? ? ? ? ? ? ? ? ? height:30px;
? ? ? ? ? ? ? ? ? ? font-size:14px;
? ? ? ? ? ? ? ? ? ? border-radius:3px;
? ? ? ? ? ? ? ? ? ? color:#fff;
? ? ? ? ? ? ? ? ? ? background-color:#0078ff;
? ? ? ? ? ? ? ? ? ? border:0;
? ? ? ? ? ? ? ? ? ? outline:none;
? ? ? ? ? ? ? ? ? ? cursor:pointer;
? ? ? ? ? ? ? ? ? ? box-shadow:0 0 10px rgba(0, 120, 255, 0.5);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? .xinjian_width,.xinjian_height{
? ? ? ? ? ? ? ? ? ? float:left;
? ? ? ? ? ? ? ? ? ? width:85px;
? ? ? ? ? ? ? ? ? ? height:40px;
? ? ? ? ? ? ? ? ? ? margin-left:10px;
? ? ? ? ? ? ? ? ? ? border-radius:5px;
? ? ? ? ? ? ? ? ? ? margin-bottom:20px;
? ? ? ? ? ? ? ? ? ? background-color:#FFBC00;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? .xinjian_width:hover,.xinjian_height:hover{
? ? ? ? ? ? ? ? ? ? background-color:#fff;
? ? ? ? ? ? ? ? ? ? color:#000;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? .xinjian_width span,.xinjian_height span{
? ? ? ? ? ? ? ? ? ? float:left;
? ? ? ? ? ? ? ? ? ? width:30px;
? ? ? ? ? ? ? ? ? ? height:100%;
? ? ? ? ? ? ? ? ? ? font-size:16px;
? ? ? ? ? ? ? ? ? ? text-align:center;
? ? ? ? ? ? ? ? ? ? line-height:40px;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? .xinjian_width input,.xinjian_height input{
? ? ? ? ? ? ? ? ? ? float:left;
? ? ? ? ? ? ? ? ? ? margin-top:5px;
? ? ? ? ? ? ? ? ? ? width:50px;
? ? ? ? ? ? ? ? ? ? height:30px;
? ? ? ? ? ? ? ? ? ? text-align:center;
? ? ? ? ? ? ? ? ? ? line-height:30px;
? ? ? ? ? ? ? ? ? ? font-size:14px;
? ? ? ? ? ? ? ? ? ? border:1px solid #FFBC00;
? ? ? ? ? ? ? ? ? ? box-sizing:border-box;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? .box{
? ? ? ? ? ? ? ? ? ? float:left;
? ? ? ? ? ? ? ? ? ? width:90px;
? ? ? ? ? ? ? ? ? ? height:auto;
? ? ? ? ? ? ? ? ? ? background-color:#EC494E;
? ? ? ? ? ? ? ? ? ? overflow:hidden;
? ? ? ? ? ? ? ? ? ? border-radius:5px;
? ? ? ? ? ? ? ? ? ? transition:all 0.7s;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? .box{
? ? ? ? ? ? ? ? ? ? margin-left:25px;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? .linewidth{
? ? ? ? ? ? ? ? ? ? margin-left:20px;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? .box:hover{
? ? ? ? ? ? ? ? ? ? background-color:#fff;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? .box span{
? ? ? ? ? ? ? ? ? ? display:block;
? ? ? ? ? ? ? ? ? ? float:left;
? ? ? ? ? ? ? ? ? ? width:40px;
? ? ? ? ? ? ? ? ? ? height:45px;
? ? ? ? ? ? ? ? ? ? font-size:16px;
? ? ? ? ? ? ? ? ? ? color:#fff;
? ? ? ? ? ? ? ? ? ? text-align:center;
? ? ? ? ? ? ? ? ? ? line-height:40px;
? ? ? ? ? ? ? ? ? ? color:#fff;
? ? ? ? ? ? ? ? ? ? transition:all 0.3s;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? .box input{
? ? ? ? ? ? ? ? ? ? float:left;
? ? ? ? ? ? ? ? ? ? width:45px;
? ? ? ? ? ? ? ? ? ? height:35px;
? ? ? ? ? ? ? ? ? ? margin-top:5px;
? ? ? ? ? ? ? ? ? ? border:1px solid #fff;
? ? ? ? ? ? ? ? ? ? box-sizing:border-box;
? ? ? ? ? ? ? ? ? ? text-align:center;
? ? ? ? ? ? ? ? ? ? line-height:40px;
? ? ? ? ? ? ? ? ? ? font-size:18px;
? ? ? ? ? ? ? ? ? ? color:#fff;
? ? ? ? ? ? ? ? ? ? background:#EC494E;
? ? ? ? ? ? ? ? ? ? border-radius:3px;
? ? ? ? ? ? ? ? ? ? box-shadow:0 0 0 4px #fff inset;
? ? ? ? ? ? ? ? ? ? transition:all 0.3s;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? .box2 span{
? ? ? ? ? ? ? ? ? ? width:55px;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? .box2 input{
? ? ? ? ? ? ? ? ? ? width:140px;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? .space{
? ? ? ? ? ? ? ? ? ? float:left;
? ? ? ? ? ? ? ? ? ? width:100%;
? ? ? ? ? ? ? ? ? ? height:0;
? ? ? ? ? ? ? ? ? ? border-bottom:1px solid #fff;
? ? ? ? ? ? ? ? ? ? margin:20px 0;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? </style>
? ? ? ? </head>
? ? ? ? <body style="">
? ? ? ? <h1>畫板</h1>
? ? ? ? <div class="container">
? ? ? ? <div class="row">
? ? ? ? <ul name="" class="type">
? ? ? ? <li class="line typeactive" data="line">直 線</li>
? ? ? ? <li class="rect" data="rect">矩 形</li>
? ? ? ? <li class="circle" data="circle">圓 圈</li>
? ? ? ? <li class="pen" data="pen">鉛 筆</li>
? ? ? ? <li class="poly" data="poly">多 邊 形
? ? ? ? <div class="bian"><span>邊數(shù)</span><input type="number" name="number" min="3" value="3" max="15"></div></li>
? ? ? ? <li class="eraser" data="eraser">橡 皮</li>
? ? ? ? </ul>
? ? ? ? <ul class="style">
? ? ? ? <li class="stroke styleactive">描 邊</li>
? ? ? ? <li class="fill" style="display: none;">填 充</li>
? ? ? ? </ul>
? ? ? ? <div class="space"></div>
? ? ? ? <div class="box"><span>顏色</span><input type="color" name="color" value="#000000"></div>
? ? ? ? <div class="box linewidth"><span>線寬</span><input type="number" name="number" value="1" max="150" min="1"></div>
? ? ? ? <div class="space"></div>
? ? ? ? <div class="create shezhi">新 建
? ? ? ? <div class="xinjian">
? ? ? ? <h6>畫 板 尺 寸</h6>
? ? ? ? <div class="xinjian_width">
? ? ? ? <span>寬</span>
? ? ? ? <input type="number" max="1625" min="500" value="500">
? ? ? ? </div>
? ? ? ? <div class="xinjian_height">
? ? ? ? <span>高</span>
? ? ? ? <input type="number" max="954" min="300" value="300">
? ? ? ? </div>
? ? ? ? <input type="button" name="queding" value="確定" id="ding">
? ? ? ? <div class="xinjian_before">+</div>
? ? ? ? </div>
? ? ? ? </div>
? ? ? ? <div class="clear shezhi">清 空</div>
? ? ? ? <div class="back shezhi">撤 銷</div>
? ? ? ? <div class="save shezhi">保 存</div>
? ? ? ? <div class="cut shezhi" data="cut">剪 切</div>
? ? ? ? <div class="copy shezhi">復(fù) 制</div>
? ? ? ? </div>
? ? ? ? </div>
? ? ? ? <canvas width="1625" height="954"></canvas>
? ? ? ? <script>
? ? ? ? ? ? function Draw(obj,setting){this.obj=obj;this.type=setting.type||"stroke";this.color=setting.color||"#000";this.width=setting.width||"1";}
Draw.prototype={init:function(){this.obj.strokeStyle=this.color;this.obj.fillStyle=this.color;this.obj.lineWidth=this.width;},rect:function(x,y,x1,y1){this.init();this.obj.beginPath();this.obj.rect(x,y,x1-x,y1-y);if(this.type=="stroke"){this.obj.stroke();}else if(this.type=="fill"){this.obj.fill();}},line:function(x,y,x1,y1){this.init();this.obj.beginPath();this.obj.moveTo(x,y);this.obj.lineTo(x1,y1);this.obj.stroke();},circle:function(x,y,x1,y1){this.init();var r=Math.sqrt(Math.pow(x-x1,2)+Math.pow(y-y1,2));this.obj.beginPath();this.obj.arc(x,y,r,0,2*Math.PI);if(this.type=="stroke"){this.obj.stroke();}else if(this.type=="fill"){this.obj.fill();}},poly:function(x,y,x1,y1,n){this.init();var obj=this.obj;var r=Math.sqrt(Math.pow(x-x1,2)+Math.pow(y-y1,2));;obj.save();obj.translate(x,y);obj.rotate(Math.PI/2);var nx=r*Math.cos(Math.PI/n);var ny=r*Math.sin(Math.PI/n);obj.beginPath();obj.lineCap="round";obj.moveTo(nx,ny);for(var i=0;i<=n;i++){obj.rotate(Math.PI*2/n);obj.lineTo(nx,-ny);}
if(this.type=="stroke"){this.obj.stroke();}else if(this.type=="fill"){this.obj.fill();}
obj.restore();},pen:function(x,y,x1,y1){this.init();this.obj.save();this.obj.lineCap="round";this.obj.lineTo(x1,y1);this.obj.stroke();this.obj.restore();},eraser:function(x,y,x1,y1){this.obj.lineCap="round";this.obj.clearRect(x1-5,y1-5,10,10);},cut:function(x,y,x1,y1){this.init();this.obj.save();this.obj.setLineDash([4,2]);this.obj.beginPath();this.obj.lineWidth=1;this.obj.rect(x,y,x1-x,y1-y);this.obj.stroke();this.obj.restore();}}
? ? ? ? </script>
? ? ? ? <script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
? ? ? ? <script>
? ? ? ? ? ? var container=$(".container");
? ? ? ? ? ? var canvas=document.querySelector("canvas");
? ? ? ? ? ? var screenWidth=document.documentElement.clientWidth;
? ? ? ? ? ? var screenHeight=document.documentElement.clientHeight;
? ? ? ? ? ? var width=screenWidth-295;
? ? ? ? ? ? var height=screenHeight-15;
? ? ? ? ? ? canvas.width=width;
? ? ? ? ? ? canvas.height=height;
? ? ? ? ? ? var obj=canvas.getContext("2d");
? ? ? ? ? ? var typechoose=$(".type li");
? ? ? ? ? ? var stylechoose=$(".style li");
? ? ? ? ? ? var colorchoose=document.querySelector("input[type=color]");
? ? ? ? ? ? var widthchoose=document.querySelector(".linewidth input[type=number]");
? ? ? ? ? ? var canvasWidth=document.querySelector(".xinjian_width input[type=number]");
? ? ? ? ? ? var canvasHeight=document.querySelector(".xinjian_height input[type=number]");
? ? ? ? ? ? canvasWidth.value=width;canvasHeight.value=height;
? ? ? ? ? ? canvasWidth.max=screenWidth-295;canvasHeight.max=screenHeight-15;
? ? ? ? ? ? var ding=document.querySelector("#ding");
? ? ? ? ? ? var poly=$(".poly");
? ? ? ? ? ? var bian=$(".bian");
? ? ? ? ? ? var polychoose=$(".bian input");
? ? ? ? ? ? var shezhi=$(".shezhi");
? ? ? ? ? ? var cut=$(".cut");
? ? ? ? ? ? var copy=$(".copy");
? ? ? ? ? ? var back=$(".back");
? ? ? ? ? ? var clear=$(".clear");
? ? ? ? ? ? var save=$(".save");
? ? ? ? ? ? var create=$(".create");
? ? ? ? ? ? var xinjian=$(".xinjian");
? ? ? ? ? ? var create_close=$(".xinjian_before");
? ? ? ? ? ? var cutflag=false;
? ? ? ? ? ? var iscut=true;
? ? ? ? ? ? var color="#000";
? ? ? ? ? ? var type="line";
? ? ? ? ? ? var n=3;
? ? ? ? ? ? var linewidth="1";
? ? ? ? ? ? var style="stroke";
? ? ? ? ? ? var arr=[];
? ? ? ? ? ? $(".fill").css({display:"none"});
? ? ? ? ? ? // 多邊形
? ? ? ? ? ? poly.hover(function(){
? ? ? ? ? ? ? ? bian.fadeIn();
? ? ? ? ? ? },function(){
? ? ? ? ? ? ? ? bian.fadeOut();
? ? ? ? ? ? })
? ? ? ? ? ? // 繪制形狀
? ? ? ? ? ? typechoose.each(function(index,ele){
? ? ? ? ? ? ? ? $(ele).click(function(){
? ? ? ? ? ? ? ? ? ? typechoose.removeClass("typeactive");
? ? ? ? ? ? ? ? ? ? $(this).toggleClass("typeactive");
? ? ? ? ? ? ? ? ? ? cut.css({color:"#fff",backgroundColor:"#5bd219",opacity:1});
? ? ? ? ? ? ? ? ? ? copy.css({color:"#fff",backgroundColor:"#5bd219",opacity:1});
? ? ? ? ? ? ? ? ? ? type=$(this).attr("data");
? ? ? ? ? ? ? ? ? ? if($(this).is(".line")||$(this).is(".pen")){
? ? ? ? ? ? ? ? ? ? ? ? style="stroke";
? ? ? ? ? ? ? ? ? ? ? ? $(".stroke").addClass("styleactive");
? ? ? ? ? ? ? ? ? ? ? ? $(".fill").css({display:"none"}).removeClass("styleactive");
? ? ? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? ? ? $(".fill").css({display:"block"});
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? })
? ? ? ? ? ? })
? ? ? ? ? ? // 描邊、填充單擊事件
? ? ? ? ? ? stylechoose.each(function(index,ele){
? ? ? ? ? ? ? ? $(ele).click(function(){
? ? ? ? ? ? ? ? ? ? style=$(this).attr("class");
? ? ? ? ? ? ? ? ? ? stylechoose.removeClass("styleactive");
? ? ? ? ? ? ? ? ? ? $(this).toggleClass("styleactive");
? ? ? ? ? ? ? ? })
? ? ? ? ? ? })
? ? ? ? ? ? // 剪切
? ? ? ? ? ? cut.click(function(){
? ? ? ? ? ? ? ? type=$(this).attr("data");
? ? ? ? ? ? ? ? typechoose.removeClass("typeactive");
? ? ? ? ? ? ? ? $(this).css({color:"#5bd219",backgroundColor:"#fff"}).toggleClass("shezhistyle");
? ? ? ? ? ? ? ? iscut=true;
? ? ? ? ? ? })
? ? ? ? ? ? copy.click(function(){
? ? ? ? ? ? ? ? type="cut";
? ? ? ? ? ? ? ? typechoose.removeClass("typeactive");
? ? ? ? ? ? ? ? $(this).css({color:"#5bd219",backgroundColor:"#fff"}).toggleClass("shezhistyle");
? ? ? ? ? ? ? ? iscut=false;
? ? ? ? ? ? })
? ? ? ? ? ? // 設(shè)置
? ? ? ? ? ? shezhi.each(function(index,ele){
? ? ? ? ? ? ? ? if($(ele).is(".cut")||$(ele).is(".copy")){
? ? ? ? ? ? ? ? ? ? return;
? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? $(ele).click(function(){
? ? ? ? ? ? ? ? ? ? ? ? $(this).css({color:"#5bd219",backgroundColor:"#fff"}).animate({opacity:0.99},200,function(){
? ? ? ? ? ? ? ? ? ? ? ? ? ? $(this).css({color:"#fff",backgroundColor:"#5bd219",opacity:1});
? ? ? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? ? ? })
? ? ? ? ? ? ? ? }
? ? ? ? ? ? })
? ? ? ? ? ? // 撤銷
? ? ? ? ? ? back.click(function(){
? ? ? ? ? ? ? ? arr.pop();
? ? ? ? ? ? ? ? obj.clearRect(0,0,width,height);
? ? ? ? ? ? ? ? if(arr.length>0){
? ? ? ? ? ? ? ? ? ? obj.putImageData(arr[arr.length-1],0,0,0,0,width,height);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? })
? ? ? ? ? ? // 清除
? ? ? ? ? ? clear.click(function(){
? ? ? ? ? ? ? ? arr=[];
? ? ? ? ? ? ? ? obj.clearRect(0,0,width,height);
? ? ? ? ? ? })
? ? ? ? ? ? // 保存
? ? ? ? ? ? save.click(function(){
? ? ? ? ? ? ? ? var reg=canvas.toDataURL("image/png");//跳轉(zhuǎn)頁面手動(dòng)保存
? ? ? ? //? ? ? ? var reg=canvas.toDataURL("image/png").replace("image/png","image/octet-stream");//直接自動(dòng)保存下載
? ? ? ? ? ? ? ? location.href=reg;
? ? ? ? ? ? })
? ? ? ? ? ? // 新建畫布
? ? ? ? ? ? create.click(function(){
? ? ? ? ? ? ? ? xinjian.fadeIn();
? ? ? ? ? ? })
? ? ? ? ? ? create_close.click(function(e){
? ? ? ? ? ? ? ? e.stopPropagation()
? ? ? ? ? ? ? ? xinjian.fadeOut();
? ? ? ? ? ? })
? ? ? ? ? ? canvasWidth.onblur=function(){
? ? ? ? ? ? ? ? if(this.value<=this.min){
? ? ? ? ? ? ? ? ? ? this.value=this.min;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? if(this.value>=screenWidth-295){
? ? ? ? ? ? ? ? ? ? this.value=screenWidth-295;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? width=this.value;
? ? ? ? ? ? }
? ? ? ? ? ? canvasHeight.onblur=function(){
? ? ? ? ? ? ? ? if(this.value<=this.min){
? ? ? ? ? ? ? ? ? ? this.value=this.min;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? if(this.value>=screenHeight-15){
? ? ? ? ? ? ? ? ? ? this.value=screenHeight-15;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? height=this.value;
? ? ? ? ? ? }
? ? ? ? ? ? ding.onclick=function(e){
? ? ? ? ? ? ? ? canvas.width=width;
? ? ? ? ? ? ? ? canvas.height=height;
? ? ? ? ? ? ? ? canvas.style.left=(screenWidth+295-canvas.width)/2+"px";
? ? ? ? ? ? ? ? canvas.style.top=(screenHeight-5-canvas.height)/2+"px";
? ? ? ? ? ? ? ? arr=[];
? ? ? ? ? ? ? ? obj.clearRect(0,0,width,height);
? ? ? ? ? ? ? ? e.stopPropagation()
? ? ? ? ? ? ? ? xinjian.fadeOut();
? ? ? ? ? ? }
? ? ? ? ? ? // 顏色選擇
? ? ? ? ? ? colorchoose.onchange=function(){
? ? ? ? ? ? ? ? color=this.value;
? ? ? ? ? ? }
? ? ? ? ? ? // 粗細(xì)改變
? ? ? ? ? ? widthchoose.onchange=function(){
? ? ? ? ? ? ? ? linewidth=this.value;
? ? ? ? ? ? }
? ? ? ? ? ? //多邊形邊數(shù)
? ? ? ? ? ? polychoose.change(function(){
? ? ? ? ? ? ? ? n=this.value;
? ? ? ? ? ? })
? ? ? ? ? ? var x,y,w,h;
? ? ? ? ? ? var lx,ly,lw,lh;
? ? ? ? ? ? var cutdata;
? ? ? ? ? ? canvas.onmousedown=function(e){
? ? ? ? ? ? ? ? x=e.offsetX;
? ? ? ? ? ? ? ? y=e.offsetY;
? ? ? ? ? ? ? ? if(type=="pen"){
? ? ? ? ? ? ? ? ? ? obj.beginPath();
? ? ? ? ? ? ? ? ? ? obj.moveTo(x,y);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? if(type=="eraser"){
? ? ? ? ? ? ? ? ? ? obj.clearRect(x-5,y-5,10,10);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? if(cutflag&&type=="cut"){
? ? ? ? ? ? ? ? ? ? if(arr.length!=0){
? ? ? ? ? ? ? ? ? ? ? ? arr.splice(-1,1);
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? var draw=new Draw(obj,{type:style,color:color,width:linewidth});//實(shí)例化構(gòu)造函數(shù)
? ? ? ? ? ? ? ? canvas.onmousemove=function(e){
? ? ? ? ? ? ? ? ? ? w=e.offsetX;
? ? ? ? ? ? ? ? ? ? h=e.offsetY;
? ? ? ? ? ? ? ? ? ? if(type!="eraser"){
? ? ? ? ? ? ? ? ? ? ? ? obj.clearRect(0,0,width,height);
? ? ? ? ? ? ? ? ? ? ? ? if(arr.length!=0){
? ? ? ? ? ? ? ? ? ? ? ? ? ? obj.putImageData(arr[arr.length-1],0,0,0,0,width,height);
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? if(cutflag&&type=="cut"){
? ? ? ? ? ? ? ? ? ? ? ? if(iscut){
? ? ? ? ? ? ? ? ? ? ? ? ? ? obj.clearRect(lx,ly,lw-lx,lh-ly);
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? ? ? var nx=lx+(w-x);
? ? ? ? ? ? ? ? ? ? ? ? var ny=ly+(h-y);
? ? ? ? ? ? ? ? ? ? ? ? obj.putImageData(cutdata,nx,ny);
? ? ? ? ? ? ? ? ? ? }else if(type=="poly"){
? ? ? ? ? ? ? ? ? ? ? ? draw[type](x,y,w,h,n);
? ? ? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? ? ? draw[type](x,y,w,h);
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? document.onmouseup=function(){
? ? ? ? ? ? ? ? ? ? canvas.onmousemove=null;
? ? ? ? ? ? ? ? ? ? document.onmouseup=null;
? ? ? ? ? ? ? ? ? ? if(type=="cut"){
? ? ? ? ? ? ? ? ? ? ? ? if(!cutflag){
? ? ? ? ? ? ? ? ? ? ? ? ? ? cutflag=true;
? ? ? ? ? ? ? ? ? ? ? ? ? ? cutdata=obj.getImageData(x+1,y+1,w-x-2,h-y-2);
? ? ? ? ? ? ? ? ? ? ? ? ? ? lx=x;ly=y;lw=w;lh=h;
? ? ? ? ? ? ? ? ? ? ? ? ? ? container.css({display:"none"});
? ? ? ? ? ? ? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? ? ? ? ? ? ? cutflag=false;
? ? ? ? ? ? ? ? ? ? ? ? ? ? container.css({display:"block"});
? ? ? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? ? ? arr.push(obj.getImageData(0,0,width,height));
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? </script>
? ? ? ? </body></html>
```
