27
4
Tôi đã viết một đoạn script đơn giản bằng JS. Khi tôi đặt nó vào tài liệu html (ở cuối thẻ body), nó hoạt động tốt. Khi tôi cố gắng đặt nó vào một tài liệu bên ngoài và liên kết nó, tập lệnh sẽ chạy nhưng phần tử canvas biến mất (chỉ cần kiểm tra: nó hoạt động khi tôi đặt tập lệnh ở dưới cùng thay vì thẻ đầu). Phiên bản này hoạt động:
Trung tâm cá nhân
Điều phát hành
từ bỏ var c = document.getElementById("canvasId");
var ctx = c.getContext("2d");
var text = "Nazwa pomiaru";
var boxWidth = 200;
var boxHeight = 200;
var minValue = 0;
var maxValue = 100;
var midValue = (Math.abs(minValue) + Math.abs(maxValue))/2;
đơn vị var = "%";
var indicWidth = 50;
var indicHeight = 0,6 * boxHeight;
var textPosition = 0,875;
var leftMargin = 0,375;
var topMargin = 0,15;
var BottomMargin = 0,75;
giá trị var = Math.floor(Math.random() * 101);
var cảnh báoTop = 90;
var nguy hiểmTop = 95;
var cảnh báoBottom = 10;
var nguy hiểmBottom = 5;
var ngưỡngTransparency = 0,6;
var đột quỵColor = "#CCCCCC";
var valueColor = "#993333";
var WarningColor = "#ff6600";
var nguy hiểmColor = "#cc0000";
var textColor = "#000000";
var textColor2 = "#ffffff";
ctx.beginPath();
ctx.fillText((maxValue + unit), (leftMargin * boxWidth - ctx.measureText(maxValue + unit).width-1), (topMargin * boxHeight + 3), (boxWidth / 4));
ctx.fillText((midValue + unit), (leftMargin * boxWidth - ctx.measureText(midValue + unit).width-1), ((topMargin + BottomMargin) / 2 * boxHeight + 3), (boxWidth / 4)); //vẽ một giá trị trung bình
ctx.fillText((minValue + unit), (leftMargin * boxWidth - ctx.measureText(minValue + unit).width-1), (bottomMargin * boxHeight + 3), (boxWidth / 4));
ctx.fillText(text, ((boxWidth - ctx.measureText(text).width) / 2), (textPosition * boxHeight), (textPosition * boxWidth));
ctx.lineWidth = "0";
ctx.globalAlpha = ngưỡngTransparency;
if (cảnh báoTop !== 0 || cảnh báoBottom !== 0) {
ctx.fillStyle = WarningColor;
ctx.fillRect((leftMargin * boxWidth), (topMargin * boxHeight), indicWidth, ((100 - WarningTop) * (indicHeight / 100)));
ctx.fillRect((leftMargin * boxWidth), (topMargin * boxHeight + (100 - WarningBottom) * (indicHeight / 100)), indicWidth, (indicHeight - (100 - WarningBottom) * (indicHeight / 100))); một cảnh báoDưới
}
if (dangerTop !== 0 || nguy hiểmBottom !== 0) {
ctx.fillStyle = DangerousColor;
ctx.fillRect((leftMargin * boxWidth), (topMargin * boxHeight), indicWidth, ((100 - DangerousTop) * (indicHeight / 100)));
ctx.fillRect((leftMargin * boxWidth), (topMargin * boxHeight + (100 - DangerousBottom) * (indicHeight / 100)), indicWidth, (indicHeight - (100 - DangerousBottom) * (indicHeight / 100))); một mối nguy hiểm
}
ctx.beginPath();
ctx.globalAlpha = 1;
ctx.fillStyle = valueColor;
ctx.fillRect((leftMargin * boxWidth), (topMargin * boxHeight + (100 - value) * (indicHeight / 100)), indicWidth, (indicHeight - (100 - value) * (indicHeight / 100))); một giá trịChỉ báo
nếu (giá trị <= 47) {
ctx.fillStyle=textColor;
}
khác {
ctx.fillStyle = textColor2;
}
ctx.fillText(value, ((boxWidth - ctx.measureText(value).width) / 2), (boxHeight / 2));
ctx.shadowBlur = 6;
ctx.shadowColor = "#000000";
ctx.lineWidth="2";
ctx.StrokeStyle = StrokeColor;
ctx. StrokeRect((leftMargin * boxWidth), (topMargin * boxHeight), indicWidth, indicHeight);
ctx.shadowBlur = 0;
document.write(value);
<đầu>
Thanh trượt
Phiên bản này không hoạt động:
hàm vẽ () {
var c = document.getElementById("canvasId");
var ctx = c.getContext("2d");
var text = "Nazwa pomiaru";
var boxWidth = 200;
var boxHeight = 200;
var minValue = 0;
var maxValue = 100;
var midValue = (Math.abs(minValue) + Math.abs(maxValue))/2;
đơn vị var = "%";
var indicWidth = 50;
var indicHeight = 0,6 * boxHeight;
var textPosition = 0,875;
var leftMargin = 0,375;
var topMargin = 0,15;
var BottomMargin = 0,75;
giá trị var = Math.floor(Math.random() * 101);
var cảnh báoTop = 90;
var nguy hiểmTop = 95;
var cảnh báoBottom = 10;
var nguy hiểmBottom = 5;
var ngưỡngTransparency = 0,6;
var đột quỵColor = "#CCCCCC";
var valueColor = "#993333";
var WarningColor = "#ff6600";
var nguy hiểmColor = "#cc0000";
var textColor = "#000000";
var textColor2 = "#ffffff";
ctx.beginPath();
ctx.fillText((maxValue + unit), (leftMargin * boxWidth - ctx.measureText(maxValue + unit).width-1), (topMargin * boxHeight + 3), (boxWidth / 4));
ctx.fillText((midValue + unit), (leftMargin * boxWidth - ctx.measureText(midValue + unit).width-1), ((topMargin + BottomMargin) / 2 * boxHeight + 3), (boxWidth / 4)); //vẽ một giá trị trung bình
ctx.fillText((minValue + unit), (leftMargin * boxWidth - ctx.measureText(minValue + unit).width-1), (bottomMargin * boxHeight + 3), (boxWidth / 4));
ctx.fillText(text, ((boxWidth - ctx.measureText(text).width) / 2), (textPosition * boxHeight), (textPosition * boxWidth));
ctx.lineWidth = "0";
ctx.globalAlpha = ngưỡngTransparency;
if (cảnh báoTop !== 0 || cảnh báoBottom !== 0) {
ctx.fillStyle = WarningColor;
ctx.fillRect((leftMargin * boxWidth), (topMargin * boxHeight), indicWidth, ((100 - WarningTop) * (indicHeight / 100)));
ctx.fillRect((leftMargin * boxWidth), (topMargin * boxHeight + (100 - WarningBottom) * (indicHeight / 100)), indicWidth, (indicHeight - (100 - WarningBottom) * (indicHeight / 100))); một cảnh báoDưới
}
if (dangerTop !== 0 || nguy hiểmBottom !== 0) {
ctx.fillStyle = DangerousColor;
ctx.fillRect((leftMargin * boxWidth), (topMargin * boxHeight), indicWidth, ((100 - DangerousTop) * (indicHeight / 100)));
ctx.fillRect((leftMargin * boxWidth), (topMargin * boxHeight + (100 - DangerousBottom) * (indicHeight / 100)), indicWidth, (indicHeight - (100 - DangerousBottom) * (indicHeight / 100))); một mối nguy hiểm
}
ctx.beginPath();
ctx.globalAlpha = 1;
ctx.fillStyle = valueColor;
ctx.fillRect((leftMargin * boxWidth), (topMargin * boxHeight + (100 - value) * (indicHeight / 100)), indicWidth, (indicHeight - (100 - value) * (indicHeight / 100))); một giá trịChỉ báo
nếu (giá trị <= 47) {
ctx.fillStyle=textColor;
}
khác {
ctx.fillStyle = textColor2;
}
ctx.fillText(value, ((boxWidth - ctx.measureText(value).width) / 2), (boxHeight / 2));
ctx.shadowBlur = 6;
ctx.shadowColor = "#000000";
ctx.lineWidth="2";
ctx.StrokeStyle = StrokeColor;
ctx. StrokeRect((leftMargin * boxWidth), (topMargin * boxHeight), indicWidth, indicHeight);
ctx.shadowBlur = 0;
document.write(value);
};
window.onload = vẽ;
<đầu>
Thanh trượt
Phiên bản thứ hai bằng cách nào đó ẩn nhãn Canvas nhưng hiển thị văn bản (để tập lệnh hoạt động).
Có giải pháp nào không?
câu trả lời hay nhất
Lý do Canvas (và do đó toàn bộ tài liệu) biến mất là do bạn đang sử dụng tài liệu.write. Trong đoạn trích đầu tiên, bạn là đóng luồng Đã có tài liệu trước đây. Đối với đoạn thứ hai, bạn chỉ cần window.onLoad Mã sau đó được thực thi, tại thời điểm đó luồng tài liệu đã được đóng lại.
Lưu ý: khi document.write ghi vào luồng tài liệu, việc gọi document.write trên tài liệu đã đóng (đã tải) sẽ tự động gọi document.open để xóa tài liệu - - https://developer.mozilla.org/en-US/docs/Web/API/Document/write
1) Không sử dụng document.write - nếu bạn cần ghi vào tài liệu, hãy đặt một phần tử HTML trên trang và ghi vào phần tử đó:
// html:
...
// Javascript
// ...
var el = document.getDocumentById('output');
el.textContent = giá trị
2) Đừng gọi document.write sau khi trang được tải (như bạn đã làm trong đoạn mã đầu tiên)
Cá nhân tôi sẽ không bao giờ sử dụng document.write vì bạn có thể gặp phải những vấn đề như những gì bạn mô tả.
Về javascript - Canvas biến mất, chúng tôi tìm thấy một câu hỏi tương tự trên Stack Overflow: https://stackoverflow.com/questions/31179511/
27
4
0
Tôi có thể thêm một đứa trẻ bằng hai phương pháp, một là Canvas.AddVisualChild(Visual); Canvas.AddLogicalChild(Visual);
Trong vài tuần qua, tôi đã thử nhiều cách tiếp cận khác nhau để cố gắng tìm ra cách tốt nhất để sử dụng BDD với ứng dụng web dựa trên phần tử Canvas HTML5 và sự tương tác của người dùng với nó. Tôi đã sử dụng Jasmine và Cucumber
Tôi đang cố gắng hoàn tác/làm lại. Tôi đang sử dụng LoadFromJSON(...) để xây dựng lại Canvas từ trạng thái Canvas mà tôi đã lưu trữ trong một mảng. Về cơ bản, ý tưởng của tôi là phá hủy Canvas hiện có và xây dựng lại Canva
Tôi đang cố gắng thiết lập chức năng phóng to/thu nhỏ đơn giản trên Canvas. Tôi đang sử dụng KineticJS để xử lý các sự kiện chạm và vẽ trong Canvas nhưng tôi không thể thu phóng được. KinteicJS có một ví dụ tương tự nhưng chúng luôn ở trung tâm
Tôi đang phát triển một ứng dụng cọ vẽ trong javascript bằng cách sử dụngprocess.js và nó đang sử dụng đối tượng Canvas. Tôi muốn giữ một hình ảnh ở chế độ nền của Canvas. Vẽ một cái gì đó ở phía trước. Khi lưu, tôi chỉ
Xin chào, tôi muốn cài đặt Canvas cho Discord.js Bot. Khi tôi cố gắng cài đặt Canvas bằng npm install canvas, tôi gặp lỗi sau: pi@server:~/Bots/D
Tôi đang cố gắng tạo mẫu tô màu bằng cách kết hợp Canvas và Dynamics nhưng tôi gặp khó khăn khi cố gắng tạo một đường liên tục. Jsfiddle này hiển thị những gì tôi có cho đến nay, nhưng vì mẫu lặp lại của tôi là hình vuông và các góc ảnh hưởng đến các đường thẳng nên tôi đã thử sử dụng l
Tôi đang phát triển một chương trình webassembly. Tôi có thể đặt kích thước Canvas bằng cách sử dụng emscripten_set_canvas_size (Tôi tiếp tục đọc rằng tôi cần chuyển sang API mới vì API này sẽ không còn giá trị nữa
Xin chào, tôi đã tạo biểu mẫu vòng tròn cho hình ảnh đầu tiên trong Canvas đầu tiên nhưng tôi không thành công khi sử dụng dataURL của Canvas đầu tiên và thêm nó vào Canvas thứ hai. Đây là trò chơi của tôi :htt
Vấn đề là sự không nhất quán giữa các trình duyệt khác nhau. Dùng Dart Chrome, JS Chrome, JS Opera để chạy click đúp vào và thoát toàn màn hình m_oCanvas.width =(window.screen.widt
Tôi đang phát triển trình chỉnh sửa hình ảnh bằng khung Flutter và Dart, vì vậy tôi không thể áp dụng bộ lọc ma trận cho Canvas. Tôi đang cố gắng áp dụng bộ lọc ma trận bằng lớp "Paint" và hàm "canvas.drawPaint(paint)"
Tôi gặp sự cố với phương thức drawImage() của ngữ cảnh Canvas nếu tôi vẽ một hình ảnh trên Canvas đã có hệ số tỷ lệ không nguyên. Có vẻ như những hình ảnh như thế này được cắt bớt một cách kỳ lạ (đôi khi phần ngoài cùng bên phải của hình ảnh bị cắt bớt, đôi khi phần dưới cùng
Có giới hạn nào đối với giá trị thuộc tính "width" của Canvas không? Trong ví dụ sau, tôi tạo Canvas bên trong ScrolledWindow. # Gói gói yêu cầu BWidget # Ma
Tôi đang cố gắng tạo hiệu ứng văn bản tương tự như hiệu ứng ở cuối bài viết này. Phương pháp được đề xuất của tôi là: Tạo hai Canvas, một hiển thị và một ẩn mà tôi sử dụng làm vùng đệm. Vẽ một số văn bản trên bộ đệm Canvas
Ví dụ: var new = canvas.toDataURL("image/png"); Tôi muốn base64 có trong biến mới này được hiển thị trong phần tử Canvas hiện có thứ hai. Nhưng nó không sử dụng drawimage
Có ai có kinh nghiệm sử dụng một hoặc cả hai thư viện Node.js này không? Rất muốn nghe về những thành công hay khó khăn của mọi người. Câu trả lời hay nhất LearnBoost là một trong những nhà phát triển mô-đun Node thành công nhất trong cộng đồng, vì vậy tôi đã chọn sử dụng node-canv
Làm cách nào để biết Canvas đang chạy "WebGL" hay Canvas thông thường? Qua kiểm tra mã nguồn, tôi thấy cả hai trường hợp đều là Canvas. Câu trả lời hay nhất Nó thực sự phụ thuộc vào cách bạn muốn tìm hiểu. Ví dụ: bạn có thể gọi `getC như thế này
Vẽ trên Canvas thật tuyệt vời. Ngay cả cục tẩy cũng hoạt động tốt. Vấn đề là khi Canvas được lưu dưới dạng ảnh, nó sẽ vẽ một đường màu đen thay vì vết tẩy. Để hiểu rõ hơn tôi đã thêm ảnh chụp màn hình và mã. 1. Khi xóa một bản vẽ - a. gendai
Tôi đang cố gắng đính kèm các sự kiện di chuột và di chuột vào Canvas: Canvas mặc định là Canvas có chức năng drawcircle. Nếu người dùng đi qua Canvas, nó sẽ được đổi thành DrawEllipse's Can
Tôi đang xây dựng một trò chơi 2D đơn giản bằng Three.js. Tôi chỉ sử dụng vị trí X và Y của thế giới để di chuyển các vật thể, để vị trí z của chúng ở mức 0. Tôi sử dụng TrackballControls với tính năng xoay bị tắt để cho phép nhấp chuột phải một lần
Tôi là một lập trình viên xuất sắc, rất giỏi!