canvas制作简易画板 我不是女神ヾ 2021-09-16 04:10 326阅读 0赞 ![70][] <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> button{ width: 20px; height: 20px; } #btn_clear{ width: 50px; } #cv{ border:1px solid; vertical-align: top; background-color: white; } option{ width: 25px; height: 10px; } .color{ width: 40px; height: 20px; border:1px solid; background-color: blue; position:relative; } .color>div{ position: absolute; top:20px; left:20px; width: 200px; height: 200px; border:1px solid; } #rubber{ display: inline-block; width: 15px; height: 15px; border:1px solid; } </style> </head> <input type="color" id="onchange"> <select id="select"> <option value="1">1</option> <option value="5">5</option> <option value="10">10</option> <option value="15">15</option> <option value="20">20</option> </select> 橡皮擦:<div id="rubber"></div> clear:<button value="" id="btn_clear" >清除</button> <canvas width="800" height="500" id="cv"></canvas> </body> <script src="../../canvas01/jquery.js"></script> <script type="text/javascript"> var color = "#000"; var canvas = document.getElementById("cv"); var cxt = canvas.getContext('2d'); var drawflag=false; draw(); function draw(){ canvas.onmousedown=function(event){ drawflag=true; cxt.beginPath(); cxt.moveTo(event.clientX-this.offsetLeft-1,event.clientY-this.offsetTop-1); } canvas.onmouseup=function(event){ drawflag=false; cxt.closePath(); } canvas.onmousemove=function(event){ if(drawflag){ document.getElementById('onchange').onchange = function(){ color=this.value; console.log(color); } cxt.strokeStyle=color; cxt.lineWidth=select.value; // cxt.lineWidth=$("select").find("option:selected").attr("value"); cxt.lineTo(event.clientX-this.offsetLeft,event.clientY-this.offsetTop); cxt.stroke(); } } rubber.onclick = function(){ color="white"; } // $("#rubber").click(function(){ // color="white"; // }) //清除画板 btn_clear.onclick = function(){ cv.width=cv.width; } // $("#btn_clear").click(function(){ // cv.width=cv.width; // // document.getElementById("cv").getContext('2d').clearRect(0,0,800,500); // }) } </script> </html> [70]: /images/20210813/dc5ee9dae0844fdeb1fb7bb5888c276d.png
还没有评论,来说两句吧...