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

ฉันพยายามเปลี่ยนสิ่งที่ดูเหมือนจะเป็นสีพื้นหลังเริ่มต้นของผืนผ้าใบของฉันจากสีดำเป็นสีโปร่งใส / สีอื่น ๆ - แต่ไม่มีโชค HTML ของฉัน: <canvas id="canvasColor"> CSS ของฉัน: <style type="text/css"> #canvasColor { z-index: 998; opacity:1; background: red; } </style> ดังที่คุณเห็นในตัวอย่างออนไลน์ต่อไปนี้ฉันมีแอนิเมชั่นบางส่วนต่อท้ายผืนผ้าใบดังนั้นจึงไม่สามารถทำทึบได้: 0; บน id. ดูตัวอย่างสด: http://devsgs.com/preview/test/particle/ มีความคิดอย่างไรในการเขียนทับสีดำเริ่มต้น?

122 css  html  canvas  html5-canvas  three.js 

ฉันกำลังพยายามเลือกเทคโนโลยีที่เหมาะสมเพื่อใช้ในการอัปเดตโปรเจ็กต์ที่โดยทั่วไปแล้วจะแสดงจุดหลายพันจุดในกราฟที่สามารถซูมได้และสามารถเลื่อนได้ การใช้งานปัจจุบันโดยใช้ Protovis มีประสิทธิภาพต่ำ ตรวจสอบได้ที่นี่: http://www.planethunters.org/classify มีจุดประมาณ 2,000 จุดเมื่อซูมออกจนสุด ลองใช้ที่จับที่ด้านล่างเพื่อซูมเข้าเล็กน้อยแล้วลากเพื่อเลื่อนไปรอบ ๆ คุณจะเห็นว่ามันค่อนข้างขาด ๆ หาย ๆ และการใช้งาน CPU ของคุณอาจสูงถึง 100% ในหนึ่งคอร์เว้นแต่คุณจะมีคอมพิวเตอร์ที่เร็วมาก การเปลี่ยนพื้นที่โฟกัสแต่ละครั้งจะเรียกการวาดใหม่เป็นโปรโตวิสซึ่งค่อนข้างช้าและแย่กว่าเมื่อมีการดึงจุดมากขึ้น ฉันต้องการอัปเดตอินเทอร์เฟซบางอย่างรวมทั้งเปลี่ยนเทคโนโลยีการแสดงภาพที่เป็นพื้นฐานให้ตอบสนองกับภาพเคลื่อนไหวและการโต้ตอบมากขึ้น จากบทความต่อไปนี้ดูเหมือนว่าตัวเลือกจะอยู่ระหว่างไลบรารีที่ใช้ SVG อื่นหรือแบบผ้าใบ http://www.sitepoint.com/how-to-choose-between-canvas-and-svg/ d3.jsซึ่งงอกออกมาจาก Protovis เป็น SVG-based และควรจะเป็นดีกว่าที่การแสดงผลภาพเคลื่อนไหว อย่างไรก็ตามฉันสงสัยว่าจะดีขึ้นมากแค่ไหนและเพดานประสิทธิภาพของมันเป็นอย่างไร สำหรับเหตุผลที่ฉันยังพิจารณายกเครื่องสมบูรณ์มากขึ้นโดยใช้ห้องสมุดผ้าใบ-based เช่นKineticJS อย่างไรก็ตามก่อนที่ฉันจะใช้วิธีใดวิธีหนึ่งมากเกินไปฉันอยากได้ยินจากคนที่ทำเว็บแอปพลิเคชันที่คล้ายกันซึ่งมีข้อมูลจำนวนมากนี้และขอความเห็นจากพวกเขา สิ่งที่สำคัญที่สุดคือประสิทธิภาพโดยเน้นที่ความสะดวกในการเพิ่มคุณสมบัติการโต้ตอบอื่น ๆ และการเขียนโปรแกรมภาพเคลื่อนไหว อาจจะมีไม่เกิน 2,000 จุดในครั้งเดียวโดยมีแถบข้อผิดพลาดเล็ก ๆ ในแต่ละอัน การซูมเข้าออกและการเลื่อนไปมาจะต้องมีความราบรื่น หากไลบรารี SVG ล่าสุดเหมาะสมกับสิ่งนี้บางทีความสะดวกในการใช้ d3 จะมีมากกว่าการตั้งค่าที่เพิ่มขึ้นสำหรับ KineticJS …

114 html  canvas  svg  d3.js  kineticjs 

