เมื่อเร็วๆ นี้ ฉันได้ศึกษาแอตทริบิวต์องค์ประกอบใหม่ๆ ของ HTML5 และพบว่าแอตทริบิวต์เหล่านี้ใช้งานง่ายมาก โดยเฉพาะองค์ประกอบแท็กใหม่ Canvas บทนำอย่างเป็นทางการ: Canvas API (canvas) เป็นแท็กใหม่ใน HTML5 ที่ใช้เพื่อสร้างรูปภาพแบบเรียลไทม์บนหน้าเว็บและสามารถจัดการเนื้อหารูปภาพ โดยพื้นฐานแล้ว มันเป็นบิตแมปที่สามารถจัดการด้วย JavaScript ข้อมูลต่อไปนี้ใช้ JavaScript ร่วมกับ Canvas เพื่อใช้ฟังก์ชันกระดานวาดภาพ
ภาพสาธิตเอฟเฟกต์:
ส่วนโค้ด (คัดลอกโดยตรงแล้วนำไปใช้)
<!DOCTYPE HTML><html><head> <meta charset=utf-8 /> <title>JavaScript+Canvas ใช้กระดานวาดภาพแบบกำหนดเอง</title></head><body><canvas id=canvas width=600 height =300></canvas><script type=text/javascript> var canvas = document.getElementById(canvas); var ctx = canvas.getContext(2d); //วาดรูปสี่เหลี่ยมผืนผ้าสีดำ ctx.fillStyle=black; ctx.fillRect(0,0,600,300); //กดเครื่องหมาย var onoff = false; //ตัวแปร oldx และ oldy แสดงถึงพิกัดก่อนที่เมาส์จะเคลื่อนที่ var oldx = -10 ; var oldy = -10; // ตั้งค่าสี var linecolor = white; // ตั้งค่าความกว้างของเส้น var linw = 4; //เพิ่มเหตุการณ์การย้ายเมาส์ canvas.addEventListener(mousemove,draw,true); //พารามิเตอร์ที่สามส่วนใหญ่เกี่ยวข้องกับการจับหรือเดือด //เพิ่มเหตุการณ์การกดเมาส์ canvas.addEventListener(mousedown,down,false); // เพิ่มเมาส์ up event canvas.addEventListener(mouseup,up,false); ฟังก์ชั่นลง(เหตุการณ์){ onoff = true; oldx = event.pageX-10; event.pageY-10; //console.log(event.pageX+'............000.............'+event.pageY) ; /event.pageX และ event.pageY สัมพันธ์กับตำแหน่งเมาส์ของทั้งหน้า รวมถึงส่วนที่ล้น (นั่นคือ แถบเลื่อน) } function up(){ onoff = false; } function Draw(event){ if(onoff == จริง) { var newx = event.pageX-10; var newy = event.pageY-10; ctx.beginPath();//beginPath() ละทิ้งเส้นทางที่กำหนดไว้ในปัจจุบันและเริ่มเส้นทางใหม่ โดยกำหนดจุดปัจจุบันเป็น (0,0) ctx.moveTo(oldx,oldy); // ย้ายไปยังพิกัดเมื่อคลิก โดยมีพิกัดนั้นเป็นจุดเริ่มต้น ctx.lineTo(newx,newy); //วาดเส้นทางใหม่ ctx. strokeStyle=linecolor; ; ctx.lineCap=round; ctx. stroke();//วิธีการ stroke() จะวาดเส้นทางที่กำหนดโดยวิธีการ moveTo() และ lineTo() สีเริ่มต้นคือสีดำ //กำหนดตำแหน่งเมาส์ใหม่ให้กับพิกัดเริ่มต้นของการวาดครั้งถัดไป start oldx = newx; oldy = newy; };ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network