मैं एक कुल हूं n00b साथ HTML5और साथ काम कर रहा हूँ canvasरेंडर करने के लिए आकार, रंग, और पाठ। मेरे ऐप में, मेरे पास एक व्यू एडाप्टर है जो गतिशील रूप से एक कैनवास बनाता है, और इसे सामग्री से भरता है। यह वास्तव में अच्छी तरह से काम करता है, सिवाय इसके कि मेरे पाठ को बहुत अस्पष्ट / धुंधली / फैलाया गया है। मैं क्यों परिभाषित करने पर अन्य पदों की एक बहुत कुछ देखा है चौड़ाई और ऊंचाई में CSSइस मुद्दे का कारण होगा, लेकिन मैं यह सब को परिभाषित javascript।
प्रासंगिक कोड ( फ़िडेल देखें ):
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>मैं ( सफारी में ) जो परिणाम देख रहा हूं, वे फिडेल की तुलना में बहुत अधिक तिरछे हैं।
मेरी
बेला
मैं गलत क्या कर रहा हूँ? क्या मुझे प्रत्येक पाठ तत्व के लिए एक अलग कैनवास की आवश्यकता है? क्या यह फॉन्ट है? क्या मुझे पहले HTML5 लेआउट में कैनवास को परिभाषित करने की आवश्यकता है? क्या कोई टाइपो है? मै खो गया हूँ।
clearRect।