การเขียนโปรแกรม canvas

9

จะวาดรูปหลายเหลี่ยมบนผ้าใบ HTML5 ได้อย่างไร?

ฉันต้องการรู้วิธีวาดรูปหลายเหลี่ยมบนผืนผ้าใบ โดยไม่ต้องใช้ jQuery หรืออะไรแบบนั้น

96 javascript css html canvas

9

จำกัด จำนวนป้ายกำกับบนแผนภูมิเส้น Chart.js

ฉันต้องการแสดงจุดทั้งหมดในแผนภูมิของฉันจากข้อมูลที่ฉันได้รับ แต่ฉันไม่ต้องการแสดงป้ายกำกับทั้งหมดสำหรับพวกเขาเนื่องจากแผนภูมินั้นอ่านไม่ได้มากนัก ฉันกำลังมองหาในเอกสาร แต่ไม่พบพารามิเตอร์ใด ๆ ที่จะ จำกัด สิ่งนี้ ฉันไม่ต้องการใช้เพียงสามป้ายเนื่องจากแผนภูมิถูก จำกัด ไว้ที่สามจุด เป็นไปได้ไหม? ฉันมีบางอย่างในขณะนี้: ถ้าฉันสามารถออกทุกๆสามในสี่ป้ายก็จะดีมาก แต่ฉันไม่พบอะไรเลยเกี่ยวกับตัวเลือกป้ายกำกับ

96 javascript css canvas charts chart.js

10

SVG และ HTML5 Canvas แตกต่างกันอย่างไร

SVG และ HTML5 Canvas แตกต่างกันอย่างไร ดูเหมือนทั้งคู่จะทำแบบเดียวกันกับฉัน โดยพื้นฐานแล้วพวกเขาทั้งคู่วาดภาพเวกเตอร์โดยใช้จุดพิกัด ฉันขาดอะไรไป? อะไรคือความแตกต่างที่สำคัญระหว่าง SVG และ HTML5 Canvas เหตุใดฉันจึงควรเลือกอย่างใดอย่างหนึ่ง

92 html canvas svg

6

วิธีเติมผ้าใบทั้งผืนด้วยสีเฉพาะ

วิธีเติม HTML5 ทั้งหมด<canvas>ด้วยสีเดียว ฉันเห็นวิธีแก้ปัญหาบางอย่างเช่นนี้เพื่อเปลี่ยนสีพื้นหลังโดยใช้ CSS แต่นี่ไม่ใช่วิธีแก้ปัญหาที่ดีเนื่องจากผืนผ้าใบยังคงโปร่งใสสิ่งเดียวที่เปลี่ยนไปคือสีของพื้นที่ที่มีอยู่ อีกวิธีหนึ่งคือการสร้างบางสิ่งที่มีสีภายในผืนผ้าใบเช่นสี่เหลี่ยมผืนผ้า ( ดูที่นี่ ) แต่ก็ยังไม่เติมสีทั้งผืนผ้าใบ (ในกรณีที่ผืนผ้าใบใหญ่กว่ารูปร่างที่เราสร้างขึ้น) มีวิธีแก้ไขในการเติมผ้าใบทั้งผืนด้วยสีเฉพาะหรือไม่?

92 javascript html canvas

10

เหตุใด canvas.toDataURL () จึงมีข้อยกเว้นด้านความปลอดภัย

