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

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

1012 javascript  html  canvas  html5-canvas  composite 

"รายงานข้อบกพร่อง" ของ Google หรือ "เครื่องมือคำติชม" ของ Google ช่วยให้คุณสามารถเลือกพื้นที่ของหน้าต่างเบราว์เซอร์ของคุณเพื่อสร้างภาพหน้าจอที่ส่งมาพร้อมกับข้อเสนอแนะของคุณเกี่ยวกับข้อบกพร่อง ภาพหน้าจอโดยเจสันขนาดเล็กที่โพสต์ในคำถามที่ซ้ำกัน พวกเขาทำสิ่งนี้ได้อย่างไร API ข้อเสนอแนะ JavaScript ของ Google ถูกโหลดจากที่นี่และภาพรวมของโมดูลความคิดเห็นจะแสดงให้เห็นถึงความสามารถในการจับภาพหน้าจอ

924 javascript  html  canvas  screenshot 

เป็นไปได้หรือไม่ที่จะจับภาพหรือพิมพ์สิ่งที่ปรากฏบนผืนผ้าใบ html เป็นรูปภาพหรือ pdf? ฉันต้องการสร้างภาพทางผ้าใบและสามารถสร้าง png จากภาพนั้นได้

719 javascript  html  canvas  export  png 

