ความคิดเห็น: ผ้าใบหมายถึงผืนผ้าใบ แม้ว่าทุกคนจะเรียกแท็กใหม่สำหรับ HTML5 แต่ดูเหมือนว่าผ้าใบเป็นของความรู้ใหม่เกี่ยวกับภาษา HTML อันที่จริงแล้วการวาดภาพผ้าใบนั้นทำผ่าน JavaScript ดังนั้นหากคุณต้องการเรียนรู้การวาดภาพผ้าใบคุณต้องมีรากฐาน JavaScript
แม้ว่าทุกคนจะเรียกแท็กใหม่สำหรับ HTML5 แต่ดูเหมือนว่าผ้าใบเป็นของความรู้ใหม่เกี่ยวกับภาษา HTML อันที่จริงแล้วการวาดภาพผ้าใบนั้นทำผ่าน JavaScript ดังนั้นหากคุณต้องการเรียนรู้การวาดภาพผ้าใบคุณต้องมีรากฐาน JavaScriptนอกจากนี้เมื่อวาดภาพมักจะมีคำศัพท์และจุดความรู้ในภาพอยู่เสมอดังนั้นหากคุณมีประสบการณ์ในการสร้างภาพหรือศิลปะมันจะง่ายกว่าที่จะเรียนรู้ผ้าใบ
ผ้าใบหมายถึงผ้าใบ ผ้าใบใน HTML5 นั้นคล้ายกับผืนผ้าใบในชีวิตจริงมาก ดังนั้นการเห็นเขาเป็นผืนผ้าใบที่จับต้องได้สามารถเร่งความเข้าใจได้
ผ้าใบ
ในการวาดด้วยผ้าใบก่อนอื่นคุณต้องมีผืนผ้าใบ หากคุณไม่มีผืนผ้าใบในชั้นวางหนังสือของคุณคุณสามารถซื้อม้วนและใส่ได้แน่นอนเราไม่จำเป็นต้องใช้เงินบนหน้าเว็บเพียงแค่เขียนผ้าใบคล้ายกับ:
<Canvas> เบราว์เซอร์ของคุณไม่รองรับ Canvas </anvas>
ข้อความในแท็กสำหรับเบราว์เซอร์ที่ไม่รองรับผ้าใบและที่รองรับจะไม่ปรากฏให้เห็น
หมายเหตุ: จำเป็นต้องพูดถึงลักษณะของผืนผ้าใบนี้ เช่นเดียวกับ IMG มันมีคุณลักษณะดั้งเดิมสองประการคือความกว้างและความสูง ในเวลาเดียวกันเนื่องจากเป็นองค์ประกอบ HTML จึงสามารถใช้ CSS เพื่อกำหนดความกว้างและความสูง อย่างไรก็ตามโปรดทราบว่าความกว้างและความสูงของตัวเองนั้นแตกต่างจากความกว้างและความสูงที่กำหนดผ่าน CSS!
เราใช้ JS เพื่อเปลี่ยนความกว้างและความสูงของผืนผ้าใบเช่นนี้:
Canvas.width = 400
Canvas.height = 300
แต่การใช้ JS เพื่อเปลี่ยนความกว้างและความสูงของผืนผ้าใบโดยใช้งาน CSS มันเป็นเช่นนี้:
canvas.style.width = '400px'
canvas.style.height = '300px'
จะเห็นได้ว่าความแตกต่างทางไวยากรณ์นั้นชัดเจนมาก ในความเป็นจริงความแตกต่างชัดเจนมากขึ้น
อะไรคือความแตกต่างระหว่างพวกเขา?
ตัวอย่างเช่นสำหรับผืนผ้าใบกว้าง 1000 คุณวาดเส้นแนวตั้งที่ด้านซ้ายของผืนผ้าใบกว้าง 100 พิกเซล ในเวลานี้คุณตั้งค่าความกว้างของผืนผ้าใบเป็น 500 ซึ่งเทียบเท่ากับการคลิกครึ่งหนึ่งของผืนผ้าใบ แต่ในเวลานี้ความกว้างของเส้นแนวตั้งยังคงอยู่ที่ 100
แต่ถ้าคุณใช้ CSS เพื่อเปลี่ยนความกว้างของผืนผ้าใบเป็น 500 มันจะเทียบเท่ากับการสกัดผ้าใบจาก 1,000 ถึง 500 ดังนั้นความกว้างของเส้นแนวตั้งจะกลายเป็น 50
(นี่เป็นเพียงสถานการณ์ทางทฤษฎีเมื่อตั้งค่าความกว้างดั้งเดิมของผืนผ้าใบมันจะล้างเนื้อหาที่ดึงออกมา)
ความกว้างและความสูงของผืนผ้าใบเป็นคุณลักษณะของผืนผ้าใบเองและความกว้างและความสูงที่กำหนดโดย CSS ถือได้ว่าเป็นการปรับขนาด หากคุณปรับขนาดอย่างไม่เป็นทางการมากเกินไปกราฟิกบนผืนผ้าใบอาจไม่สามารถจดจำได้สำหรับคุณ
ดังนั้นจึงมีข้อเสนอแนะ: เว้นแต่ในสถานการณ์พิเศษอย่าใช้ CSS เพื่อกำหนดความกว้างและความสูงของผืนผ้าใบ
ผ้าใบมีและตอนนี้เรานำมันออกมา:
var cvs = document.getElementById ('CVS');
ดูสิมันเหมือนกับการได้รับองค์ประกอบอื่น ๆ
แปรง
ตอนนี้ผ้าใบมีอยู่แล้วฉันต้องการดูเดิลมันแน่นอนว่าฉันยังต้องการปากกาด้วย วิธีการรับปากกามีดังนี้:
var ctx = cvs.getContext ('2d');
วิธี getContext ใช้เพื่อถือปากกา แต่มีพารามิเตอร์อื่นที่นี่: 2D สิ่งนี้หมายความว่าอย่างไร? สิ่งนี้ถือได้ว่าเป็นแปรงชนิดหนึ่ง
เนื่องจากมี 2D แล้วจะมี 3D? อาจจะมีบางอย่างในอนาคต แต่ไม่ใช่ตอนนี้ ลองใช้ปากกา 2 มิตินี้ก่อน
! เราจะใส่ปากกาอีกสองสามเล่มให้สำรองได้หรือไม่? คำตอบคือไม่
ฉันต้องการถามคำถาม: คุณใช้ปากกากี่ตัวในเวลาเดียวกันเมื่อวาดภาพ? ฉันเชื่อว่า 99.9% ของผู้คนสามารถใช้งานได้เท่านั้น แม้ว่าอาจารย์ศิลปะการต่อสู้บางคนเช่น Xiaolongnu สามารถวาดด้วยมือทั้งสองในเวลาเดียวกัน แต่นี่เป็นสิ่งที่ไม่สมจริงสำหรับคนธรรมดาใช่ไหม?
ดังนั้นตอนนี้คุณสามารถรู้สึกโล่งใจเพราะแท็ก HTML5 Canvas ยังรองรับการใช้ปากกาเดียวในเวลาเดียวกัน!
นักเรียนบางคนที่คุ้นเคยกับ JS อาจต้องการฉลาด: ฉันใช้วิธีการรับแปรงด้วยวิธีก่อนหน้านี้เพื่อรับปากกาอีกสองสามอย่างจะไม่เพียงพอหรือไม่? -
ตัวอย่างเช่น:
var con = cvs.getContext ('2d');
var ctx = cvs.getContext ('2d');
ฮ่าฮ่าฮ่าฮ่าดูเหมือนว่าจะประสบความสำเร็จ ฉันคิดอย่างนั้นก่อนการทดสอบ แต่อันที่จริงนี่เป็นเพียงภาพลวงตา!
เพราะฉันพบว่าฉันจุ่มหนึ่งในปากกาในหมึกสีแดงและปากกาอีกอันก็จุ่มลงในหมึกสีแดงโดยอัตโนมัติ! เพราะปากกาทั้งสองเป็นหนึ่ง! มีเพศสัมพันธ์
หากคุณต้องการวาดสีที่แตกต่างกันวิธีคือการจุ่มปากกาที่ไม่เหมือนใครนี้ให้เป็นสีใหม่
นี่ไม่ใช่ข้อได้เปรียบ แต่เป็นข้อบกพร่องคุณจะได้สัมผัสกับมันในอนาคต
ประสานงาน
โลก 2D เป็นเครื่องบิน ในการกำหนดจุดบนระนาบจำเป็นต้องมีค่าสองค่าการพิกัด X และพิกัด Y นี่เป็นแนวคิดพื้นฐานที่สำคัญมาก แต่เนื่องจากทุกคนได้เรียนรู้คณิตศาสตร์ฉันจะไม่พูดถึงเรื่องนี้มากนัก
ต้นกำเนิดของผืนผ้าใบคือมุมซ้ายบนเหมือนกับแฟลช แต่สิ่งที่น่ารำคาญมากคือต้นกำเนิดในคณิตศาสตร์คือมุมซ้ายล่าง นี้...
อื่น
Canvas มีคุณสมบัติที่แตกต่างจากผืนผ้าใบจริงซึ่งก็คือมีความโปร่งใสตามค่าเริ่มต้นและไม่มีสีพื้นหลัง นี่เป็นสิ่งสำคัญมากตลอดเวลา