ฉันนอนหลับไม่เพียงพอหรืออะไร? รหัสต่อไปนี้ var frame=document.getElementById("viewer"); frame.width=100; frame.height=100; var ctx=frame.getContext("2d"); var img=new Image(); img.src="http://www.ansearch.com/images/interface/item/small/image.png" img.onload=function() { // draw image ctx.drawImage(img, 0, 0) // Here's where the error happens: window.open(frame.toDataURL("image/png")); } กำลังแสดงข้อผิดพลาดนี้: SECURITY_ERR: DOM Exception 18 ไม่มีทางที่จะไม่ได้ผล! ใครช่วยอธิบายเรื่องนี้หน่อยได้ไหม?

90 javascript html canvas cross-domain

8

ปรับขนาดภาพด้วยผ้าใบจาวาสคริปต์ (อย่างราบรื่น)

ฉันกำลังพยายามปรับขนาดภาพด้วยแคนวาส แต่ฉันไม่รู้ว่าจะทำอย่างไรให้เรียบ ใน photoshop เบราว์เซอร์และอื่น ๆ มีอัลกอริทึมบางอย่างที่พวกเขาใช้ (เช่น bicubic, bilinear) แต่ฉันไม่รู้ว่าสิ่งเหล่านี้ถูกสร้างขึ้นในผืนผ้าใบหรือไม่ นี่คือซอของฉัน: http://jsfiddle.net/EWupT/ var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); canvas.width=300 canvas.height=234 ctx.drawImage(img, 0, 0, 300, 234); document.body.appendChild(canvas); อันแรกคือแท็กรูปภาพที่ปรับขนาดตามปกติและอันที่สองคือแคนวาส สังเกตว่าผ้าใบไม่เรียบเท่าไหร่ ฉันจะบรรลุ 'ความราบรื่น' ได้อย่างไร?

90 javascript html image canvas html5-canvas

2

Base64 ข้อมูล PNG ไปยังผ้าใบ HTML5

ฉันต้องการโหลดภาพ PNG ที่เข้ารหัสใน Base64 เป็นองค์ประกอบ canvas ฉันมีรหัสนี้: <html> <head> </head> <body> <canvas id="c"></canvas> <script type="text/javascript"> var canvas = document.getElementById("c"); var ctx = canvas.getContext("2d"); data = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAAXNSR0IArs4c6QAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oMCRUiMrIBQVkAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAADElEQVQI12NgoC4AAABQAAEiE+h1AAAAAElFTkSuQmCC"; ctx.drawImage(data, 0, 0); </script> </body> </html> ใน Chrome 8 ฉันได้รับข้อผิดพลาด: Uncaught TypeError: Type error และใน Firebug ของ Firefox สิ่งนี้: "ประเภทของวัตถุไม่เข้ากันกับประเภทที่คาดไว้ของพารามิเตอร์ที่เกี่ยวข้องกับวัตถุ" code: "17" ใน base64 …

90 html canvas png base64

12

ฉันสามารถปิดการลบรอยหยักในองค์ประกอบ <canvas> HTML ได้หรือไม่

ฉันกำลังเล่นกับ<canvas>องค์ประกอบวาดเส้นและอื่น ๆ ฉันสังเกตว่าเส้นทแยงมุมของฉันมีการต่อต้านการดัด ฉันชอบรูปลักษณ์ที่ดูหยาบสำหรับสิ่งที่ฉันกำลังทำ - มีวิธีใดในการปิดคุณสมบัตินี้หรือไม่?

88 javascript html canvas antialiasing

3

ปิดใช้งานการเลื่อนปุ่มลูกศรในเบราว์เซอร์ของผู้ใช้

ฉันกำลังสร้างเกมโดยใช้ผ้าใบและจาวาสคริปต์ เมื่อหน้ายาวเกินหน้าจอ (แสดงความคิดเห็น ฯลฯ ) การกดลูกศรลงจะเลื่อนหน้าลงและทำให้เกมไม่สามารถเล่นได้ ฉันจะทำอย่างไรเพื่อป้องกันไม่ให้หน้าต่างเลื่อนเมื่อผู้เล่นต้องการเลื่อนลง ฉันเดาว่าเป็นเกม Java และนี่ไม่ใช่ปัญหาตราบใดที่ผู้ใช้คลิกที่เกม ฉันลองวิธีแก้ปัญหาจาก: วิธีปิดใช้งานการเลื่อนหน้าใน FF ด้วยปุ่มลูกศรแต่ฉันไม่สามารถใช้งานได้

87 javascript canvas scroll arrow-keys

13

ปรับขนาดแคนวาส Chart.js

ใน ( ข้อผิดพลาดพื้นที่ทำงานของ Android WebView HTML5 ) ฉันโพสต์คำถามเกี่ยวกับการลงจุดกราฟโดยใช้ไลบรารี Graph.js ปัญหาที่ฉันมีตอนนี้คือถ้าฉันเรียกใช้ฟังก์ชันเพื่อลงจุดกราฟหลาย ๆ ครั้งผืนผ้าใบจะปรับขนาดทุกครั้ง ทุกครั้งที่กราฟถูกวาดใหม่เป็นผืนผ้าใบเดียวกันขนาดของกราฟจะเปลี่ยนไปด้วย ฉันลองตั้งขนาดของผืนผ้าใบด้วย แต่ไม่ประสบความสำเร็จ อะไรคือสาเหตุ? ทำไมผ้าใบถึงปรับขนาดทุกครั้ง?

87 html canvas chart.js

9

รับสีพิกเซลจากแคนวาสบน mousemove

เป็นไปได้ไหมที่จะรับพิกเซลค่า RGB ใต้เมาส์? มีตัวอย่างทั้งหมดนี้หรือไม่? นี่คือสิ่งที่ฉันมีจนถึงตอนนี้: function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var img = new Image(); img.src = 'Your URL'; img.onload = function(){ ctx.drawImage(img,0,0); }; canvas.onmousemove = function(e) { var mouseX, mouseY; if(e.offsetX) { mouseX = e.offsetX; mouseY = e.offsetY; } else if(e.layerX) { mouseX = e.layerX; mouseY = …

85 javascript html jquery canvas getimagedata

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