कैनवास ड्राइंग, लाइनों की तरह,

Question

मैं एक <div style="border:1px solid border;" /> और कैनवास है, जो का उपयोग कर तैयार की है है धुँधली हैं div की सीमा। क्या कैनवास का उपयोग कर HTML के रूप में ड्राइंग की समान गुणवत्ता प्राप्त करना संभव है?

var ctx = document.getElementById("canvas").getContext("2d"); 
 
ctx.lineWidth = 1; 
 
ctx.moveTo(2, 2); 
 
ctx.lineTo(98, 2); 
 
ctx.lineTo(98, 98); 
 
ctx.lineTo(2, 98); 
 
ctx.lineTo(2, 2); 
 
ctx.stroke();

div { 
 
    border: 1px solid black; 
 
    width: 100px; 
 
    height: 100px; 
 
} 
 
canvas, div {background-color: #F5F5F5;} 
 
canvas {border: 1px solid white;display: block;}

<table> 
 
<tr><td>Line on canvas:</td><td>1px border:</td></tr> 
 
<tr><td><canvas id="canvas" width="100" height="100"/></td><td><div>&nbsp;</div></td></tr> 
 
</table>

Answer 1

जब कैनवास में लाइनों ड्राइंग, आप वास्तव में पिक्सल पैर फैलाकर बैठने की जरूरत है। यह मेरी राय में एपीआई में एक विचित्र पसंद थी, लेकिन आसान के साथ काम करने:

बजाय इस बात का

:

context.moveTo(10, 0); 
context.lineTo(10, 30); 

ऐसा करते हैं:

context.moveTo(10.5, 0); 
context.lineTo(10.5, 30); 

dive into HTML5's canvas chapter talks about this nicely
(देखने के लिए 'ASK प्रोफेसर मार्कअप' बॉक्स के रास्ते के बारे में 1/4 वें स्थान)

Answer 2

यहां तक ​​कि इसका उपयोग करने के लिए भी आसान फ़िक्स है:

context = canvas.context2d;  
context.translate(0.5, 0.5); 

यहां से आपके निर्देशांक को उस 0.5 पिक्सेल द्वारा समायोजित किया जाना चाहिए।

Answer 3

मैंने पाया कि सीएसएस में कैनवास आकार को सेट करने से मेरी छवियों को धुंधली तरीके से प्रदर्शित किया जा सकता है।

इस प्रयास करें:

<canvas id="preview" width="640" height="260"></canvas> 

मेरी पोस्ट के अनुसार

: HTML Blurry Canvas Images

Answer 4

एनीमेशन में इस समस्या से बचने के लिए मैं एक छोटे से demo साझा करना चाहते हैं।

मूल रूप से मैं प्रत्येक बार & फ्लोट मानों को हटाकर 1px के सेट में कूदते हुए वृद्धि मूल्यों की जांच कर रहा हूं।

HTML:

<canvas id="canvas" width="600" height="600"></canvas> 

सीएसएस:

html, body{ 
    height: 100%; 
    } 
    body{ 
    font-family: monaco, Consolas,"Lucida Console", monospace; 
    background: #000; 
    } 

    canvas{ 
    position: fixed; 
    top: 0; 
    left: 0; 
    transform: translateZ(0); 
    } 

जे एस:

canvas = document.getElementById('canvas'); 
    ctx = canvas.getContext('2d'); 

    ctx.translate(0.5, 0.5); 

    var i = 0; 
    var iInc = 0.005; 
    var range = 0.5; 

    raf = window.requestAnimationFrame(draw); 

    function draw() { 
    var animInc = EasingFunctions.easeInQuad(i) * 250; 
    ctx.clearRect(0, 0, 600, 600); 
    ctx.save(); 
    ctx.beginPath(); 
    ctx.strokeStyle = '#fff'; 
    var rectInc = 10 + animInc; 

    // Avoid Half Pixel 
    rectIncFloat = rectInc % 1; // Getting decimal value. 
    rectInc = rectInc - rectIncFloat; // Removing decimal. 

    // console.log(rectInc); 
    ctx.rect(rectInc, rectInc, 130, 60); 
    ctx.stroke(); 
    ctx.closePath(); 

    ctx.font = "14px arial"; 
    ctx.fillStyle = '#fff'; 
    ctx.textAlign = 'center'; 
    ctx.fillText("MAIN BUTTON", 65.5 + rectInc, 35.5 + rectInc); 

    i += iInc; 

    if (i >= 1) { 
     iInc = -iInc; 
    } 
    if (i <= 0) { 
     iInc = Math.abs(iInc); 
    } 

    raf = window.requestAnimationFrame(draw); 
    } 


    // Easing 
    EasingFunctions = { 
    // no easing, no acceleration 
    linear: function(t) { 
     return t 
    }, 
    // accelerating from zero velocity 
    easeInQuad: function(t) { 
     return t * t 
    }, 
    // decelerating to zero velocity 
    easeOutQuad: function(t) { 
     return t * (2 - t) 
    }, 
    // acceleration until halfway, then deceleration 
    easeInOutQuad: function(t) { 
     return t < .5 ? 2 * t * t : -1 + (4 - 2 * t) * t 
    }, 
    // accelerating from zero velocity 
    easeInCubic: function(t) { 
     return t * t * t 
    }, 
    // decelerating to zero velocity 
    easeOutCubic: function(t) { 
     return (--t) * t * t + 1 
    }, 
    // acceleration until halfway, then deceleration 
    easeInOutCubic: function(t) { 
     return t < .5 ? 4 * t * t * t : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1 
    }, 
    // accelerating from zero velocity 
    easeInQuart: function(t) { 
     return t * t * t * t 
    }, 
    // decelerating to zero velocity 
    easeOutQuart: function(t) { 
     return 1 - (--t) * t * t * t 
    }, 
    // acceleration until halfway, then deceleration 
    easeInOutQuart: function(t) { 
     return t < .5 ? 8 * t * t * t * t : 1 - 8 * (--t) * t * t * t 
    }, 
    // accelerating from zero velocity 
    easeInQuint: function(t) { 
     return t * t * t * t * t 
    }, 
    // decelerating to zero velocity 
    easeOutQuint: function(t) { 
     return 1 + (--t) * t * t * t * t 
    }, 
    // acceleration until halfway, then deceleration 
    easeInOutQuint: function(t) { 
     return t < .5 ? 16 * t * t * t * t * t : 1 + 16 * (--t) * t * t * t * t 
    } 
    } 

Answer 5

मैं एक रेटिना प्रदर्शन का उपयोग करें और मैं एक समाधान है कि मुझे here के लिए काम किया पाया।

छोटे संक्षिप्त:

सबसे पहले आप, दो बार के रूप में बड़े रूप में अपने आप यह चाहते कैनवास का आकार निर्धारित करने की आवश्यकता उदाहरण के लिए:

canvas = document.getElementById('myCanvas'); 
canvas.width = 200; 
canvas.height = 200; 

सीएसएस तब का उपयोग कर आप इसे वांछित करने के लिए सेट आकार:

canvas.style.width = "100px"; 
canvas.style.height = "100px"; 

और अंत में आप 2 से ड्राइंग संदर्भ पैमाने:

canvas.getContext('2d').scale(2,2);