html5 canvas自定义画板

来源：互联网发布：淘宝卖家咨询客服电话编辑：程序博客网时间：2024/04/29 00:07
<!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, 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>
0 0