<!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>
html5 canvas自定義畫板
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
N網下載mod方法: 20240614親測好使
https://www.bilibili.com/video/BV1k8411575T/?vd_source=d68ed178f151e80fea1e02efd205802c