แคนวาสที่เพิ่มเข้ามาใหม่ของ Html5 ถือเป็นฟังก์ชันที่ทรงพลัง คาดว่าทุกคนจะใช้มันทุกวันแต่ความถี่ก็ไม่สูงนัก ในบางครั้ง มันถูกใช้เพื่อสังเคราะห์รูปภาพ อย่างไรก็ตาม หากไม่ได้ห่อหุ้มโค้ดไว้ก็จะมาก ยุ่งมาก ดังนั้นการวาดภาพบนผ้าใบที่ใช้กันทั่วไป การวาดข้อความ จึงถูกห่อหุ้มไว้ และตอนนี้ฉันค่อนข้างพอใจกับมัน มันสามารถทำงานวาดภาพบนผ้าใบให้เสร็จได้อย่างรวดเร็วและตอบสนองต่อการเปลี่ยนแปลงข้อกำหนดอย่างใจเย็น เพียงต้องการการกำหนดค่าง่ายๆ เท่านั้น
li-canvas.jsฟังก์ชัน Canvas ของ Html5 ได้รับการห่อหุ้มเพื่ออำนวยความสะดวกให้กับฟังก์ชันต่างๆ เช่น รูปภาพเดียว การวาดภาพหลายภาพ การวาดภาพมุมมน การวาดข้อความหลายบรรทัด การตัดบรรทัดอัตโนมัติ การบันทึกและดาวน์โหลดรูปภาพ เป็นต้น
ที่อยู่ Github: github.com/501351981/l…
ฟังก์ชั่นหลัก•การวาดภาพ: การวาดภาพเดี่ยว/หลายภาพ การวาดภาพมุมโค้งมน •การวาดภาพข้อความ: การวาดภาพข้อความหลายย่อหน้า การตัดบรรทัดอัตโนมัติ •การบันทึกรูปภาพ: การรับข้อมูลรูปภาพ การดาวน์โหลดรูปภาพไปยังท้องถิ่น และการสนับสนุนชื่อรูปภาพที่ดาวน์โหลดแบบกำหนดเอง .
ติดตั้ง npm# การติดตั้ง npm การติดตั้ง npm -- บันทึก li-canvasคำพูดโดยตรง
นำเข้าไฟล์ js ลงใน html โดยตรง
<script src=dist/li-canvas.js></script>วิธีใช้ ยกตัวอย่าง
เมื่อใช้ li-canvas คุณต้องสร้างอินสแตนซ์ของออบเจ็กต์ก่อน new LiCanvas(canvas_id,options), ส่งผ่าน ID ของแคนวาส ตัวเลือกเป็นทางเลือก คุณสามารถตั้งค่าพื้นหลังแคนวาสและรูปแบบข้อความเริ่มต้น ฯลฯ
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180></canvas><script> var canvas= LiCanvas ใหม่ ('ทดสอบ') </script></body> ... การวาดภาพ•วาดภาพเพียงภาพเดียว
เรียก addDrawImageTask(image) โดยที่รูปภาพพารามิเตอร์เป็นออบเจ็กต์ รวมถึง
src: ที่อยู่ URL ของรูปภาพ
x: พิกัด x ของมุมซ้ายบนของรูปภาพบนผืนผ้าใบ
y: พิกัด y ของมุมซ้ายบนของรูปภาพบนผืนผ้าใบ
ความกว้าง: ความกว้างของการวาดภาพ
ความสูง: ความสูงของการวาดภาพ
borderRadius: รัศมีมุมของรูปภาพ
เมื่อเรียก addDrawImageTask(image) รูปภาพจะไม่ถูกวาดทันที แต่งานการวาดจะถูกดำเนินการเมื่อมีการเรียก Draw(callback) เท่านั้น และฟังก์ชันการเรียกกลับจะถูกเรียกเมื่อการดำเนินการเสร็จสิ้น
ทำไมทำเช่นนี้? เนื่องจากจำเป็นต้องดาวน์โหลดรูปภาพก่อนเมื่อวาด นี่เป็นการดำเนินการแบบอะซิงโครนัส ดังนั้นจึงถูกเพิ่มลงในรายการงานก่อน และเมื่อเรียก Draw() จะดำเนินการตามลำดับที่เพิ่มงาน
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px ทึบ red></canvas><img src=./bg.jpg id=img width=0 height=0><script> var bg={ src:document.getElementById('img').src,//หรือที่อยู่ URL ของรูปภาพ x:0,//พิกัด x ของมุมซ้ายบน y:0,//y พิกัดของด้านซ้ายบน ความกว้างของมุม:1563,/ /ความกว้างของการวาดภาพ ความสูง:1180,//ความสูงในการวาดภาพของรูปภาพ borderRadius:0 //รัศมีมุมของรูปภาพ} var canvas=new LiCanvas('test') canvas.addDrawImageTask(bg) //เพิ่มงานวาดภาพ และการวาดภาพจะไม่ถูกดำเนินการทันที canvas.draw(()=>{ console.log(การวาดภาพเสร็จสมบูรณ์) }) </script></body> ...•วาดกราฟหลาย ๆ อัน
คุณสามารถเรียก addDrawImageTask(image) ได้หลายครั้งติดต่อกัน หรือคุณสามารถส่งอาร์เรย์ของรูปภาพก็ได้
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px ทึบ red></canvas><script> var img1={ src:http://*****.com/***.png, x:0, y:0, ความกว้าง:1563, ความสูง:1180, รัศมีเส้นขอบ:0 } var img2={ src:http://*****.com/***.png, x:0, y:0, ความกว้าง: 1563 ความสูง:1180 รัศมีเส้นขอบ:0 } var imgs=[ { src:http://*****.com/***.png, x:0, y:0, ความกว้าง:100, ความสูง:100, รัศมีเส้นขอบ:0 }, { src:http://*****.com/***.png, x:0, y:0, ความกว้าง:100, ความสูง:100, borderRadius:0 } ] var canvas=ใหม่ LiCanvas('test') canvas.addDrawImageTask(img1) canvas.addDrawImageTask(img2) // การเรียกหลายครั้งเพื่อให้ได้ภาพวาดหลายภาพ canvas.addDrawImageTask(imgs) // การวาดภาพหลายภาพสามารถทำได้โดยการส่งผ่านอาร์เรย์โดยตรง canvas.draw(()=>{ console.log(การวาดภาพเสร็จสมบูรณ์) }) </script> </body> ...•วาดภาพทรงกลมหรือวงกลม
เพียงตั้งค่า borderRadius
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px ทึบ red></canvas><script> var img1={ src:http://*****.com/***.png, x:0, y:0, ความกว้าง:100, ความสูง:100, borderRadius:50 //กำหนดรัศมีของเนื้อปลา เมื่อรัศมีของเนื้อปลาเท่ากับครึ่งหนึ่งของความยาวด้านของสี่เหลี่ยมจัตุรัส มันจะเป็นวงกลม} var canvas=new LiCanvas('test') canvas .addDrawImageTask(img1) canvas.draw(()=>{ console.log (การวาดภาพเสร็จสมบูรณ์) }) </script></body> ... วาดข้อความ•วาดข้อความ
โทร addDrawTextTask(text,style)
ข้อความ: ข้อความที่จะวาด
สไตล์: รูปแบบข้อความ รวมถึง x: พิกัด x ของมุมซ้ายบนของตำแหน่งเริ่มต้นของการวาดข้อความ
y: พิกัด y ของมุมซ้ายบนของตำแหน่งจริงของการวาดข้อความ
ความกว้าง: ความกว้างของข้อความหนึ่งบรรทัด หากเกินความกว้าง ข้อความจะตัดโดยอัตโนมัติ
ขนาดตัวอักษร: ขนาดข้อความ จำนวนเต็ม หน่วยเป็น px
fontWeight: ความหนาของข้อความเป็นตัวหนา หนาขึ้น ฯลฯ หรือ 400, 500, 600... เช่นเดียวกับ css font-weight
fontFamily: แบบอักษรข้อความเหมือนกับ css
lineHeight: ความสูงของบรรทัด, จำนวนเต็ม, หน่วย px
สี: สี
ขอบด้านล่าง: หากมีข้อความหลายย่อหน้า คุณสามารถระบุระยะห่างระหว่างย่อหน้าได้
การวาดข้อความเป็นแบบอะซิงโครนัสเช่นกัน มันไม่ได้ถูกวาดจริง ๆ จนกว่าจะมีการเรียกการวาด (โทรกลับ)
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px solid red></canvas><script> var canvas=new LiCanvas('test') canvas.addDrawTextTask(ข้อความที่จะวาด, { x:110, y:496, ความกว้าง:1340, fontSize:54, fontWeight:'bolder', fontFamily:PingFangSC-Regular,'Microsoft YaHei',SimSun,Arial,'Helvetica Neue',sans-serif, lineHeight:70, color:'#1a1a1a', marginBottom:40 }) canvas.draw(()=>{ console.log (วาดเสร็จแล้ว) }) </script></body> ...•วาดข้อความหลายย่อหน้า
วิธีที่ 1: เรียก addDrawTextTask(ข้อความ, สไตล์) ซ้ำๆ เช่นเดียวกับข้างต้น
วิธีที่ 2: สามารถส่งข้อความในอาร์เรย์และสามารถแชร์สไตล์ได้
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px solid red></canvas><script> var canvas=new LiCanvas('ทดสอบ') canvas.addDrawTextTask([ย่อหน้าข้อความที่จะวาด 1, ย่อหน้าข้อความที่จะวาด 2],{ x:110, y:496, ความกว้าง:1340, fontSize:54, fontWeight:'bolder', fontFamily:PingFangSC-Regular,' Microsoft YaHei', SimSun, Arial, 'Helvetica Neue', sans-serif, ความสูงบรรทัด: 70, color:'#1a1a1a', marginBottom:40 }) canvas.draw(()=>{ console.log(การวาดภาพเสร็จสมบูรณ์) }) </script></body> ...สไตล์ยังสามารถส่งผ่านเป็นค่าเริ่มต้นได้เมื่อออบเจ็กต์ถูกสร้างอินสแตนซ์เพื่อหลีกเลี่ยงการตั้งค่าสไตล์ที่ใช้ร่วมกันซ้ำ ๆ
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px solid red></canvas><script> var canvas=new LiCanvas('test',{ fontStyle:{ fontSize:20, fontFamily:PingFangSC-Regular,'Microsoft YaHei',SimSun,Arial,'Helvetica Neue',sans-serif, lineHeight:70, color:'#1a1a1a', marginBottom:40 } }) canvas.addDrawTextTask (ย่อหน้าข้อความที่จะวาด 1,{ x:110, y:496, กว้าง:1340, }) canvas.addDrawTextTask(ย่อหน้าข้อความที่จะวาด 2,{ x:110, y:696, ความกว้าง:1340, }) canvas.draw(()=>{ console.log(การวาดเสร็จสมบูรณ์) }) </script></ ร่างกาย> ...หากมีข้อความในย่อหน้าหลายย่อหน้าที่ต้องกำหนดสไตล์ต่างกันก็สามารถระบุสไตล์แยกกันได้ดังนี้ ยืดหยุ่นได้มาก~
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px solid red></canvas><script> var canvas=new LiCanvas('test',{ fontStyle:{ fontSize:20, fontFamily:PingFangSC-Regular,'Microsoft YaHei',SimSun,Arial,'Helvetica Neue',sans-serif, lineHeight:70, color:'#1a1a1a', marginBottom:40 } }) canvas.addDrawTextTask([{ text:ถึง ข้อความย่อหน้าที่วาด 1, ขนาดตัวอักษร: 60 }, ข้อความย่อหน้าที่ 2 ที่จะวาด, ข้อความย่อหน้าที่ 3 ที่จะวาด],{ x:110, y:496, ความกว้าง:1340, }) canvas.draw(()=>{ console.log(การวาดภาพเสร็จสมบูรณ์) }) </script></body> ...บันทึกการดาวน์โหลดรูปภาพ
•ดาวน์โหลดรูปภาพ
ดาวน์โหลดเป็นภาพ png: saveToPng(ชื่อไฟล์)
ดาวน์โหลดเป็นภาพ JPEG: saveToJpeg(ชื่อไฟล์)
ดาวน์โหลดเป็นภาพ GIF: saveToGif (ชื่อไฟล์)
หมายเหตุ: การดาวน์โหลดรูปภาพต้องถูกเรียกในฟังก์ชันเรียกกลับของ Draw() จึงจะมีผล
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px ทึบ สีแดง></canvas><script> var bg={ src:http://***.jpg, x:0, y:0, ความกว้าง: 1563 ความสูง: 1180 รัศมีเส้นขอบ: 0 } var canvas=new LiCanvas('test') canvas.addDrawImageTask(bg) canvas.draw(()=>{ canvas.saveToPng(li-canvas) }) </script ></ตัว> ...•รับข้อมูลภาพ
บางครั้งเราไม่ต้องการดาวน์โหลดรูปภาพ ตัวอย่างเช่น ในเบราว์เซอร์ WeChat เราต้องการให้ผู้ใช้กดรูปภาพค้างไว้เพื่อบันทึก ในขณะนี้ เราต้องการให้แทรกข้อมูลภาพที่สังเคราะห์ด้วย Canvas เข้าไป src ของ img
โทร: getImageData() เพื่อรับข้อมูลภาพที่สังเคราะห์
... <script src=../dist/li-canvas.js></script> ...<body><canvas id=test width=1563 height=1180 style=width: 782px;height: 590px;border : 1px ทึบ red></canvas><img src=./bg.jpg id=img ><script> var bg={ src:http://***.jpg, x:0, y:0, ความกว้าง:1563, สูง:1180, borderRadius:0 } var canvas=new LiCanvas('test') canvas.addDrawImageTask(bg) canvas วาด(()=>{ var src=canvas.getImageData() document.getElementById('img').src=src }) </script></body> ...ที่อยู่ Github: github.com/501351981/l…
สรุปข้างต้นคือสิ่งที่โปรแกรมแก้ไขแนะนำให้คุณทราบถึงวิธีการสร้างรูปภาพเดี่ยว หลายรูปภาพ การวาดภาพมุมมน ข้อความบรรทัดเดียว ข้อความหลายบรรทัด ฯลฯ ใน HTML5 ผ่าน li-canvas อย่างง่ายดาย ฉันหวังว่ามันจะมีประโยชน์ ถึงคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความไว้และฉันจะตอบกลับคุณทันเวลา ฉันอยากจะขอบคุณทุกคนที่ให้การสนับสนุนเว็บไซต์ศิลปะการต่อสู้ VeVb!