<!DOCTYPE HTML> <html> <head> <Meta charset="utf-8" /> </head> <body> 定义画板<br /> <canvas id="myCanvas" width="1200" height="600"> 你的浏览器不支持HTML5 </canvas> <br/><br/>画笔颜色: <button style="width:80px;background-color:yellow;" onclick='linecolor="yellow";'>Yellow</button> <button style="width:80px;background-color:#00FF00;" onclick='linecolor="#00FF00";'>Lime</button> <button style="width:80px;background-color:red;" onclick='linecolor="red";'>Red</button> <button style="width:80px;background-color:blue;" onclick='linecolor="blue";'>Blue</button> <button style="width:80px;background-color:green;" onclick='linecolor="green";'>Green</button> <button style="width:80px;background-color:white;" onclick='linecolor="white";'>White</button> <button style="width:80px;background-color:#E238EC;" onclick='linecolor="#E238EC";'>Crimson</button> <button style="width:100px;background-color:#FDD017;" onclick='linecolor="#FDD017";'>Bright Gold</button> <button style="width:80px;background-color:navy;" onclick='linecolor="navy";'>Navy</button> <button style="width:80px;background-color:lightblue;" onclick='linecolor="lightblue";'>LightBlue</button> <button style="width:80px;background-color:gray;" onclick='linecolor="gray";'>Gray</button> <br />画笔粗细: <button style="width:80px;background-color:white;" onclick="linw = 4;">4px</button> <button style="width:80px;background-color:white;" onclick="linw = 8;">8px</button> <button style="width:80px;background-color:white;" onclick="linw = 16;">16px</button> <br />导出画板: <button style="width:1s80px;background-color:pink;" onclick="copyimage();">Export Canvas To Image</button> <br /><br /> <img src="" id="image_png" width="600" height="300"> <script type="text/javascript"> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); //画一个黑色矩形 ctx.fillStyle = "black"; ctx.fillRect(0,1200,600); //按下标记 var onoff = false; var oldx = -10; var oldy = -10; //设置画笔颜色 var linecolor = "white"; //设置线宽 var linw = 4; //添加鼠标移动事件 canvas.addEventListener("mousemove",draw,true); //添加鼠标按下事件 canvas.addEventListener("mousedown",down,false); //添加鼠标弹起事件 canvas.addEventListener("mouseup",up,false); /** * 鼠标按下事件 **/ function down(event){ onoff = true; //记录鼠标按下时的坐标做画线的起始坐标 oldx = event.pageX-10; oldy = event.pageY-10; } /** * 鼠标弹起事件 **/ function up(event){ onoff = false; var oldx = -10; var oldy = -10; } /** * 鼠标移动事件 **/ function draw(event){ if(true == onoff){ //移动时的新坐标做画线的终止坐标 var newx = event.pageX-10; var newy = event.pageY-10; //开始画线 ctx.beginPath(); //设置画线起点 ctx.moveto(oldx,oldy); //设置画线终点 ctx.lineto(newx,newy); //设置画笔颜色 ctx.strokeStyle = linecolor; //设置画笔粗细 ctx.linewidth = linw; //设置笔帽 ctx.lineCap = "round"; //完成画线 ctx.stroke(); //设置本次坐标为下次画线的起始坐标 oldx = newx; oldy = newy; } } //导出画板 function copyimage(event){ var img_png_src = canvas.toDataURL("image/png"); document.getElementById("image_png").src = img_png_src; } </script> </body> </html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。