สิ่งตีพิมพ์ในหัวข้อ 'canvas'
ลาก่อน HTML สวัสดีแคนวาส!
ส่วนที่ 3: กลยุทธ์โดยรวมและสถาปัตยกรรมพื้นฐาน
คุณสามารถอ่านบทความก่อนหน้าของซีรี่ส์นี้ได้ "ที่นี่"
ห้องสมุด
ฉันต้องขอบคุณผู้อ่านทุกคนที่ตอบวิพากษ์วิจารณ์หัวข้อของบทความชุดนี้มาก เพราะการโพสต์ของพวกเขาทำให้ฉันปรับปรุงบทความ โดยเฉพาะอย่างยิ่ง พวกเขาทำให้ฉันรู้ว่าฉันพลาดบางสิ่งบางอย่างที่สำคัญมากไป นั่นก็คือห้องสมุด
หากไม่มีห้องสมุด ผลลัพธ์ที่ดีที่สุดที่ชุดบทความนี้น่าจะมีคือ “ ฉันเคยอ่านแนวคิดที่น่าสนใจเกี่ยวกับการสร้างเว็บแอปบางตัวโดยใช้ Canvas ล้วนๆ การสาธิตแบบง่ายๆ..
คำถามในหัวข้อ 'canvas'
พลิก ‹canvas› (หมุน 180 องศา) หลังจากเผยแพร่บนหน้าแล้ว
ฉันกำลังพยายามหมุนองค์ประกอบ canvas หลังจากที่เพิ่มเข้ากับ DOM แล้ว Canvas มีขนาด 600x50 และนี่คือรหัสที่อยู่ในมือ:
var canvas = document.getElementsByTagName('canvas')[2];
var ctx = canvas.getContext('2d');
ctx.translate(300, 25); // rotate @...
2172 มุมมอง
schedule
03.12.2023
กล้องบน HTML 5 Canvas
โปสเตอร์ครั้งแรกที่นี่
ฉันได้ค้นหาวิธีแก้ไขปัญหานี้มาหลายวันแล้ว แต่ก็ไม่มีประโยชน์ หากถูกถาม ฉันขอให้คุณเชื่อมโยงฉันเนื่องจากหาไม่พบ อย่างไรก็ตามนี่คือ:
ฉันกำลังทำงานกับแอปพื้นที่ทำงานแบบเรียงต่อกันและมีปัญหาในการเคลื่อนย้ายกล้อง...
1002 มุมมอง
schedule
02.01.2024
แอนิเมชั่น WebGL ของฉันช้าแม้จะมี requestAnimationFrame()
ฉันกำลังพยายามสร้างภาพเคลื่อนไหว webgl สำหรับพื้นหลังเว็บไซต์ของฉัน โดยได้รับแรงบันดาลใจจาก "threejs - Cloud exemple" ( http://mrdoob.com/lab/javascript/webgl/clouds/ ) บนคอมพิวเตอร์ของฉันดูเหมือนว่าจะค่อนข้างดี... แต่สำหรับพีซีบางเครื่องมันช้ามาก...
1996 มุมมอง
schedule
26.12.2023
ลบข้อความที่อัปเดตโดยใช้ไลบรารี Fabricjs Canvas
การเพิ่มองค์ประกอบข้อความ
function add_text() {
var myText = new fabric.Text(text,
{
fontSize: size,
fontFamily: fm,
strokeStyle: sc,
fill: fc,
left: myCanvas.getWidth()/2,
top:...
1036 มุมมอง
schedule
06.11.2023
ความสัมพันธ์ของเส้นโค้งเบซิเยร์กับวงรี?
ฉันต้องการวาดรูปวงรีบนผืนผ้าใบ html5 และฉันพบวิธีที่ดีสำหรับมันใน stackoverflow .แต่ฉันมีคำถามอื่น
function drawEllipse(ctx, x, y, w, h) {
var kappa = 0.5522848;
ox = (w / 2) * kappa, // control point offset horizontal
oy = (h / 2)...
8106 มุมมอง
schedule
13.11.2023
วิธีค้นหาพิกัดใหม่ของสี่เหลี่ยมหลังการหมุน
พิกัด Y ของสี่เหลี่ยมหลังการหมุนบนผืนผ้าใบ ดังที่แสดงในภาพ สี่เหลี่ยมจะถูกหมุนบนแกนจุดศูนย์กลาง หลังจากการหมุนและคืนค่าแคนวาสแล้ว ฉันต้องการค้นหาพิกัด X,Y ใหม่เหมือนที่แสดงในรูปภาพที่สอง ก่อนที่จุดการหมุนจะเป็น 50,50 และหลังจากการหมุนอาจเป็น 62,40...
4163 มุมมอง
schedule
30.12.2023
วาดเส้นประบนผืนผ้าใบ
ฉันจะวาดเส้นประบนผืนผ้าใบได้อย่างไร ฉันลองสิ่งนี้แล้ว:
Paint dashPaint = new Paint();
dashPaint.setARGB(255, 0, 0, 0);
dashPaint.setStyle(Paint.Style.STROKE);
dashPaint.setPathEffect(new DashPathEffect(new float[]{5, 10, 15, 20}, 0));...
28462 มุมมอง
schedule
03.11.2023
ทำให้วงกลมเติมเคลื่อนไหวโดยใช้ Canvas
โดยพื้นฐานแล้วฉันต้องการเติมวงกลมโดยใช้แคนวาส แต่มันเคลื่อนไหวได้เป็นเปอร์เซ็นต์ที่แน่นอน นั่นคือวงกลมจะเติมได้เพียง 80% เท่านั้น
ความรู้ด้านแคนวาสของฉันไม่น่าทึ่ง นี่คือภาพที่ฉันทำใน Photoshop เพื่อแสดงสิ่งที่ฉันต้องการ...
8515 มุมมอง
schedule
07.01.2024
ย้าย HTML5 Canvas พร้อมภาพพื้นหลัง
ฉันต้องการเห็นภาพไดอะแกรมขนาดใหญ่ที่วาดบนผืนผ้าใบ HTML5 ตามที่อธิบายไว้ด้านล่าง ลองจินตนาการถึงแผนที่โลก เป็นไปไม่ได้ที่จะแสดงภาพทั้งหมดพร้อมๆ กันด้วยรายละเอียดที่ "เหมาะสม" ดังนั้น บนผืนผ้าใบของฉัน ฉันอยากจะเลื่อนเมาส์ไปเหนือมันเพื่อดูประเทศอื่นๆ...
6476 มุมมอง
schedule
28.12.2023
การเรนเดอร์เอาต์พุต MathJax บน ‹canvas›
ฉันค้นหาหัวข้อนี้แล้ว แต่ไม่สามารถหาคำตอบโดยตรงได้ และฉันก็ใช้จาวาสคริปต์ไม่เก่งด้วย ดังนั้นฉันหวังว่าจะมีคนแสดงให้ฉันเห็นว่าต้องทำอย่างไร
ฉันแค่ต้องการแสดงคณิตศาสตร์ใน canvas2D ฉันใช้ context.fillText เพื่อส่งสตริงไปที่ canvas2d...
2524 มุมมอง
schedule
15.01.2024
การลดรอยหยักเมื่อวาดเส้นใน Canvas ใน Firefox
ฉันกำลังพยายามวาดไดอะแกรมด้วยแคนวาส และต้องการเส้นที่คมชัด ไม่ใช่การต่อต้านนามแฝง ฉันรู้เกี่ยวกับออฟเซ็ต 0.5 ที่คุณต้องใช้เพื่อทำให้เส้นตกบนพิกเซลของหน้าจอทุกประการ แต่ถึงอย่างนั้นฉันก็ได้รับเส้นต่อต้านนามแฝงใน Firefox ในขณะที่ทั้ง Chrome และ IE...
391 มุมมอง
schedule
17.12.2023
Paperscope และ Paperjs
ดังนั้นฉันจึงพยายามสร้างโปรเจ็กต์ที่มีองค์ประกอบแคนวาสสององค์ประกอบ โดยแต่ละองค์ประกอบมีเอกสารของตัวเอง และมีปุ่มด้านนอกของแต่ละองค์ประกอบที่ควบคุมฟังก์ชันบางอย่างภายในทั้งสององค์ประกอบ
ภายใต้เอกสารประกอบภายใต้ Paperscript ระบุว่า:
โปรดทราบ:...
1641 มุมมอง
schedule
27.12.2023
ฉันสามารถจัดเก็บหรือแคชรูปภาพในเครื่องใน React Native ได้หรือไม่
ฉันมีแอปข่าวและฉันต้องการจัดเก็บภาพไว้ในเครื่องเมื่อได้รับครั้งแรก
AsyncStorage ของ React Native ยอมรับข้อมูลสตริงคีย์-ค่า ฉันสามารถใช้มันได้หรือไม่?
ในเบราว์เซอร์ ฉันใช้ canvas เพื่อรับข้อมูล uri หรือ BlobBuilder เพื่อรับ BLOB...
2673 มุมมอง
schedule
01.11.2023
รูปภาพ Zoom_In & Zoom_Out บนผืนผ้าใบด้วยความช่วยเหลือของเมาส์ใน UWP Appliction
ฉันใช้โค้ดต่อไปนี้เพื่อลากและวางรูปภาพบนผืนผ้าใบ และด้วยความช่วยเหลือของการซูมแบบหยิก ฉันสามารถซูมรูปภาพบนแท็บด้วยการสัมผัส แต่ฉันอยากทำแบบเดียวกันบนเดสก์ท็อปด้วยความช่วยเหลือของเมาส์ เป็นไปได้ไหม. ฉันใหม่ในการเขียนโปรแกรม UWP...
407 มุมมอง
schedule
08.12.2023
ฉันจะรับภาพความละเอียดสูงจากผืนผ้าใบขนาดเล็กได้อย่างไร
ฉันกำลังใช้ผืนผ้าใบผืนเดียวในแอปพลิเคชันเว็บของฉัน และความสูงและความกว้างจริงอยู่ที่ 500px ฉันกำลังแสดงผืนผ้าใบนี้บนหน้าจอเป็นสี่เหลี่ยมจัตุรัส 500px แต่ฉันต้องการให้ภาพที่ส่งออกจากผืนผ้าใบนี้เป็นสี่เหลี่ยมจัตุรัส 1600px...
1912 มุมมอง
schedule
22.11.2023
แสดงแผนภูมิโต้ตอบหลายรายการในหน้าเดียวกันโดยใช้ Chart.js
ฉันต้องแสดงแผนภูมิสี่แผนภูมิในหน้าเดียวกัน เพื่อให้แผนภูมิเหล่านั้นตอบสนองโดยจะเปลี่ยนขนาดเมื่อมีการปรับขนาดหน้า ฉันใช้
<script src="js/Chart.bundle.js"> </script>
<div id="container" style="width: 100%;text-align:center">...
1272 มุมมอง
schedule
30.10.2023
การจัดการกับรูปภาพขนาดใหญ่ในผ้าใบ HTML5
ฉันมีภาพเวกเตอร์ขนาด 15,000x15000 px ที่ฉันต้องการใช้เป็นพื้นหลังสำหรับโปรเจ็กต์ Canvas ฉันต้องสามารถตัดส่วนของภาพและวาดเป็นพื้นหลังได้อย่างรวดเร็วและบ่อยครั้ง (ภายใน requestAnimationFrame )
ในการวาดส่วนที่ต้องการของภาพที่ฉันใช้...
const...
2609 มุมมอง
schedule
10.01.2024
Angular 2/4/5/6 - แผนภูมิหลายรายการสำหรับ Chart.js ในพื้นที่เดียวกัน
อัปเดต
ฉันใช้แผนภูมิไพรมิงแทนเพื่อแก้ไข
ฉันเริ่มต้นวัตถุแผนภูมิ (ข้อมูล) และใส่ลงในอาร์เรย์ของแผนภูมิ (dataArray)
<div *ngFor="let data of dataArray; let i=index">
<p-chart #chart type="pie" [data]="dataArray[i]"...
1180 มุมมอง
schedule
02.11.2023
จะตรวจสอบได้อย่างไรว่า Canvas ล้มเหลวใน Chrome
ในผลิตภัณฑ์ของเรา เราพบปัญหาที่บางครั้งสร้าง Canvas ที่เกินขีดจำกัดที่เบราว์เซอร์กำหนด (ฉันได้รับขีดจำกัดจาก คำถามนี้ )
ในการพยายามหาวิธีเตือนผู้ใช้หรืออย่างน้อยก็เพื่อกอบกู้การดำเนินการ ฉันต้องการดูว่าฉันสามารถรวมการกำหนดค่าเริ่มต้นของ Canvas...
141 มุมมอง
schedule
08.11.2023
ความกว้าง/ความสูงของผ้าใบจึงรบกวนการวาดภาพของฉันอย่างไรและเพราะเหตุใด
ฉันกำลังพยายามเขียนฟังก์ชันที่ใช้พิกัด x,y และการหมุน และแทรกรูปภาพที่หมุนรอบจุดศูนย์กลางของรูปภาพลงในผืนผ้าใบ รหัสนี้ใช้งานได้ดี:
let img = new Image(),
canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
step...
236 มุมมอง
schedule
05.01.2024
