คำถามติดแท็ก canvas

Canvas เป็นคำทั่วไปสำหรับพื้นผิวการวาดที่ใช้กับ API เอาต์พุตกราฟิกรูปแบบอิสระจำนวนมาก ใช้แท็กนี้กับแท็กอื่นที่ระบุ API กราฟิกเฉพาะที่ใช้ร่วมกับภาษาโปรแกรมและสภาพแวดล้อมเป้าหมาย: [android], [uwp], [wpf], [tkinter], [java], [html5], [chart.js] เป็นต้นรวมทั้งแท็กผ้าใบที่เฉพาะเจาะจงเช่น [android-canvas], [html5-canvas], [tkinter-canvas] หากเหมาะสม

5
อัลกอริทึมการปูกระเบื้องแผนที่
แผนที่ ฉันกำลังสร้าง RPG แบบเรียงต่อกันพร้อมจาวาสคริปต์โดยใช้ความสูงของเสียง perlin จากนั้นกำหนดประเภทของไทล์ตามความสูงของเสียง แผนที่จะมีลักษณะดังนี้ (ในมุมมองย่อแผนที่) ฉันมีอัลกอริทึมที่ค่อนข้างง่ายซึ่งแยกค่าสีจากแต่ละพิกเซลของภาพและแปลงเป็นจำนวนเต็ม (0-5) ขึ้นอยู่กับตำแหน่งระหว่าง (0-255) ซึ่งสอดคล้องกับไทล์ในพจนานุกรมกระเบื้อง อาร์เรย์ 200x200 นี้จะถูกส่งไปยังไคลเอนต์ จากนั้นเอ็นจิ้นจะกำหนดไทล์จากค่าในอาเรย์แล้วนำไปวางบนผืนผ้าใบ ดังนั้นฉันจึงจบลงด้วยโลกที่น่าสนใจที่มีคุณสมบัติการมองที่เหมือนจริง: ภูเขาทะเล ฯลฯ ตอนนี้สิ่งต่อไปที่ฉันอยากทำคือใช้อัลกอริธึมผสมบางชนิดที่จะทำให้แผ่นกระเบื้องกลมกลืนกับเพื่อนบ้านได้อย่างกลมกลืนหากเพื่อนบ้านไม่ได้เป็นแบบเดียวกัน แผนที่ตัวอย่างด้านบนคือสิ่งที่ผู้เล่นเห็นในแผนที่ย่อ บนหน้าจอพวกเขาเห็นเวอร์ชันที่แสดงผลของส่วนที่ทำเครื่องหมายโดยสี่เหลี่ยมสีขาว ตำแหน่งที่ไทล์ถูกเรนเดอร์ด้วยรูปภาพแทนที่จะเป็นพิกเซลสีเดียว นี่คือตัวอย่างของสิ่งที่ผู้ใช้จะเห็นในแผนที่ แต่มันไม่ใช่ตำแหน่งเดียวกับวิวพอร์ตด้านบนแสดง! มันอยู่ในมุมมองนี้ที่ฉันต้องการให้การเปลี่ยนแปลงเกิดขึ้น อัลกอริทึม ฉันคิดอัลกอริธึมง่ายๆที่จะสำรวจแผนที่ภายในวิวพอร์ตและแสดงภาพอื่นที่ด้านบนสุดของแต่ละไทล์โดยให้เป็นภาพถัดจากไทล์ประเภทอื่น (ไม่เปลี่ยนแผนที่เพียงแสดงภาพพิเศษบางส่วน) แนวคิดของอัลกอริทึมคือแสดงโปรไฟล์เพื่อนบ้านของกระเบื้องปัจจุบัน: นี่เป็นสถานการณ์ตัวอย่างของสิ่งที่เอ็นจิ้นอาจต้องเรนเดอร์โดยไทล์ปัจจุบันจะถูกทำเครื่องหมายด้วย X อาร์เรย์ 3x3 ถูกสร้างขึ้นและอ่านค่ารอบ ๆ ดังนั้นตัวอย่างนี้อาร์เรย์จะมีลักษณะเช่นนี้ [ [1,2,2] [1,2,2] [1,1,2] ]; ความคิดของฉันคือการหาชุดของกรณีสำหรับการกำหนดค่าไทล์ที่เป็นไปได้ ในระดับที่ง่ายมาก: if(profile[0][1] != profile[1][1]){ //draw a …

7
HTML5 Canvas 100 ความกว้างความสูงของวิวพอร์ต
ฉันกำลังพยายามสร้างองค์ประกอบผ้าใบที่ใช้ความกว้างและความสูงของวิวพอร์ตได้ 100% คุณสามารถเห็นในตัวอย่างของฉันที่นี่ที่เกิดขึ้นอย่างไรก็ตามมันคือการเพิ่มแถบเลื่อนทั้งใน Chrome และ FireFox ฉันจะป้องกันแถบเลื่อนพิเศษและเพียงแค่กำหนดความกว้างและความสูงของหน้าต่างให้เท่ากับขนาดของผืนผ้าใบได้อย่างไร
151 jquery  html  canvas  viewport 


14
HTML5 Canvas Resize (Downscale) ภาพคุณภาพสูงหรือไม่
ฉันใช้องค์ประกอบผ้าใบ HTML5 เพื่อปรับขนาดภาพฉันเบราว์เซอร์ของฉัน ปรากฎว่ามีคุณภาพต่ำมาก ฉันพบสิ่งนี้: ปิดใช้งานการแก้ไขเมื่อปรับขนาด <canvas>แต่ไม่ช่วยเพิ่มคุณภาพ ด้านล่างนี้คือรหัส css และ js ของฉันรวมถึงรูปภาพที่เรียกว่า Photoshop และปรับขนาดใน Canvas API ฉันต้องทำอย่างไรเพื่อให้ได้คุณภาพสูงสุดเมื่อปรับขนาดรูปภาพในเบราว์เซอร์ หมายเหตุ: ฉันต้องการลดขนาดรูปภาพขนาดใหญ่ลงเป็นรูปภาพขนาดเล็กปรับสีในพื้นที่วาดภาพและส่งผลลัพธ์จากพื้นที่ไปยังเซิร์ฟเวอร์ CSS: canvas, img { image-rendering: optimizeQuality; image-rendering: -moz-crisp-edges; image-rendering: -webkit-optimize-contrast; image-rendering: optimize-contrast; -ms-interpolation-mode: nearest-neighbor; } JS: var $img = $('<img>'); var $originalCanvas = $('<canvas>'); $img.load(function() { var originalContext = $originalCanvas[0].getContext('2d'); originalContext.imageSmoothingEnabled …

23
คุณจะค้นหาความสูงของข้อความบนผ้าใบ HTML ได้อย่างไร
spec มีฟังก์ชั่น context.measureText (ข้อความ) ที่จะบอกคุณว่าต้องใช้ความกว้างเท่าใดในการพิมพ์ข้อความนั้น แต่ฉันไม่สามารถหาวิธีที่จะค้นหาความสูงของมันได้ ฉันรู้ว่ามันขึ้นอยู่กับฟอนต์ แต่ฉันไม่รู้ว่าจะแปลงสตริงฟอนต์เป็นความสูงข้อความ
148 javascript  text  canvas 

10
การควบคุม fps ด้วย requestAnimationFrame?
ดูเหมือนว่าrequestAnimationFrameจะเป็นวิธีการทำให้สิ่งต่างๆเคลื่อนไหวโดยพฤตินัยแล้ว มันทำงานได้ดีสำหรับฉันเป็นส่วนใหญ่ แต่ตอนนี้ฉันกำลังพยายามทำแอนิเมชั่นแคนวาสและฉันสงสัยว่า: มีวิธีใดบ้างที่จะทำให้แน่ใจว่ามันทำงานที่เฟรมต่อวินาที? ฉันเข้าใจว่าจุดประสงค์ของ RAF คือเพื่อให้ภาพเคลื่อนไหวที่ราบรื่นสม่ำเสมอและฉันอาจเสี่ยงต่อการทำให้แอนิเมชั่นขาด ๆ หาย ๆ แต่ตอนนี้ดูเหมือนว่าจะทำงานด้วยความเร็วที่แตกต่างกันอย่างมากโดยพลการและฉันสงสัยว่ามีวิธีต่อสู้หรือไม่ อย่างนั้น ฉันจะใช้setIntervalแต่ฉันต้องการการเพิ่มประสิทธิภาพที่ rAF เสนอ (โดยเฉพาะหยุดโดยอัตโนมัติเมื่อแท็บอยู่ในโฟกัส) ในกรณีที่มีคนต้องการดูรหัสของฉันมันค่อนข้างมาก: animateFlash: function() { ctx_fg.clearRect(0,0,canvasWidth,canvasHeight); ctx_fg.fillStyle = 'rgba(177,39,116,1)'; ctx_fg.strokeStyle = 'none'; ctx_fg.beginPath(); for(var i in nodes) { nodes[i].drawFlash(); } ctx_fg.fill(); ctx_fg.closePath(); var instance = this; var rafID = requestAnimationFrame(function(){ instance.animateFlash(); }) var unfinishedNodes = …

10
วิธีบันทึก Canvas เป็นรูปภาพด้วย canvas.toDataURL ()
ขณะนี้ฉันกำลังสร้างแอพพลิเคชั่นบนเว็บ HTML5 และแอพพื้นเมืองของ Phonegap และฉันไม่สามารถหาวิธีการบันทึกผืนผ้าใบของฉันเป็นรูปภาพcanvas.toDataURL()ได้ ใครสามารถช่วยฉันออก นี่คือรหัสมีอะไรผิดปกติกับมัน? // ผ้าใบของฉันชื่อ "canvasSignature" JavaScript: function putImage() { var canvas1 = document.getElementById("canvasSignature"); if (canvas1.getContext) { var ctx = canvas1.getContext("2d"); var myImage = canvas1.toDataURL("image/png"); } var imageElement = document.getElementById("MyPix"); imageElement.src = myImage; } HTML5: <div id="createPNGButton"> <button onclick="putImage()">Save as Image</button> </div>


8
วิธีที่ดีที่สุดในการตรวจสอบว่า HTML5 <canvas> ไม่รองรับ
วิธีมาตรฐานในการจัดการกับสถานการณ์ที่เบราว์เซอร์ไม่สนับสนุน&lt;canvas&gt;แท็กHTML5 คือการฝังเนื้อหาทางเลือกเช่น: &lt;canvas&gt;Your browser doesn't support "canvas".&lt;/canvas&gt; แต่ส่วนที่เหลือของหน้ายังคงเหมือนเดิมซึ่งอาจไม่เหมาะสมหรือทำให้เข้าใจผิด ฉันต้องการตรวจจับการไม่สนับสนุนผืนผ้าใบบางอย่างเพื่อให้ฉันสามารถนำเสนอส่วนที่เหลือของหน้าเว็บของฉันตามนั้น คุณจะแนะนำอะไร

10
วิธีการวาดเส้นโค้งที่ราบรื่นผ่านจุด N โดยใช้ผ้าใบ HTML5 ของจาวาสคริปต์
สำหรับแอปพลิเคชันการวาดภาพฉันกำลังบันทึกพิกัดการเคลื่อนที่ของเมาส์ไปยังอาร์เรย์แล้ววาดด้วย lineTo เส้นที่เกิดจะไม่เรียบ ฉันจะสร้างเส้นโค้งเดียวระหว่างจุดที่รวบรวมทั้งหมดได้อย่างไร ฉัน googled แต่ฉันได้พบเพียง 3 ฟังก์ชั่นสำหรับการวาดเส้น: สำหรับ 2 lineToจุดตัวอย่างการใช้งานเพียงแค่ สำหรับ 3 จุดตัวอย่างquadraticCurveToสำหรับ 4 จุดตัวอย่าง, bezierCurveTo. (ฉันพยายามวาดจุดbezierCurveToทุกๆ 4 จุดในอาร์เรย์ แต่สิ่งนี้ทำให้เกิดการหักงอทุกๆ 4 จุดตัวอย่างแทนที่จะเป็นเส้นโค้งที่ราบรื่นต่อเนื่อง) ฉันจะเขียนฟังก์ชันเพื่อวาดเส้นโค้งที่ราบรื่นโดยมีจุดตัวอย่าง 5 จุดขึ้นไปได้อย่างไร

5
การวาดไฟล์ SVG บนผ้าใบ HTML5
มีวิธีเริ่มต้นในการวาดไฟล์ SVG ลงบนผืนผ้าใบ HTML5 หรือไม่ Google Chrome รองรับการโหลด SVG เป็นรูปภาพ (และใช้งานง่าย ๆdrawImage) แต่คอนโซลนักพัฒนาซอฟต์แวร์เตือนสิ่งresource interpreted as image but transferred with MIME type image/svg+xmlนั้น ฉันรู้ว่ามีความเป็นไปได้ที่จะแปลง SVG เป็นคำสั่ง canvas (เช่นในคำถามนี้ ) แต่ฉันหวังว่าจะไม่จำเป็น ฉันไม่สนใจเบราว์เซอร์รุ่นเก่า (ดังนั้นถ้า FireFox 4 และ IE 9 จะรองรับบางอย่างก็เพียงพอแล้ว)
131 html  canvas  svg 

2
วิธีคัดลอกเนื้อหาของผืนผ้าใบหนึ่งไปยังผืนผ้าใบอื่นในเครื่อง
ฉันต้องการคัดลอกเนื้อหาทั้งหมดของผืนผ้าใบหนึ่งผืนและถ่ายโอนไปยังอีกที่หนึ่งทางฝั่งไคลเอ็นต์ ฉันคิดว่าฉันจะใช้canvas.toDataURL()and context.drawImage()method เพื่อนำไปใช้ แต่ฉันพบปัญหาบางประการ วิธีแก้ปัญหาของฉันคือรับCanvas.toDataURL()และเก็บสิ่งนี้ไว้ในออบเจ็กต์รูปภาพใน Javascript จากนั้นใช้context.drawImage()วิธีการวางกลับ อย่างไรก็ตามฉันเชื่อว่าtoDataURLเมธอดจะส่งคืนแท็กที่เข้ารหัส 64 บิตพร้อมกับ"data:image/png;base64,"อยู่ข้างหน้า ดูเหมือนว่าจะไม่ใช่แท็กที่ถูกต้อง (ฉันสามารถใช้ RegEx บางตัวเพื่อลบสิ่งนี้ได้เสมอ) แต่สตริงที่เข้ารหัส 64 บิตนั้นหลังจาก"data:image/png;base64,"สตริงย่อยเป็นรูปภาพที่ถูกต้องหรือไม่ ฉันสามารถพูดimage.src=iVBORw...ASASDASและวาดสิ่งนี้กลับมาบนผืนผ้าใบได้ไหม ฉันได้ดูปัญหาที่เกี่ยวข้องแล้ว: แสดงภาพแคนวาสจากผืนผ้าใบหนึ่งไปยังผืนผ้าใบอื่นโดยใช้ base64 แต่วิธีแก้ปัญหาดูเหมือนจะไม่ถูกต้อง
129 html  canvas 

7
ฉันจะเพิ่มตัวจัดการเหตุการณ์ onClick แบบง่ายให้กับองค์ประกอบ canvas ได้อย่างไร
ฉันเป็นโปรแกรมเมอร์ Java ที่มีประสบการณ์ แต่กำลังมองหาสิ่งต่างๆเกี่ยวกับ JavaScript / HTML5 เป็นครั้งแรกในรอบทศวรรษ ฉันนิ่งงันกับสิ่งที่ควรจะง่ายที่สุดเท่าที่เคยมีมา ตัวอย่างเช่นฉันแค่อยากวาดบางอย่างแล้วเพิ่มตัวจัดการเหตุการณ์เข้าไป ฉันแน่ใจว่าฉันทำอะไรโง่ ๆ แต่ฉันค้นหาจนทั่วแล้วและไม่มีอะไรที่แนะนำ (เช่นคำตอบสำหรับคำถามนี้: เพิ่มคุณสมบัติ onclick เพื่อป้อนข้อมูลด้วย JavaScript ) ฉันใช้ Firefox 10.0.1 รหัสของฉันตาม คุณจะเห็นบรรทัดแสดงความคิดเห็นหลายบรรทัดและในตอนท้ายของแต่ละบรรทัดจะมีคำอธิบายว่าเกิดอะไรขึ้น (หรือไม่เกิดอะไรขึ้น) ไวยากรณ์ที่ถูกต้องที่นี่คืออะไร? ฉันจะบ้า! &lt;html&gt; &lt;body&gt; &lt;canvas id="myCanvas" width="300" height="150"/&gt; &lt;script language="JavaScript"&gt; var elem = document.getElementById('myCanvas'); // elem.onClick = alert("hello world"); - displays alert without clicking // …

5
ปิดใช้งานการแก้ไขเมื่อปรับขนาด <canvas>
หมายเหตุ : นี้จะทำอย่างไรกับวิธีการที่องค์ประกอบผ้าใบที่มีอยู่จะแสดงผลเมื่อปรับขนาดขึ้น ,ไม่ได้จะทำอย่างไรกับสายหรือกราฟิกจะแสดงผลบนพื้นผิวผ้าใบ ในคำอื่น ๆ นี้มีทุกสิ่งที่จะทำอย่างไรกับการแก้ไขขององค์ประกอบที่ปรับขนาดได้และไม่มีอะไรจะทำอย่างไรกับการลดรอยหยักของกราฟิกถูกวาดบนผืนผ้าใบ ฉันไม่ได้กังวลว่าเบราว์เซอร์จะลากเส้นอย่างไร ฉันดูแลเกี่ยวกับวิธีการเบราว์เซอร์วาทกรรมองค์ประกอบผ้าใบตัวเองเมื่อมีการปรับขนาดขึ้น มีคุณสมบัติผ้าใบหรือการตั้งค่าเบราว์เซอร์ที่ฉันสามารถเปลี่ยนโดยทางโปรแกรมเพื่อปิดใช้งานการแก้ไขเมื่อปรับขนาด&lt;canvas&gt;องค์ประกอบได้หรือไม่ โซลูชันข้ามเบราว์เซอร์เหมาะอย่างยิ่ง แต่ไม่จำเป็น เบราว์เซอร์ที่ใช้ Webkit เป็นเป้าหมายหลักของฉัน ประสิทธิภาพเป็นสิ่งสำคัญมาก คำถามนี้คล้ายกันมากที่สุด แต่ไม่ได้อธิบายถึงปัญหาอย่างเพียงพอ สำหรับสิ่งที่คุ้มค่าฉันพยายามimage-rendering: -webkit-optimize-contrastแล้ว แอปพลิเคชันนี้จะเป็นเกม 8 บิตสไตล์ "ย้อนยุค" ที่เขียนด้วย HTML5 + JS เพื่อให้ชัดเจนว่าฉันต้องการอะไร เพื่อเป็นตัวอย่างนี่คือตัวอย่าง ( เวอร์ชันสด ) สมมติว่าฉันมีผ้าใบขนาด 21x21 ... &lt;canvas id='b' width='21' height='21'&gt;&lt;/canvas&gt; ... ซึ่งมี css ที่ทำให้องค์ประกอบใหญ่ขึ้น 5 เท่า (105x105): canvas { border: …
126 javascript  html  canvas 


โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.