Tôi là một tổng n00b với HTML5và đang làm việc với canvasđể render hình dạng, màu sắc và văn bản. Trong ứng dụng của mình, tôi có bộ điều hợp chế độ xem có thể tạo canvas động và lấp đầy nội dung. Điều này hoạt động thực sự độc đáo, ngoại trừ việc văn bản của tôi được hiển thị rất mờ / mờ / kéo dài. Tôi đã thấy rất nhiều bài đăng khác về lý do tại sao việc xác định chiều rộng và chiều cao trong CSSsẽ gây ra vấn đề này, nhưng tôi xác định tất cả trong javascript.
Mã liên quan (xem Fiddle ):
var width = 500;//FIXME:size.w;
var height = 500;//FIXME:size.h;
var canvas = document.createElement("canvas");
//canvas.className="singleUserCanvas";
canvas.width=width;
canvas.height=height;
canvas.border = "3px solid #999999";
canvas.bgcolor = "#999999";
canvas.margin = "(0, 2%, 0, 2%)";
var context = canvas.getContext("2d");
//////////////////
//// SHAPES ////
//////////////////
var left = 0;
//draw zone 1 rect
context.fillStyle = "#8bacbe";
context.fillRect(0, (canvas.height*5/6)+1, canvas.width*1.5/8.5, canvas.height*1/6);
left = left + canvas.width*1.5/8.5;
//draw zone 2 rect
context.fillStyle = "#ffe381";
context.fillRect(left+1, (canvas.height*5/6)+1, canvas.width*2.75/8.5, canvas.height*1/6);
left = left + canvas.width*2.75/8.5 + 1;
//draw zone 3 rect
context.fillStyle = "#fbbd36";
context.fillRect(left+1, (canvas.height*5/6)+1, canvas.width*1.25/8.5, canvas.height*1/6);
left = left + canvas.width*1.25/8.5;
//draw target zone rect
context.fillStyle = "#004880";
context.fillRect(left+1, (canvas.height*5/6)+1, canvas.width*0.25/8.5, canvas.height*1/6);
left = left + canvas.width*0.25/8.5;
//draw zone 4 rect
context.fillStyle = "#f8961d";
context.fillRect(left+1, (canvas.height*5/6)+1, canvas.width*1.25/8.5, canvas.height*1/6);
left = left + canvas.width*1.25/8.5 + 1;
//draw zone 5 rect
context.fillStyle = "#8a1002";
context.fillRect(left+1, (canvas.height*5/6)+1, canvas.width-left, canvas.height*1/6);
////////////////
//// TEXT ////
////////////////
//user name
context.fillStyle = "black";
context.font = "bold 18px sans-serif";
context.textAlign = 'right';
context.fillText("User Name", canvas.width, canvas.height*.05);
//AT:
context.font = "bold 12px sans-serif";
context.fillText("AT: 140", canvas.width, canvas.height*.1);
//AB:
context.fillText("AB: 94", canvas.width, canvas.height*.15);
//this part is done after the callback from the view adapter, but is relevant here to add the view back into the layout.
var parent = document.getElementById("layout-content");
parent.appendChild(canvas);<div id="layout-content"></div>Kết quả tôi đang thấy (trong Safari ) bị lệch nhiều hơn so với hiển thị trong Fiddle:
Của tôi
Vĩ cầm
Tôi đang làm gì sai? Tôi có cần một canvas riêng cho từng phần tử văn bản không? Nó có phải là phông chữ không? Trước tiên, tôi có bắt buộc phải xác định canvas trong bố cục HTML5 không? Có một lỗi chính tả? Tôi bị lạc.
clearRect.