ฉันกำลังทำงานกับองค์ประกอบผ้าใบที่มีความสูง600ถึง1000พิกเซลและมีความกว้างหลายสิบหรือหลายแสนพิกเซล อย่างไรก็ตามหลังจากจำนวนพิกเซลที่กำหนด (ไม่ทราบแน่ชัด) ผืนผ้าใบจะไม่แสดงรูปร่างที่ฉันวาดด้วย JS อีกต่อไป มีใครรู้บ้างว่ามีขีด จำกัด ? ทดสอบทั้งใน Chrome 12 และ Firefox 4

112 javascript  html  canvas 

ฉันจะเปิดภาพใน Canvas ได้อย่างไร ซึ่งเข้ารหัส ฉันใช้ไฟล์ var strDataURI = oCanvas.toDataURL(); ผลลัพธ์คืออิมเมจ 64 ฐานที่เข้ารหัส ฉันจะวาดภาพนี้บนผืนผ้าใบได้อย่างไร? ฉันต้องการใช้strDataURI และสร้างภาพหรือไม่ มันเซ่อ? หากไม่เป็นเช่นนั้นสิ่งที่เป็นไปได้สำหรับการโหลดภาพบนผืนผ้าใบ?

112 image  html  canvas  data-uri 

เป็นไปได้ไหมที่จะสอบถามวัตถุ HTML Canvas เพื่อรับสีที่ตำแหน่งเฉพาะ

111 javascript  html  canvas 

ฉันต้องการวาดบนผ้าใบ HTML โดยใช้เมาส์ (เช่นวาดลายเซ็นวาดชื่อ ... ) ฉันจะดำเนินการนี้ได้อย่างไร

110 html  canvas  gesture-recognition  gestures 

ดูเหมือนว่าฉันจะไม่สามารถเพิ่มข้อความลงในผืนผ้าใบได้หากข้อความมี "\ n" ฉันหมายความว่าเส้นแบ่งไม่แสดง / ทำงาน ctxPaint.fillText("s ome \n \\n <br/> thing", x, y); โค้ดด้านบนจะวาด"s ome \n <br/> thing"เป็นบรรทัดเดียว นี่เป็นข้อ จำกัด ของ FillText หรือฉันทำผิด? "\ n" อยู่ที่นั่นและไม่ได้พิมพ์ออกมา แต่ก็ใช้ไม่ได้เช่นกัน

110 javascript  html  canvas  line  break 

ฉันกำลังทดลองกับองค์ประกอบผ้าใบใหม่ใน HTML ฉันแค่ต้องการเพิ่มรูปภาพลงในผืนผ้าใบ แต่ไม่ได้ผลด้วยเหตุผลบางประการ ฉันมีรหัสต่อไปนี้: HTML <canvas id="viewport"></canvas> CSS canvas#viewport { border: 1px solid white; width: 900px; } JS var canvas = document.getElementById('viewport'), context = canvas.getContext('2d'); make_base(); function make_base() { base_image = new Image(); base_image.src = 'img/base.png'; context.drawImage(base_image, 100, 100); } มีรูปภาพอยู่และฉันไม่พบข้อผิดพลาดของ JavaScript ภาพไม่ปรากฏ มันต้องเป็นอะไรที่เรียบง่ายจริงๆที่ฉันพลาด ...

108 javascript  html  canvas 

ปิด . คำถามนี้เป็นคำถามความคิดเห็นตาม ขณะนี้ยังไม่ยอมรับคำตอบ ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้สามารถตอบได้ด้วยข้อเท็จจริงและการอ้างอิงโดยแก้ไขโพสต์นี้ ปิดให้บริการใน7 ปีที่ผ่านมา ปรับปรุงคำถามนี้ ฉันกำลังตรวจสอบตัวเลือกสำหรับการทำงานกับแคนวาสในแอปพลิเคชัน HTML 5 ใหม่และสงสัยว่าสถานะปัจจุบันของไลบรารี JavaScript และเฟรมเวิร์กของผ้าใบ HTML เป็นอย่างไร โดยเฉพาะอย่างยิ่งมีเฟรมเวิร์กที่รองรับประเภทของสิ่งที่จำเป็นสำหรับการพัฒนาเกมเช่นแอนิเมชั่นที่ซับซ้อนการจัดการกราฟฉากการจัดการเหตุการณ์และการโต้ตอบของผู้ใช้หรือไม่? นอกจากนี้ยังยินดีที่จะพิจารณาผลิตภัณฑ์ทั้งเชิงพาณิชย์และโอเพ่นซอร์ส