ฉันพยายามสร้างภาพขนาดย่อทางฝั่งไคลเอ็นต์โดยใช้จาวาสคริปต์และองค์ประกอบผ้าใบ แต่เมื่อฉันลดขนาดรูปภาพลงมันดูแย่มาก ดูเหมือนว่ามันจะลดขนาดใน Photoshop ด้วยชุด resampling เป็น 'เพื่อนบ้านที่ใกล้ที่สุด' แทน Bicubic ฉันรู้ว่ามันเป็นไปได้ที่จะทำให้สิ่งนี้ดูถูกต้องเพราะไซต์นี้สามารถทำได้โดยใช้ Canvas เช่นกัน ฉันพยายามใช้รหัสเดียวกันกับที่พวกเขาทำตามที่แสดงในลิงก์ "[แหล่งที่มา]" แต่มันก็ดูแย่มาก มีบางอย่างที่ฉันขาดหายไปการตั้งค่าบางอย่างที่จำเป็นต้องตั้งค่าหรือบางอย่าง แก้ไข: ฉันพยายามปรับขนาด jpg ฉันลองปรับขนาด jpg เดียวกันบนเว็บไซต์ที่เชื่อมโยงและใน photoshop และมันก็ดูดีเมื่อลดขนาด นี่คือรหัสที่เกี่ยวข้อง: reader.onloadend = function(e) { var img = new Image(); var ctx = canvas.getContext("2d"); var canvasCopy = document.createElement("canvas"); var copyContext = canvasCopy.getContext("2d"); img.onload = function() …

314 javascript  html  canvas  image-resizing 

วิธีที่ง่ายที่สุดในการเพิ่มตัวจัดการเหตุการณ์การคลิกไปยังองค์ประกอบ Canvas ที่จะส่งคืนพิกัด x และ y ของการคลิก (สัมพันธ์กับองค์ประกอบ Canvas) คืออะไร ไม่จำเป็นต้องใช้เบราว์เซอร์รุ่นเก่า Safari, Opera และ Firefox จะทำเช่นนั้น

276 javascript  canvas 

ฉันต้องการมีหน้าเว็บที่มีคำที่กึ่งกลางหนึ่งคำ ฉันต้องการให้คำนี้วาดด้วยอนิเมชั่นเช่นที่หน้า "เขียน" คำนั้นในลักษณะเดียวกับที่เราต้องการคือมันเริ่มต้นที่จุดหนึ่งแล้วลากเส้นและเส้นโค้งเมื่อเวลาผ่านไปซึ่งผลลัพธ์สุดท้ายคือ glyph ฉันไม่สนใจว่าสิ่งนี้จะทำด้วย<canvas>หรือ DOM และฉันไม่สนใจว่ามันจะทำกับ JavaScript หรือ CSS การขาดงานของ jQuery จะดี แต่ไม่จำเป็น ฉันจะทำสิ่งนี้ได้อย่างไร ฉันค้นหาอย่างละเอียดโดยไม่มีโชค

229 javascript  css  canvas  html5-canvas  css-shapes 

ปิด. คำถามนี้เป็นคำถามที่ไม่สามารถทำซ้ำหรือเกิดจากความผิดพลาด ไม่ยอมรับคำตอบในขณะนี้ ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้เป็นไปตามหัวข้อสำหรับ Stack Overflow ปิดให้บริการใน6 ปีที่ผ่านมา ปรับปรุงคำถามนี้ ให้อภัยชื่อตลก ฉันได้สร้างภาพตัวอย่างเล็ก ๆ ของลูกบอล 200 ลูกที่กระเด้งและปะทะกันทั้งกับกำแพงและซึ่งกันและกัน คุณสามารถดูสิ่งที่ฉันมีในขณะนี้ที่นี่: http://www.exeneva.com/html5/multipleBallsBouncingAndColliding/ ปัญหาคือว่าเมื่อใดก็ตามที่พวกเขาชนกันพวกเขาก็หายไป ฉันไม่แน่ใจว่าทำไม ใครสามารถช่วยฉันดูหน่อยได้ไหม? ปรับปรุง: เห็นได้ชัดว่าแถวลูกมีลูกที่มีพิกัดของ NaN ด้านล่างเป็นรหัสที่ฉันผลักลูกบอลไปยังอาร์เรย์ ฉันไม่แน่ใจทั้งหมดว่าพิกัดรับ NaN ได้อย่างไร // Variables var numBalls = 200; // number of balls var maxSize = 15; var minSize = 5; var maxSpeed = maxSize …

202 javascript  canvas  geometry  physics  collision 

เมื่อใช้<canvas>องค์ประกอบHTML5 ฉันต้องการโหลดไฟล์รูปภาพ (PNG, JPEG และอื่น ๆ ) วาดลงในผืนผ้าใบอย่างสมบูรณ์แล้วจางหายไปฉันได้คิดวิธีการโหลดรูปภาพและวาดลงใน ผืนผ้าใบ แต่ฉันไม่รู้วิธีเปลี่ยนความทึบเมื่อวาดแล้ว นี่คือรหัสที่ฉันมี: var canvas = document.getElementById('myCanvas'); if (canvas.getContext) { var c = canvas.getContext('2d'); c.globalAlpha = 0; var img = new Image(); img.onload = function() { c.drawImage(img, 0, 0); } img.src = 'image.jpg'; } ใครบางคนจะโปรดชี้ฉันในทิศทางที่ถูกต้องเช่นสถานที่ให้ตั้งหรือฟังก์ชั่นการโทรที่จะเปลี่ยนความทึบ?

196 html  canvas  transparency  opacity  alpha 

ฉันมี 2 ผืนผ้าใบหนึ่งใช้คุณลักษณะ HTML widthและheightขนาดมันอีกใช้ CSS: <canvas id="compteur1" width="300" height="300" onmousedown="compteurClick(this.id);"></canvas> <canvas id="compteur2" style="width: 300px; height: 300px;" onmousedown="compteurClick(this.id);"></canvas> Compteur1 แสดงอย่างที่ควรจะเป็น แต่ไม่ใช่ compteur2 เนื้อหาถูกวาดโดยใช้ JavaScript บนผืนผ้าใบขนาด 300x300 ทำไมจึงมีความแตกต่างในการแสดงผล?

195 css  html  canvas  height  width 

ผ้าใบ HTML5 ไม่มีวิธีการตั้งค่าพิกเซลเดียวอย่างชัดเจน อาจเป็นไปได้ที่จะตั้งค่าพิกเซลโดยใช้บรรทัดที่สั้นมาก แต่จากนั้นการลดรอยหยักและการขีดเส้นอาจรบกวน อีกวิธีหนึ่งคือการสร้างImageDataวัตถุขนาดเล็กและการใช้: context.putImageData(data, x, y) ที่จะวางไว้ในสถานที่ ใครสามารถอธิบายวิธีที่มีประสิทธิภาพและเชื่อถือได้ในการทำเช่นนี้?

184 html  canvas  pixel 

เป็นไปได้ไหมที่จะแก้ไขความกว้างและความสูงของcanvasองค์ประกอบHTML5 วิธีปกติคือต่อไปนี้: <canvas id="canvas" width="300" height="300"></canvas>

181 html  canvas 

หากไม่มีไลบรารีส่วนขยายเป็นไปได้หรือไม่ที่จะมีหลายชั้นในองค์ประกอบ Canvas เดียวกัน ดังนั้นถ้าฉันทำ clearRect ที่ชั้นบนสุดมันจะไม่ลบชั้นล่างสุด? ขอบคุณ

176 html  canvas  layer 

ใครรู้วิธีนี้สามารถทำได้? คุณจะใช้วัตถุผ้าใบ svg, jQuery ฯลฯ ได้หรือไม่

165 ipad  html  canvas  svg 

ฉันต้องการที่จะสามารถซูมเข้าในประเด็นภายใต้เมาส์ใน HTML 5 ผ้าใบเช่นซูมบนGoogle Maps ฉันจะบรรลุสิ่งนั้นได้อย่างไร

156 javascript  html  canvas 

ฉันมีรหัสการทำงานต่อไปนี้: ctx = document.getElementById("canvas").getContext('2d'); มีวิธีเขียนใหม่เพื่อใช้$หรือไม่ การทำเช่นนี้ล้มเหลว: ctx = $("#canvas").getContext('2d');

155 javascript  jquery  html  canvas