แม้ว่าทุกคนจะเรียกแท็กใหม่สำหรับ HTML5/"> HTML5 แต่ดูเหมือนว่าผ้าใบเป็นของความรู้ใหม่เกี่ยวกับภาษา HTML แต่ในความเป็นจริงการวาดภาพผ้าใบจะทำผ่าน JavaScript ดังนั้นหากคุณต้องการเรียนรู้การวาดผืนผ้าใบคุณต้องมีรากฐาน JavaScript
นอกจากนี้เมื่อวาดภาพมักจะมีคำศัพท์และจุดความรู้ในภาพอยู่เสมอดังนั้นหากคุณมีประสบการณ์ในการสร้างภาพหรือศิลปะมันจะง่ายกว่าที่จะเรียนรู้ผ้าใบ
ผ้าใบหมายถึงผ้าใบ ผ้าใบใน HTML5 นั้นคล้ายกับผืนผ้าใบในชีวิตจริงมาก ดังนั้นการเห็นเขาเป็นผืนผ้าใบที่จับต้องได้สามารถเร่งความเข้าใจได้
ผ้าใบในการวาดด้วยผ้าใบก่อนอื่นคุณต้องมีผืนผ้าใบ หากคุณไม่มีผืนผ้าใบในชั้นวางหนังสือของคุณคุณสามารถซื้อม้วนและใส่ได้แน่นอนเราไม่จำเป็นต้องใช้เงินบนหน้าเว็บเพียงแค่เขียนผ้าใบคล้ายกับ:
<canvas id = "cvs"> เบราว์เซอร์ของคุณไม่รองรับ Canvas </anvas>
ข้อความในแท็กสำหรับเบราว์เซอร์ที่ไม่รองรับผ้าใบและที่รองรับจะไม่ปรากฏให้เห็น
มีความจำเป็นที่จะต้องพูดถึงลักษณะของผืนผ้าใบนี้ มันมีสองคุณลักษณะดั้งเดิมคือความกว้างและความสูง ในเวลาเดียวกันเพราะมันเป็นองค์ประกอบ 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 นี่เป็นแนวคิดพื้นฐานที่สำคัญมาก
ต้นกำเนิดของผืนผ้าใบคือมุมซ้ายบนเหมือนกับแฟลช แต่สิ่งที่น่ารำคาญมากคือต้นกำเนิดในคณิตศาสตร์คือมุมซ้ายล่าง นี้...
ความรู้พื้นฐานบางอย่างเกี่ยวกับการวาดภาพก่อนอื่นคุณต้องรู้ว่าการเปลี่ยนแปลงพิกัดแบบใดที่จะวาดเส้นอะไร? ตัวอย่างเช่นหากพิกัด X มีขนาดใหญ่ขึ้นและพิกัด Y ยังคงไม่เปลี่ยนแปลงเส้นแนวนอนสามารถวาดได้ หากพิกัด y เปลี่ยนแปลง แต่พิกัด X ยังคงไม่เปลี่ยนแปลงเส้นแนวตั้งสามารถวาดได้
แน่นอนว่ายังมีเส้นทแยงมุมเส้นทแยงมุมซ้ายและเส้นทแยงมุมขวา หากคุณสามารถเปรียบเทียบภาพคนส่วนใหญ่สามารถเข้าใจได้ในครั้งเดียว มันน่าหดหู่มากขึ้นที่จะวาดด้วยรหัสและคุณสามารถนึกถึงมันผ่านการคิดเชิงตรรกะ
หากคุณรู้สึกสับสนเกี่ยวกับบรรทัดตอนนี้ไม่ต้องกังวลคุณจะเข้าใจพวกเขาตามธรรมชาติในระหว่างกระบวนการเรียนรู้
อื่นCanvas มีคุณสมบัติที่แตกต่างจากผืนผ้าใบจริงซึ่งก็คือมีความโปร่งใสตามค่าเริ่มต้นและไม่มีสีพื้นหลัง นี่เป็นสิ่งสำคัญมากตลอดเวลา