107 javascript  frameworks  html  canvas 

ฉันค้นหาวิธีแก้ปัญหามาระยะหนึ่งแล้ว แต่ไม่พบอะไรเลย อาจจะเป็นแค่คำค้นหาของฉัน ฉันกำลังพยายามสร้างศูนย์ผ้าใบตามขนาดของหน้าต่างเบราว์เซอร์ ผ้าใบมีขนาด 800x600 และหากหน้าต่างมีขนาดต่ำกว่า 800x600 ก็ควรปรับขนาดเช่นกัน (แต่ตอนนี้ไม่สำคัญมาก)

106 html  canvas  css  resize 

ฉันมีแท็บรูปวาดแคนวาสและต้องการให้ lineWidth เป็นไปตามระยะห่างระหว่างการอัปเดตพิกัด mousemove สองครั้งล่าสุด ฉันจะแปลระยะทางเป็นความกว้างเองฉันแค่ต้องรู้วิธีหาระยะห่างระหว่างจุดเหล่านั้น (ฉันมีพิกัดของจุดเหล่านั้นแล้ว)

105 javascript  canvas 

ฉันพบโพสต์ที่แตกต่างกันเล็กน้อยและแม้แต่คำถามเกี่ยวกับ stackoverflow ที่ตอบคำถามนี้ โดยพื้นฐานแล้วฉันใช้สิ่งนี้เช่นเดียวกับโพสต์นี้ นี่คือปัญหาของฉัน เมื่อฉันอัปโหลดรูปภาพฉันต้องส่งแบบฟอร์มที่เหลือด้วย นี่คือ html ของฉัน: <form id="uploadImageForm" enctype="multipart/form-data"> <input name="imagefile[]" type="file" id="takePictureField" accept="image/*" onchange="uploadPhotos(\'#{imageUploadUrl}\')" /> <input id="name" value="#{name}" /> ... a few more inputs ... </form> ก่อนหน้านี้ฉันไม่จำเป็นต้องปรับขนาดรูปภาพดังนั้นจาวาสคริปต์ของฉันจึงมีลักษณะดังนี้: window.uploadPhotos = function(url){ var data = new FormData($("form[id*='uploadImageForm']")[0]); $.ajax({ url: url, data: data, cache: false, contentType: false, processData: false, …

104 javascript  html  canvas 

ฉันมีปัญหาในการติดตั้งการติดตั้งโมดูลผ้าใบในโหนด.. ดูเหมือนว่าจะมีบางอย่างเกิดขึ้นกับไคโรฉันได้รับข้อผิดพลาดนี้ ... npm http GET https://registry.npmjs.org/canvas npm http 304 https://registry.npmjs.org/canvas npm http GET https://registry.npmjs.org/nan npm http 304 https://registry.npmjs.org/nan > canvas@1.1.3 install /Users/plimb/Desktop/motion-therapy/node_modules/canvas > node-gyp rebuild Package cairo was not found in the pkg-config search path. Perhaps you should add the directory containing `cairo.pc' to the PKG_CONFIG_PATH environment variable No …

102 node.js  canvas  terminal  cairo 

ฉันจะรับความกว้างและความสูงขององค์ประกอบ canvas ใน JavaScript ได้อย่างไร นอกจากนี้ "บริบท" ของผืนผ้าใบที่ฉันอ่านอยู่เสมอคืออะไร

99 javascript  html  canvas 

เมื่อฉันวาดข้อความในผืนผ้าใบด้วยแบบอักษรที่โหลดผ่าน @ font-face ข้อความจะแสดงไม่ถูกต้อง มันไม่แสดงเลย (ใน Chrome 13 และ Firefox 5) หรือแบบอักษรผิด (Opera 11) ลักษณะการทำงานที่ไม่คาดคิดประเภทนี้เกิดขึ้นเฉพาะในรูปวาดแรกที่มีแบบอักษร หลังจากนั้นทุกอย่างก็ใช้ได้ดี มันเป็นพฤติกรรมมาตรฐานหรืออะไร? ขอบคุณ. PS: ต่อไปนี้เป็นซอร์สโค้ดของกรณีทดสอบ <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>@font-face and <canvas></title> <style id="css"> @font-face { font-family: 'Press Start 2P'; src: url('fonts/PressStart2P.ttf'); } </style> <style> canvas, pre { border: 1px solid black; padding: …

97 html  canvas  font-face