HTML5之简单小画板
生活随笔
收集整理的這篇文章主要介紹了
HTML5之简单小画板
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
一：先熟悉一下基本圖形繪制
1：線條
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>繪制線條</title> </head> <body><canvas id="canvas" width="300" height="300" style="border: 1px solid red;"></canvas><script type="text/javascript"> // 1:獲取對象var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d"); // 2:開始點ctx.moveTo(10,10); // 3:設置輪廓粗細和輪廓樣式ctx.lineWidth=8;ctx.strokeStyle="orange"; // 4:結束點ctx. lineTo(80,80); // 5:填充輪廓ctx.stroke();</script> </body> </html>2：矩形
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>繪制矩形</title> </head> <body><canvas id="canvas" width="300" height="300" style="border: 1px solid red;"></canvas><script type="text/javascript"> // 1:獲取對象var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d"); // 2:設置路徑ctx.rect(10,10,100,100); // 3:設置輪廓粗細和輪廓樣式和設置內部填充樣式ctx.lineWidth=10;ctx.strokeStyle="orange";ctx.fillStyle='cornsilk'; // 5:填充輪廓和填充圖形ctx.stroke();ctx.fill();</script> </body> </html>3：圓形
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>繪制圓形</title> </head> <body><canvas id="canvas" width="300" height="300" style="border: 1px solid red;"></canvas><script type="text/javascript"> // 1:獲取對象var canvas=document.getElementById("canvas");var ctx=canvas.getContext("2d"); // 2:設置路徑ctx.arc(100,100,80,0*Math.PI/180,270*Math.PI/180); // 3:設置輪廓粗細和輪廓樣式和設置內部填充樣式ctx.lineWidth=10;ctx.strokeStyle="orange";ctx.fillStyle='azure'; // 5:填充輪廓和填充圖形ctx.stroke();ctx.fill();</script> </body> </html>4：效果圖
二：實現一個簡單的小畫板
1：代碼
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>畫布</title><style type="text/css">canvas{border: 2px solid orange;display: block;margin: 50px auto;}#thecolor{height: 50px;width: 50px;display: block;margin: 10px auto;}.mm{display: block;height: 40px;width: 40%;margin: 10px auto; }</style></head><body style="margin: 0;"><input type="color" id="thecolor" value=""/><canvas id="can" width="600" height="400" ></canvas><div class="mm"><input type="text" name="size" id="size" placeholder="輸入畫筆大小"/><button id="but">OK</button><button id="xp">橡皮擦</button></div></body><script type="text/javascript">var can = document.getElementById("can");var ctx = can.getContext("2d");ctx.lineWidth=5;var flag=false;can.onmousedown=function(eva){var eva=eva||window.event;ctx.lineCap="round";ctx.lineJoin="round";var x=eva.offsetX;var y=eva.offsetY;ctx.beginPath();ctx.moveTo(x,y);flag=true;}can.onmousemove=function(eva){if(flag){ var eva=eva||window.event;var x=eva.offsetX;var y=eva.offsetY;ctx.lineTo(x,y);ctx.stroke();}}can.onmouseup=function(){flag=false;ctx.closePath();}can.onmouseleave=function(){flag=false;ctx.closePath();}var theColor=document.getElementById("thecolor");theColor.onchange=function(){ctx.strokeStyle=this.value;}var size=document.getElementById("size");var but=document.getElementById("but");but.onclick=function(){ // alert(size.value)ctx.lineWidth=size.value;}var xp=document.getElementById("xp");xp.onclick=function(){ctx.strokeStyle='white';ctx.lineWidth=15;}</script> </html>2：效果圖
?
總結
以上是生活随笔為你收集整理的HTML5之简单小画板的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： lei!
- 下一篇： 根据设计稿的响应式开发的简单实现