html5-canvas
पथ (केवल सिंटैक्स)

Android AngularJS Cordova CSS HTML JavaScript jQuery Node.js PHP SVG
खोज…


वाक्य - विन्यास

  • context.beginPath ()
  • context.moveTo (startx, startY)
  • context.lineTo (endX, Endy)
  • संदर्भ.कार (centerX, centerY, त्रिज्या, startRadianAngle, endRadianAngle)
  • context.quadraticCurveTo (controlX, controlY, endX, Endy)
  • context.bezierCurveTo (controlX1, controlY1, controlX2, controlY2, endX, Endy)
  • संदर्भ.कार्टो (पॉइंटएक्स 1, पॉइंटवाई 1, पॉइंटएक्स 2, पॉइंटवाई 2, त्रिज्या)
  • संदर्भ। सही (बाएं, शीर्ष, चौड़ाई, ऊंचाई);
  • context.closePath ()

मूल पथ ड्राइंग कमांड का अवलोकन: लाइनें और घटता

==================

TODO: नीचे दिए गए प्रत्येक ड्राइंग कमांड को उनके व्यक्तिगत उदाहरणों से लिंक करें। मुझे नहीं पता कि यह कैसे करना है क्योंकि व्यक्तिगत उदाहरण के लिंक "ड्राफ्ट" फ़ोल्डर की ओर इशारा करते हैं।

TODO: इन पथों के लिए उदाहरण जोड़ें "कार्रवाई" कमांड: स्ट्रोक (), भरण (), क्लिप ()

==================

पथ

एक पथ लाइनों और वक्रों के एक सेट को परिभाषित करता है जो कि कैनवस पर स्पष्ट रूप से खींचा जा सकता है।

एक रास्ता स्वचालित रूप से कैनवस पर नहीं खींचा जाता है। लेकिन पथ की लाइनें और घटता एक स्टाइलिश स्ट्रोक का उपयोग करके कैनवस पर खींचा जा सकता है। और लाइनों और घटता द्वारा बनाई गई आकृति को भी एक स्टाइल से भरा जा सकता है।

पथ का उपयोग कैनवास पर ड्राइंग से परे होता है:

  • हिट परीक्षण यदि एक x, y निर्देशांक पथ आकार के अंदर है।
  • क्लिपिंग क्षेत्र को परिभाषित करना जहां क्लिपिंग क्षेत्र के अंदर केवल चित्र दिखाई देंगे। क्लिपिंग क्षेत्र के बाहर की कोई भी ड्राइंग सीएसएस ओवरफ्लो के समान (== पारदर्शी) नहीं खींची जाएगी।

मूल पथ ड्राइंग कमांड हैं:

  • beginPath
  • करने के लिए कदम
  • lineTo
  • चाप
  • quadraticCurveTo
  • bezierCurveTo
  • arcTo
  • रेक्ट
  • closePath

मूल ड्राइंग आदेशों का विवरण:

beginPath 

context.beginPath()

पथ आदेशों के एक नए सेट को असेंबल करना शुरू करता है और किसी भी पहले से इकट्ठे पथ को भी त्याग देता है।

त्यागना एक महत्वपूर्ण और अक्सर अनदेखी की जाने वाली बात है। यदि आप एक नया पथ शुरू नहीं करते हैं, तो पहले से जारी कोई भी पथ आदेश अपने आप फिर से शुरू हो जाएगा।

यह ड्राइंग "पेन" को कैनवास के ऊपरी-बाएँ मूल में ले जाता है (== समन्वय [0,0])।

करने के लिए कदम 

context.moveTo(startX, startY)

समन्वय के लिए वर्तमान पेन स्थान को ले जाता है [startX, startY]।

डिफ़ॉल्ट रूप से सभी पथ चित्र एक साथ जुड़े हुए हैं। तो एक पंक्ति या वक्र का अंतिम बिंदु अगली पंक्ति या वक्र का प्रारंभिक बिंदु है। इससे दो निकटवर्ती रेखाचित्रों को जोड़ने वाली एक अप्रत्याशित रेखा खींची जा सकती है। context.moveTo . context.moveTo कमांड मूल रूप से "ड्राइंग पेन उठाता है" और इसे एक नए समन्वय पर रखता है ताकि स्वचालित कनेक्टिंग लाइन तैयार न हो।

lineTo 

context.lineTo(endX, endY)

समन्वय के लिए वर्तमान पेन स्थान से एक लाइन खंड खींचता है [endX, endY]

आप एक .lineTo लिए कई .lineTo कमांड को इकट्ठा कर सकते हैं। उदाहरण के लिए, आप त्रिभुज बनाने के लिए 3 पंक्ति खंडों को इकट्ठा कर सकते हैं।

चाप 

context.arc(centerX, centerY, radius, startingRadianAngle, endingRadianAngle)

एक केंद्रबिंदु, त्रिज्या और शुरुआती और अंत कोणों को देखते हुए एक गोलाकार चाप खींचता है। कोण रेडियन के रूप में व्यक्त किए जाते हैं। डिग्रियों को रेडियंस में बदलने के लिए आप इस फॉर्मूले का उपयोग कर सकते हैं: radians = degrees * Math.PI / 180; ।

कोण 0 सीधे चाप के केंद्र से सीधा होता है। एक पूर्ण चक्र बनाने के लिए आप एंडिंगल बना सकते हैं = शुरुआती + 360 डिग्री (360 डिग्री == गणित.पु 2): `संदर्भ.कार (10,10,20,0, गणित। 2);

डिफ़ॉल्ट रूप से, आर्क को दक्षिणावर्त खींचा जाता है, एक वैकल्पिक [सत्य | गलत] पैरामीटर आर्क को काउंटर- context.arc(10,10,20,0,Math.PI*2,true) लिए निर्देश देता है: context.arc(10,10,20,0,Math.PI*2,true)

quadraticCurveTo 

context.quadraticCurveTo(controlX, controlY, endingX, endingY)

एक वर्तमान समापन स्थान पर एक द्विघात समाप् त करने के लिए एक द्विघात वक्र बनाता है। एक अन्य दिया गया नियंत्रण समन्वय वक्र की आकृति (वक्रता) को निर्धारित करता है।

bezierCurveTo 

context.bezierCurveTo(control1X, control1Y, control2X, control2Y, endingX, endingY)

किसी वर्तमान समापन स्थान पर एक घन बेज़ियर वक्र को खींचता हुआ एक समाप्‍त समन्‍वय सम्‍मिलित करता है। एक और 2 दिए गए नियंत्रण निर्देशांक वक्र के आकार (वक्रता) का निर्धारण करते हैं।

arcTo 

context.arcTo(pointX1, pointY1, pointX2, pointY2, radius);

किसी दिए गए त्रिज्या के साथ एक गोलाकार चाप खींचता है। वर्तमान कलम स्थान द्वारा गठित कील के अंदर चाप को दक्षिणावर्त खींचा जाता है और दो अंक दिए जाते हैं: प्वाइंट 1 और पॉइंट 2।

वर्तमान पेन लोकेशन और आर्क की शुरुआत को जोड़ने वाली एक लाइन आर्क से पहले स्वचालित रूप से खींची जाती है।

रेक्ट 

context.rect(leftX, topY, width, height)

ऊपर-बाएँ कोने और एक चौड़ाई और ऊँचाई पर एक आयत खींचता है।

context.rect एक अनूठा ड्राइंग आदेश क्योंकि यह कट आयतों जोड़ता है। ये डिस्कनेक्ट किए गए आयत स्वचालित रूप से लाइनों से जुड़े नहीं होते हैं।

closePath 

context.closePath()

वर्तमान पेन स्थान से आरंभिक पथ समन्वय के लिए एक रेखा खींचता है।

उदाहरण के लिए, यदि आप एक त्रिभुज के 2 पैर बनाते हुए 2 रेखाएँ बनाते हैं, तो closePath दूसरे चरण के शुरुआती बिंदु से वापस दूसरे चरण के समापन बिंदु से त्रिकोण के तीसरे चरण को खींचकर त्रिकोण को "बंद" कर देगा।

इस कमांड का नाम अक्सर इसे गलत समझा जाता है। context.closePath लिए एक अंतिम परिसीमन नहीं है context.beginPath । फिर से, closePath कमांड एक रेखा खींचता है - यह एक beginPath "बंद" नहीं करता है।

लाइनटॉ (एक पथ कमांड)

context.lineTo(endX, endY)

समन्वय के लिए वर्तमान पेन स्थान से एक लाइन खंड खींचता है [endX, endY]

यहाँ छवि विवरण दर्ज करें 

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // get a reference to the canvas element and it's context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // arguments
    var startX=25;
    var startY=20;
    var endX=125;
    var endY=20;

    // Draw a single line segment drawn using "moveTo" and "lineTo" commands
    ctx.beginPath();
    ctx.moveTo(startX,startY);
    ctx.lineTo(endX,endY);
    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=150></canvas>
</body>
</html>

आप एक पॉलीलाइन बनाने के लिए कई .lineTo कमांड को इकट्ठा कर सकते हैं। उदाहरण के लिए, आप त्रिभुज बनाने के लिए 3 पंक्ति खंडों को इकट्ठा कर सकते हैं।

यहाँ छवि विवरण दर्ज करें 

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // get a reference to the canvas element and it's context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // arguments
    var topVertexX=50;
    var topVertexY=20;
    var rightVertexX=75;
    var rightVertexY=70;
    var leftVertexX=25;
    var leftVertexY=70;

    // A set of line segments drawn to form a triangle using
    //     "moveTo" and multiple "lineTo" commands
    ctx.beginPath();
    ctx.moveTo(topVertexX,topVertexY);
    ctx.lineTo(rightVertexX,rightVertexY);
    ctx.lineTo(leftVertexX,leftVertexY);
    ctx.lineTo(topVertexX,topVertexY);
    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=150></canvas>
</body>
</html>

चाप (एक पथ कमांड)

context.arc(centerX, centerY, radius, startingRadianAngle, endingRadianAngle)

एक केंद्रबिंदु, त्रिज्या और शुरुआती और अंत कोणों को देखते हुए एक गोलाकार चाप खींचता है। कोण रेडियन के रूप में व्यक्त किए जाते हैं। डिग्रियों को रेडियंस में बदलने के लिए आप इस फॉर्मूले का उपयोग कर सकते हैं: radians = degrees * Math.PI / 180; ।

कोण 0 सीधे चाप के केंद्र से सीधा होता है।

डिफ़ॉल्ट रूप से, आर्क को दक्षिणावर्त खींचा जाता है, एक वैकल्पिक [सत्य | गलत] पैरामीटर आर्क को काउंटर- context.arc(10,10,20,0,Math.PI*2,true) लिए निर्देश देता है: context.arc(10,10,20,0,Math.PI*2,true)

यहाँ छवि विवरण दर्ज करें 

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // get a reference to the canvas element and its context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // arguments
    var centerX=50;
    var centerY=50;
    var radius=30;
    var startingRadianAngle=Math.PI*2*;  // start at 90 degrees == centerY+radius
    var endingRadianAngle=Math.PI*2*.75;  // end at 270 degrees (==PI*2*.75 in radians)

    // A partial circle (i.e. arc) drawn using the "arc" command
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius,  startingRadianAngle, endingRadianAngle);
    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=150></canvas>
</body>
</html>

एक पूर्ण चक्र बनाने के लिए आप एंडिंगल बना सकते हैं = शुरुआती + 360 डिग्री (360 डिग्री == गणित। पी 2)।

यहाँ छवि विवरण दर्ज करें 

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // get a reference to the canvas element and its context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // arguments
    var centerX=50;
    var centerY=50;
    var radius=30;
    var startingRadianAngle=0;       // start at 0 degrees
    var endingRadianAngle=Math.PI*2; // end at 360 degrees (==PI*2 in radians)

    // A complete circle drawn using the "arc" command
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius,  startingRadianAngle, endingRadianAngle);
    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=150></canvas>
</body>
</html>

quadraticCurveTo (एक पथ कमांड)

context.quadraticCurveTo(controlX, controlY, endingX, endingY)

एक वर्तमान समापन स्थान पर एक द्विघात समाप् त करने के लिए एक द्विघात वक्र बनाता है। एक अन्य दिया गया नियंत्रण समन्वय वक्र की आकृति (वक्रता) को निर्धारित करता है।

यहाँ छवि विवरण दर्ज करें 

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // get a reference to the canvas element and it's context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // arguments
    var startX=25;
    var startY=70;
    var controlX=75;
    var controlY=25;
    var endX=125;
    var endY=70;

    // A quadratic curve drawn using "moveTo" and "quadraticCurveTo" commands
    ctx.beginPath();
    ctx.moveTo(startX,startY);
    ctx.quadraticCurveTo(controlX,controlY,endX,endY);
    ctx.stroke();


}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=150></canvas>
</body>
</html>

bezierCurveTo (एक पथ कमांड)

context.bezierCurveTo(control1X, control1Y, control2X, control2Y, endingX, endingY)

किसी वर्तमान समापन स्थान पर एक घन बेज़ियर वक्र को खींचता हुआ एक समाप्‍त समन्‍वय सम्‍मिलित करता है। एक और 2 दिए गए नियंत्रण निर्देशांक वक्र के आकार (वक्रता) का निर्धारण करते हैं।

यहाँ छवि विवरण दर्ज करें 

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // get a reference to the canvas element and it's context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // arguments
    var startX=25;
    var startY=50;
    var controlX1=75;
    var controlY1=10;
    var controlX2=75;
    var controlY2=90;
    var endX=125;
    var endY=50;      
    
    // A cubic bezier curve drawn using "moveTo" and "bezierCurveTo" commands
    ctx.beginPath();
    ctx.moveTo(startX,startY);
    ctx.bezierCurveTo(controlX1,controlY1,controlX2,controlY2,endX,endY);
    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=150></canvas>
</body>
</html>

arcTo (एक पथ कमांड)

context.arcTo(pointX1, pointY1, pointX2, pointY2, radius);

किसी दिए गए त्रिज्या के साथ एक गोलाकार चाप खींचता है। वर्तमान कलम स्थान द्वारा गठित कील के अंदर चाप को दक्षिणावर्त खींचा जाता है और दो अंक दिए जाते हैं: प्वाइंट 1 और पॉइंट 2।

वर्तमान पेन लोकेशन और आर्क की शुरुआत को जोड़ने वाली एक लाइन आर्क से पहले स्वचालित रूप से खींची जाती है।

यहाँ छवि विवरण दर्ज करें 

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // get a reference to the canvas element and it's context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // arguments
    var pointX0=25;
    var pointY0=80;
    var pointX1=75;
    var pointY1=0;
    var pointX2=125;
    var pointY2=80;
    var radius=25;

    // A circular arc drawn using the "arcTo" command. The line is automatically drawn.
    ctx.beginPath();
    ctx.moveTo(pointX0,pointY0);
    ctx.arcTo(pointX1, pointY1, pointX2, pointY2, radius);
    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=150></canvas>
</body>
</html>

रेक्ट (एक पथ कमांड)

context.rect(leftX, topY, width, height)

ऊपर-बाएँ कोने और एक चौड़ाई और ऊँचाई पर एक आयत खींचता है।

यहाँ छवि विवरण दर्ज करें 

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // get a reference to the canvas element and it's context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // arguments
    var leftX=25;
    var topY=25;
    var width=40;
    var height=25;

    // A rectangle drawn using the "rect" command.
    ctx.beginPath();
    ctx.rect(leftX, topY, width, height);
    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=150></canvas>
</body>
</html>

context.rect एक अनूठा ड्राइंग आदेश क्योंकि यह कट आयतों जोड़ता है।

ये डिस्कनेक्ट किए गए आयत स्वचालित रूप से लाइनों से जुड़े नहीं होते हैं।

यहाँ छवि विवरण दर्ज करें 

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // get a reference to the canvas element and it's context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // arguments
    var leftX=25;
    var topY=25;
    var width=40;
    var height=25;

    // Multiple rectangles drawn using the "rect" command.
    ctx.beginPath();
    ctx.rect(leftX, topY, width, height);
    ctx.rect(leftX+50, topY+20, width, height);
    ctx.rect(leftX+100, topY+40, width, height);
    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=150></canvas>
</body>
</html>

क्लोजपाथ (एक पथ कमांड)

context.closePath()

वर्तमान पेन स्थान से आरंभिक पथ समन्वय के लिए एक रेखा खींचता है।

उदाहरण के लिए, यदि आप एक त्रिभुज के 2 पैर बनाते हुए 2 रेखाएँ बनाते हैं, तो ClosePath दूसरे चरण के शुरुआती बिंदु से वापस दूसरे चरण के समापन बिंदु से त्रिकोण के तीसरे चरण को खींचकर त्रिकोण को "बंद" कर देगा।

एक गलतफहमी समझाया!

इस कमांड का नाम अक्सर इसे गलत समझा जाता है।

context.closePath लिए एक अंतिम परिसीमन नहीं है context.beginPath ।

फिर से, क्लोजपाथ कमांड एक रेखा खींचता है - यह एक शुरुआती "बंद" नहीं करता है।

यह उदाहरण एक त्रिकोण के 2 पैर खींचता है और का उपयोग करता है closePath पूरा (करीब ?!) तीसरे पैर बनाकर त्रिकोण है। closePath वास्तव में क्या कर रहा है, दूसरे पैर के समापन बिंदु से पहले पैर के शुरुआती बिंदु तक एक रेखा खींच रहा है।

यहाँ छवि विवरण दर्ज करें 

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // get a reference to the canvas element and it's context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // arguments
    var topVertexX=50;
    var topVertexY=50;
    var rightVertexX=75;
    var rightVertexY=75;
    var leftVertexX=25;
    var leftVertexY=75;

    // A set of line segments drawn to form a triangle using
    //     "moveTo" and multiple "lineTo" commands
    ctx.beginPath();
    ctx.moveTo(topVertexX,topVertexY);
    ctx.lineTo(rightVertexX,rightVertexY);
    ctx.lineTo(leftVertexX,leftVertexY);

    // closePath draws the 3rd leg of the triangle
    ctx.closePath()

    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=150></canvas>
</body>
</html>

शुरुआतपथ (एक पथ कमांड)

context.beginPath()

पथ आदेशों के एक नए सेट को असेंबल करना शुरू करता है और किसी भी पहले से इकट्ठे पथ को भी त्याग देता है।

यह ड्राइंग "पेन" को कैनवास के ऊपरी-बाएँ मूल में ले जाता है (== समन्वय [0,0])।

हालांकि वैकल्पिक, आप हमेशा के साथ एक पथ शुरू कर देना चाहिए beginPath

त्यागना एक महत्वपूर्ण और अक्सर अनदेखी की जाने वाली बात है। यदि आप beginPath साथ एक नया पथ शुरू नहीं करते हैं, तो पहले से जारी कोई भी पथ आदेश अपने आप फिर से शुरू हो जाएगा।

ये 2 डेमो दोनों एक लाल स्ट्रोक और एक नीले स्ट्रोक के साथ "एक्स" खींचने का प्रयास करते हैं।

यह पहला डेमो सही ढंग से beginPath का उपयोग करता है यह दूसरा लाल स्ट्रोक शुरू करने के लिए है। नतीजा यह है कि "एक्स" सही ढंग से एक लाल और एक नीला स्ट्रोक दोनों है।

यहाँ छवि विवरण दर्ज करें 

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // get a reference to the canvas element and it's context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // draw a blue line
    ctx.beginPath();
    ctx.moveTo(30,30);
    ctx.lineTo(100,100);
    ctx.strokeStyle='blue';
    ctx.lineWidth=3;
    ctx.stroke();

    // draw a red line
    ctx.beginPath();        // Important to begin a new path! 
    ctx.moveTo(100,30);
    ctx.lineTo(30,100);
    ctx.strokeStyle='red';
    ctx.lineWidth=3;
    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=150></canvas>
</body>
</html>

यह दूसरा डेमो गलत तरीके से beginPath होता है दूसरे स्ट्रोक पर शुरू होता है। नतीजा यह है कि "एक्स" गलत तरीके से दोनों लाल स्ट्रोक हैं।

दूसरा stroke() दूसरा लाल स्ट्रोक है।

लेकिन एक दूसरे के बिना beginPath , कि एक ही दूसरे stroke() भी गलत तरीके से पहली स्ट्रोक redraws।

चूंकि दूसरे stroke() को अब लाल रंग के रूप में स्टाइल किया जाता है, इसलिए पहले नीले स्ट्रोक को गलत तरीके से रंगे लाल स्ट्रोक द्वारा ओवरराइट किया जाता है।

यहाँ छवि विवरण दर्ज करें 

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // get a reference to the canvas element and it's context
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // draw a blue line
    ctx.beginPath();
    ctx.moveTo(30,30);
    ctx.lineTo(100,100);
    ctx.strokeStyle='blue';
    ctx.lineWidth=3;
    ctx.stroke();

    // draw a red line
    // Note: The necessary 'beginPath' is missing! 
    ctx.moveTo(100,30);
    ctx.lineTo(30,100);
    ctx.strokeStyle='red';
    ctx.lineWidth=3;
    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=200 height=150></canvas>
</body>
</html>

लाइनकैप (एक पथ स्टाइलिंग विशेषता)

context.lineCap=capStyle  // butt (default), round, square

बिंदुओं और समाप्ति बिंदुओं की रेखा शैली की टोपी शैली सेट करती है।

  • बट , डिफॉल्ट लाइनकैप स्टाइल, स्क्वेर्ड कैप दिखाता है जो लाइन के शुरुआती और समाप्ति बिंदुओं से आगे नहीं बढ़ता है।

  • राउंड , राउंडेड कैप दिखाता है जो लाइन के शुरुआती और समाप्ति बिंदुओं से परे होता है।

  • वर्ग , वर्ग के आरंभ और समाप्ति बिंदुओं से आगे बढ़ने वाले वर्ग को दर्शाता है।

यहाँ छवि विवरण दर्ज करें 

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // canvas related variables
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    ctx.lineWidth=15;

    // lineCap default: butt
    ctx.lineCap='butt';  
    drawLine(50,40,200,40);

    // lineCap: round
    ctx.lineCap='round';  
    drawLine(50,70,200,70);

    // lineCap: square
    ctx.lineCap='square';  
    drawLine(50,100,200,100);

    // utility function to draw a line
    function drawLine(startX,startY,endX,endY){
        ctx.beginPath();
        ctx.moveTo(startX,startY);
        ctx.lineTo(endX,endY);
        ctx.stroke();
    }

    // For demo only,
    // Rulers to show which lineCaps extend beyond endpoints
    ctx.lineWidth=1;
    ctx.strokeStyle='red';
    drawLine(50,20,50,120);
    drawLine(200,20,200,120);

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=200></canvas>
</body>
</html>

lineJoin (एक पथ स्टाइलिंग विशेषता)

context.lineJoin=joinStyle  // miter (default), round, bevel

समीपवर्ती रेखा खंडों को जोड़ने के लिए प्रयुक्त शैली सेट करता है।

  • miter , डिफ़ॉल्ट, एक तेज संयुक्त के साथ लाइन सेगमेंट को जोड़ता है।
  • गोल , एक संयुक्त जोड़ के साथ लाइन खंडों में शामिल होता है।
  • बेवेल , एक संयुक्त संयुक्त के साथ लाइन सेगमेंट में शामिल होता है।

यहाँ छवि विवरण दर्ज करें 

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // canvas related variables
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    ctx.lineWidth=15;

    // lineJoin: miter (default)
    ctx.lineJoin='miter';
    drawPolyline(50,30);

    // lineJoin: round
    ctx.lineJoin='round';
    drawPolyline(50,80);

    // lineJoin: bevel
    ctx.lineJoin='bevel';
    drawPolyline(50,130);

    // utility to draw polyline 
    function drawPolyline(x,y){
        ctx.beginPath();
        ctx.moveTo(x,y);
        ctx.lineTo(x+30,y+30);
        ctx.lineTo(x+60,y);
        ctx.lineTo(x+90,y+30);
        ctx.stroke();
    }

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=200></canvas>
</body>
</html>

स्ट्रोक स्टाइल (एक पथ स्टाइलिंग विशेषता)

context.strokeStyle=color

वर्तमान पथ की रूपरेखा को स्ट्रोक करने के लिए उपयोग किए जाने वाले रंग को सेट करता है।

ये color विकल्प हैं (इन्हें उद्धृत किया जाना चाहिए):

  • एक सीएसएस नाम रंग , उदाहरण के लिए context.strokeStyle='red'

  • एक हेक्स रंग , उदाहरण के लिए context.strokeStyle='#FF0000'

  • एक RGB रंग , उदाहरण के लिए context.strokeStyle='rgb(red,green,blue)' जहाँ लाल, हरा और नीला पूर्णांक होते हैं 0-255 प्रत्येक घटक रंग की ताकत का संकेत देते हैं।

  • एक HSL रंग , उदाहरण के लिए context.strokeStyle='hsl(hue,saturation,lightness)' जहां ह्यू रंग पहिया पर 0-360 का पूर्णांक है और संतृप्ति और लाइटनेस प्रतिशत हैं (0-100%) प्रत्येक घटक की ताकत का संकेत देता है ।

  • एक HSLA रंग , उदाहरण के लिए context.strokeStyle='hsl(hue,saturation,lightness,alpha)' जहां ह्यू रंग पहिया पर एक पूर्णांक 0-360 है और संतृप्ति और लपटपन प्रतिशत (0-100%) की ताकत का संकेत है प्रत्येक घटक और अल्फा एक दशमलव मान 0.00-1.00 है जो अस्पष्टता दर्शाता है।

आप इन रंग विकल्पों को भी निर्दिष्ट कर सकते हैं (ये विकल्प संदर्भ द्वारा बनाई गई वस्तुएं हैं):

  • एक लीनियर ग्रेडिएंट, जो एक रैखिक ग्रैडिएंट ऑब्जेक्ट है, जो context.createLinearGradient के साथ बनाया गया है

  • एक रेडियल ग्रेडिएंट, जो एक रेडियल ग्रेडिएंट ऑब्जेक्ट है, जो context.createRadialGradient के साथ बनाया गया है

  • एक पैटर्न जो context.createPattern के साथ बनाई गई एक पैटर्न ऑब्जेक्ट है

यहाँ छवि विवरण दर्ज करें 

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // canvas related variables
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    ctx.lineWidth=15;

    // stroke using a CSS color: named, RGB, HSL, etc
    ctx.strokeStyle='red';
    drawLine(50,40,250,40);

    // stroke using a linear gradient
    var gradient = ctx.createLinearGradient(75,75,175,75);
    gradient.addColorStop(0,'red');
    gradient.addColorStop(1,'green');
    ctx.strokeStyle=gradient;
    drawLine(50,75,250,75);

    // stroke using a radial gradient
    var gradient = ctx.createRadialGradient(100,110,15,100,110,45);
    gradient.addColorStop(0,'red');
    gradient.addColorStop(1,'green');
    ctx.strokeStyle=gradient;
    ctx.lineWidth=20;
    drawLine(50,110,250,110);

    // stroke using a pattern
    var patternImage=new Image();
    patternImage.onload=function(){
        var pattern = ctx.createPattern(patternImage,'repeat');
        ctx.strokeStyle=pattern;
        drawLine(50,150,250,150);
    }
    patternImage.src='https://dl.dropboxusercontent.com/u/139992952/stackoverflow/BooMu1.png';

    // for demo only, draw labels by each stroke
    ctx.textBaseline='middle';
    ctx.font='14px arial';
    ctx.fillText('CSS color',265,40);
    ctx.fillText('Linear Gradient color',265,75);
    ctx.fillText('Radial Gradient color',265,110);
    ctx.fillText('Pattern color',265,150);

    // utility to draw a line
    function drawLine(startX,startY,endX,endY){
        ctx.beginPath();
        ctx.moveTo(startX,startY);
        ctx.lineTo(endX,endY);
        ctx.stroke();
    }

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=425 height=200></canvas>
</body>
</html>

FillStyle (एक पथ स्टाइलिंग विशेषता)

context.fillStyle=color

वर्तमान पथ के इंटीरियर को भरने के लिए उपयोग किए जाने वाले रंग को सेट करता है।

ये रंग विकल्प हैं (इन्हें उद्धृत किया जाना चाहिए):

  • एक सीएसएस नाम रंग , उदाहरण के लिए context.fillStyle='red'

  • एक हेक्स रंग , उदाहरण के लिए context.fillStyle='#FF0000'

  • एक RGB रंग , उदाहरण के लिए context.fillStyle='rgb(red,green,blue)' जहाँ लाल, हरा और नीला पूर्णांक होते हैं 0-255 प्रत्येक घटक रंग की ताकत का संकेत देते हैं।

  • एक HSL रंग , उदाहरण के लिए context.fillStyle='hsl(hue,saturation,lightness)' जहां hue रंग पहिया पर एक पूर्णांक 0-360 है और संतृप्ति और लपटपन प्रतिशत हैं (0-100%) प्रत्येक घटक की ताकत का संकेत ।

  • एक HSLA रंग , उदाहरण के लिए context.fillStyle='hsl(hue,saturation,lightness,alpha)' जहाँ hue रंग के पहिये पर एक पूर्णांक 0-360 है और संतृप्ति और हल्कापन प्रतिशत (0-100%) की ताकत का संकेत है प्रत्येक घटक और अल्फा एक दशमलव मान 0.00-1.00 है जो अस्पष्टता दर्शाता है।

आप इन रंग विकल्पों को भी निर्दिष्ट कर सकते हैं (ये विकल्प संदर्भ द्वारा बनाई गई वस्तुएं हैं):

  • एक लीनियर ग्रेडिएंट, जो एक रैखिक ग्रैडिएंट ऑब्जेक्ट है, जो context.createLinearGradient के साथ बनाया गया है
  • एक रेडियल ग्रेडिएंट, जो एक रेडियल ग्रेडिएंट ऑब्जेक्ट है, जो context.createRadialGradient के साथ बनाया गया है
  • एक पैटर्न जो context.createPattern के साथ बनाई गई एक पैटर्न ऑब्जेक्ट है

यहाँ छवि विवरण दर्ज करें 

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // canvas related variables
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // stroke using a CSS color: named, RGB, HSL, etc
    ctx.fillStyle='red';
    ctx.fillRect(50,50,100,50);

    // stroke using a linear gradient
    var gradient = ctx.createLinearGradient(225,50,300,50);
    gradient.addColorStop(0,'red');
    gradient.addColorStop(1,'green');
    ctx.fillStyle=gradient;
    ctx.fillRect(200,50,100,50);

    // stroke using a radial gradient
    var gradient = ctx.createRadialGradient(100,175,5,100,175,30);
    gradient.addColorStop(0,'red');
    gradient.addColorStop(1,'green');
    ctx.fillStyle=gradient;
    ctx.fillRect(50,150,100,50);

    // stroke using a pattern
    var patternImage=new Image();
    patternImage.onload=function(){
        var pattern = ctx.createPattern(patternImage,'repeat');
        ctx.fillStyle=pattern;
        ctx.fillRect(200,150,100,50);
    }
    patternImage.src='http://i.stack.imgur.com/ixrWe.png';

    // for demo only, draw labels by each stroke
    ctx.fillStyle='black';
    ctx.textAlign='center';
    ctx.textBaseline='middle';
    ctx.font='14px arial';
    ctx.fillText('CSS color',100,40);
    ctx.fillText('Linear Gradient color',250,40);
    ctx.fillText('Radial Gradient color',100,140);
    ctx.fillText('Pattern color',250,140);

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=350 height=250></canvas>
</body>
</html>

लाइनविद (एक पथ स्टाइलिंग विशेषता)

context.lineWidth=lineWidth

लाइन की चौड़ाई सेट करता है जो पथ की रूपरेखा को स्ट्रोक करेगा

यहाँ छवि विवरण दर्ज करें 

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // canvas related variables
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    ctx.lineWidth=1;
    drawPolyline(50,50);

    ctx.lineWidth=5;
    drawPolyline(50,100);

    ctx.lineWidth=10;
    drawPolyline(50,150);


    // utility to draw a polyline 
    function drawPolyline(x,y){
        ctx.beginPath();
        ctx.moveTo(x,y);
        ctx.lineTo(x+30,y+30);
        ctx.lineTo(x+60,y);
        ctx.lineTo(x+90,y+30);
        ctx.stroke();
    }

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=350 height=250></canvas>
</body>
</html>

shadowColor, shadowBlur, shadowOffsetX, shadowOffsetY (पथ स्टाइलिंग विशेषताएँ)

shadowColor = color        // CSS color
shadowBlur =  width        // integer blur width
shadowOffsetX = distance   // shadow is moved horizontally by this offset
shadowOffsetY = distance   // shadow is moved vertically by this offset

विशेषताओं का यह सेट एक पथ के चारों ओर एक छाया जोड़ देगा।

दोनों भरे हुए मार्ग और पथरीले रास्ते में छाया हो सकती है।

मार्ग परिधि में छाया सबसे गहरा (अपारदर्शी) है और धीरे-धीरे हल्का हो जाता है क्योंकि यह पथ परिधि से दूर है।

  • shadowColor इंगित करता है कि छाया बनाने के लिए किस सीएसएस रंग का उपयोग किया जाएगा।
  • शैडब्लूर वह दूरी है जिस पर छाया पथ से बाहर की ओर निकलती है।
  • ShadowOffsetX एक दूरी है जिसके द्वारा छाया को क्षैतिज रूप से पथ से दूर स्थानांतरित कर दिया जाता है। एक सकारात्मक दूरी छाया को दाईं ओर ले जाती है, एक नकारात्मक दूरी छाया को बाईं ओर ले जाती है।
  • ShadowOffsetY एक दूरी है जिसके द्वारा छाया को पथ से लंबवत स्थानांतरित किया जाता है। एक सकारात्मक दूरी छाया को नीचे की ओर ले जाती है, एक नकारात्मक दूरी छाया को ऊपर की ओर ले जाती है।

शैडोऑफसेटएक्स और शैडोऑफसेटवाई के बारे में

यह ध्यान रखना महत्वपूर्ण है कि पूरी छाया अपनी संपूर्णता में स्थानांतरित हो गई है । यह छाया के हिस्से को भरे हुए रास्तों के नीचे शिफ्ट करने का कारण बनेगा और इसलिए छाया का हिस्सा दिखाई नहीं देगा।

छायांकित स्ट्रोक के बारे में

जब एक स्ट्रोक को छाया करते हैं, तो स्ट्रोक के अंदर और बाहर दोनों को छायांकित किया जाता है। छाया स्ट्रोक में सबसे गहरी है और हल्की होती है क्योंकि छाया स्ट्रोक से दोनों दिशाओं में बाहर की ओर निकलती है।

हो जाने पर छाया देना बंद कर देना

आपके द्वारा अपनी छाया खींचने के बाद, आप अधिक पथ बनाने के लिए छायाकरण को बंद करना चाह सकते हैं। शैडोइंग को बंद करने के लिए आप shadowColor को पारदर्शी पर सेट करें। 

context.shadowColor = 'rgba(0,0,0,0)';

प्रदर्शन के विचार

छाया (जैसे ढाल) के लिए व्यापक संगणना की आवश्यकता होती है और इसलिए आपको छाया का संयम से उपयोग करना चाहिए।

एनिमेट करते समय विशेष रूप से सतर्क रहें क्योंकि प्रति सेकंड कई बार परछाई खींचने से प्रदर्शन पर बहुत प्रभाव पड़ेगा। यदि आपको एक छायांकित पथ को चेतन करने की आवश्यकता है, तो दूसरे "छाया-कैनवास" पर छायांकित पथ को पूर्व-निर्मित करना है। शैडो-कैनवस एक सामान्य कैनवस है जिसे मेमोरी में document.createElement साथ बनाया गया है। यह - यह डोम में नहीं जोड़ा जाता है (यह सिर्फ एक स्टेजिंग कैनवास है)। फिर मुख्य कैनवास पर छाया-कैनवास खींचें। यह बहुत तेज़ है क्योंकि प्रति सेकंड कई बार छाया गणना की आवश्यकता नहीं होती है। आप जो कुछ भी कर रहे हैं वह आपके दिखाई देने वाले कैनवास पर एक पूर्वनिर्मित कैनवास की नकल कर रहा है।

यहाँ छवि विवरण दर्ज करें 

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // canvas related variables
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // shadowed stroke
    ctx.shadowColor='black';
    ctx.shadowBlur=6;
    ctx.strokeStyle='red';
    ctx.strokeRect(50,50,100,50);
    // darken the shadow by stroking a second time
    ctx.strokeRect(50,50,100,50);

    // shadowed fill
    ctx.shadowColor='black';
    ctx.shadowBlur=10;
    ctx.fillStyle='red';
    ctx.fillRect(225,50,100,50);
    // darken the shadow by stroking a second time
    ctx.fillRect(225,50,100,50);

    // the shadow offset rightward and downward 
    ctx.shadowColor='black';
    ctx.shadowBlur=10;
    ctx.shadowOffsetX=5;
    ctx.shadowOffsetY=5;
    ctx.fillStyle='red';
    ctx.fillRect(50,175,100,50);

    // a wider blur (==extends further from the path)
    ctx.shadowColor='black';
    ctx.shadowBlur=35;
    ctx.fillStyle='red';
    ctx.fillRect(225,175,100,50);

    // always clean up! Turn off shadowing
    ctx.shadowColor='rgba(0,0,0,0)';

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=400 height=300></canvas>
</body>
</html>

createLinearGradient (एक पथ स्टाइलिंग ऑब्जेक्ट बनाता है)

var gradient = createLinearGradient( startX, startY, endX, endY )
gradient.addColorStop(gradientPercentPosition, CssColor)
gradient.addColorStop(gradientPercentPosition, CssColor)
[optionally add more color stops to add to the variety of the gradient]

एक पुन: प्रयोज्य रैखिक ढाल (वस्तु) बनाता है।

वस्तु किसी भी को सौंपा जा सकता strokeStyle और / या fillStyle ।

फिर स्ट्रोक () या फिल () ऑब्जेक्ट के ढाल रंगों के साथ पथ को रंग देगा।

ग्रेडिएंट ऑब्जेक्ट बनाना 2-चरणीय प्रक्रिया है:

  1. ग्रेडिएंट ऑब्जेक्ट खुद बनाएं। निर्माण के दौरान आप कैनवास पर एक रेखा को परिभाषित करते हैं जहां ढाल शुरू और समाप्त होगा। ग्रेडिएंट ऑब्जेक्ट var gradient = context.createLinearGradient के साथ बनाया गया है।
  2. फिर 2 (या अधिक) रंग जोड़ें जो ढाल बनाते हैं। यह ग्रेडिएंट ऑब्जेक्ट को gradient.addColorStop साथ कई रंग स्टॉप को जोड़कर किया जाता है।

तर्क:

  • startX, startY कैनवास समन्वय है जहां ढाल शुरू होता है। प्रारंभिक बिंदु पर (और इससे पहले) कैनवास ठोस रूप से सबसे कम gradientPercentPosition का रंग है।

  • एंडएक्स, एंडवाई कैनवास समन्वय है जहां ग्रेडिएंट समाप्त होता है। अंत बिंदु पर (और बाद में) कैनवस ठोस रूप से उच्चतम gradientPercentPosition का रंग है।

  • gradientPercentPosition 0.00 और 1.00 के बीच एक फ्लोट संख्या है जिसे एक रंग स्टॉप को सौंपा गया है। यह मूल रूप से लाइन के साथ एक प्रतिशत वेपाइंट है जहां यह विशेष रंग स्टॉप लागू होता है।

    • ढाल 0.00 पर शुरू होता है जो कैनवास पर [startX, startY] है।
    • ढाल का प्रतिशत 1.00 पर समाप्त होता है जो कैनवास पर [एंडएक्स, एंडी] है।
    • तकनीकी नोट: शब्द "प्रतिशत" तकनीकी रूप से सही नहीं है क्योंकि मान 0 से 100% के बजाय 0.00 से 1.00 तक जाते हैं।

  • CssColor एक सीएसएस रंग है जिसे इस विशेष रंग स्टॉप को सौंपा गया है।

ग्रेडिएंट ऑब्जेक्ट एक ऐसा ऑब्जेक्ट है जिसे आप अपना पथ स्ट्रोक बनाने के लिए (और पुन: उपयोग कर सकते हैं!) धीरे-धीरे रंग भरते हैं।

साइड नोट: ढाल वस्तु कैनवस तत्व के लिए आंतरिक नहीं है और न ही यह संदर्भ है। यह एक अलग और पुन: प्रयोज्य जावास्क्रिप्ट ऑब्जेक्ट है जिसे आप अपनी इच्छानुसार किसी भी पथ पर असाइन कर सकते हैं। तुम भी एक अलग कैनवास तत्व पर एक पथ रंग करने के लिए इस वस्तु का उपयोग कर सकते हैं (!)

रंग ठहराव ढाल रेखा के साथ (प्रतिशत) वेपाइंट हैं। प्रत्येक रंग स्टॉप वेपॉइंट पर, ढाल पूरी तरह से (== अपारदर्शी) रंग से रंगा हुआ होता है। रंग स्टॉप के बीच ढाल रेखा के साथ अंतरिम बिंदु इस और पिछले रंग के ग्रेडिएंट के रूप में रंगीन होते हैं।

कैनवास ढ़ाल के बारे में महत्वपूर्ण संकेत!

जब आप एक ग्रेडिएंट ऑब्जेक्ट बनाते हैं, तो पूरा कैनवस "धीरे-धीरे" उस ग्रेडिएंट से भर जाता है।

जब आप एक पथ को stroke() या fill() , अदृश्य ढाल का पता चलता है, लेकिन केवल उस पथ पर स्ट्रोक या भरा होने का पता चलता है।

  1. यदि आप इस तरह एक लाल-से-मेजेंटा रैखिक ढाल बनाते हैं: 

     // create a linearGradient
 var gradient=ctx.createLinearGradient(100,0,canvas.width-100,0);
 gradient.addColorStop(0,'red');
 gradient.addColorStop(1,'magenta');
 ctx.fillStyle=gradient;

  2. तब कैनवास "अदृश्य रूप से" आपकी ढाल निर्माण को इस तरह देखेगा:

यहाँ छवि विवरण दर्ज करें

  1. लेकिन जब तक आप ढाल के साथ stroke() या fill() नहीं करेंगे, आपको कैनवस पर ढाल में से कोई भी दिखाई नहीं देगा।

  2. अंत में, यदि आप ग्रेडिएंट का उपयोग करके पथ को स्ट्रोक करते हैं या भरते हैं, तो कैनवस पर "अदृश्य" ग्रेडिएंट दिखाई देता है ... लेकिन केवल वही जहां रास्ता खींचा जाता है।

यहाँ छवि विवरण दर्ज करें 

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // canvas related variables
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // Create a linearGradient
    // Note: Nothing visually appears during this process
    var gradient=ctx.createLinearGradient(100,0,canvas.width-100,0);
    gradient.addColorStop(0,'red');
    gradient.addColorStop(1,'magenta');

    // Create a polyline path 
    // Note: Nothing visually appears during this process
    var x=20;
    var y=40;
    ctx.lineCap='round';
    ctx.lineJoin='round';
    ctx.lineWidth=15;
    ctx.beginPath();
    ctx.moveTo(x,y);
    ctx.lineTo(x+30,y+50);
    ctx.lineTo(x+60,y);
    ctx.lineTo(x+90,y+50);
    ctx.lineTo(x+120,y);
    ctx.lineTo(x+150,y+50);
    ctx.lineTo(x+180,y);
    ctx.lineTo(x+210,y+50);
    ctx.lineTo(x+240,y);
    ctx.lineTo(x+270,y+50);
    ctx.lineTo(x+300,y);
    ctx.lineTo(x+330,y+50);
    ctx.lineTo(x+360,y);

    // Set the stroke style to be the gradient
    // Note: Nothing visually appears during this process
    ctx.strokeStyle=gradient;
    
    // stroke the path
    // FINALLY! The gradient-stroked path is visible on the canvas
    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=400 height=150></canvas>
</body>
</html>

createRadialGradient (पथ स्टाइल ऑब्जेक्ट बनाता है)

var gradient = createRadialGradient( 
      centerX1, centerY1, radius1,     // this is the "display' circle
      centerX2, centerY2, radius2      // this is the "light casting" circle
)
gradient.addColorStop(gradientPercentPosition, CssColor)
gradient.addColorStop(gradientPercentPosition, CssColor)
[optionally add more color stops to add to the variety of the gradient]

एक पुन: प्रयोज्य रेडियल ढाल (ऑब्जेक्ट) बनाता है। ग्रेडिएंट ऑब्जेक्ट एक ऐसा ऑब्जेक्ट है जिसे आप अपना पथ स्ट्रोक बनाने के लिए (और पुनः उपयोग कर सकते हैं!) धीरे-धीरे रंग भरते जाते हैं।

के बारे में...

कैनवस रेडियल ग्रेडिएंट पारंपरिक रेडियल ग्रेडिएंट से बहुत अलग है।

कैनवस के रेडियल ग्रेडिएंट की "आधिकारिक" (लगभग असंदिग्ध!) परिभाषा इस पोस्टिंग में सबसे नीचे है। कमजोर नजरिया होने पर इसे न देखें !!

में (लगभग समझने योग्य) शब्द:

  • रेडियल ग्रेडिएंट में 2 सर्कल हैं: एक "कास्टिंग" सर्कल और एक "डिस्प्ले" सर्कल।
  • कास्टिंग सर्कल डिस्प्ले सर्कल में प्रकाश डालता है।
  • वह प्रकाश ढाल है।
  • उस ढाल के आकार का आकार दोनों सर्कल के सापेक्ष आकार और स्थिति से निर्धारित होता है।

ग्रेडिएंट ऑब्जेक्ट बनाना 2-चरणीय प्रक्रिया है:

  1. ग्रेडिएंट ऑब्जेक्ट खुद बनाएं। निर्माण के दौरान आप कैनवास पर एक रेखा को परिभाषित करते हैं जहां ढाल शुरू और समाप्त होगा। ग्रेडिएंट ऑब्जेक्ट var gradient = context.radialLinearGradient के साथ बनाया गया है।
  2. फिर 2 (या अधिक) रंग जोड़ें जो ढाल बनाते हैं। यह ग्रेडिएंट ऑब्जेक्ट को gradient.addColorStop साथ कई रंग स्टॉप को जोड़कर किया जाता है।

तर्क:

  • CenterX1, centerY1, त्रिज्या 1 एक पहले वृत्त को परिभाषित करता है जहां ढाल प्रदर्शित किया जाएगा।

  • CenterX2, centerY2, त्रिज्या 2 एक दूसरे सर्कल को परिभाषित करता है जो पहले सर्कल में ढाल रोशनी डाल रहा है।

  • gradientPercentPosition 0.00 और 1.00 के बीच एक फ्लोट संख्या है जिसे एक रंग स्टॉप को सौंपा गया है। यह मूल रूप से एक प्रतिशत वेपाइंट डिफाइनिंग है जहां यह विशेष रंग स्टॉप ग्रेडिएंट के साथ लागू होता है।

    • ढाल 0.00 प्रतिशत से शुरू होता है।
    • ढाल 1.00 प्रतिशत पर समाप्त होती है।
    • तकनीकी नोट: शब्द "प्रतिशत" तकनीकी रूप से सही नहीं है क्योंकि मान 0 से 100% के बजाय 0.00 से 1.00 तक जाते हैं।

  • CssColor एक सीएसएस रंग है जिसे इस विशेष रंग स्टॉप को सौंपा गया है।

साइड नोट: ढाल वस्तु कैनवस तत्व के लिए आंतरिक नहीं है और न ही यह संदर्भ है। यह एक अलग और पुन: प्रयोज्य जावास्क्रिप्ट ऑब्जेक्ट है जिसे आप अपनी इच्छानुसार किसी भी पथ पर असाइन कर सकते हैं। तुम भी एक अलग कैनवास तत्व पर एक पथ रंग करने के लिए इस वस्तु का उपयोग कर सकते हैं (!)

रंग ठहराव ढाल रेखा के साथ (प्रतिशत) वेपाइंट हैं। प्रत्येक रंग स्टॉप वेपॉइंट पर, ढाल पूरी तरह से (== अपारदर्शी) रंग से रंगा हुआ होता है। रंग स्टॉप के बीच ढाल रेखा के साथ अंतरिम बिंदु इस और पिछले रंग के ग्रेडिएंट के रूप में रंगीन होते हैं।

कैनवास ढ़ाल के बारे में महत्वपूर्ण संकेत!

जब आप एक ढाल ऑब्जेक्ट बनाते हैं, तो पूरे रेडियल ग्रेडिएंट कैनवास पर "अदृश्य रूप से" डाले जाते हैं।

जब आप एक पथ को stroke() या fill() , अदृश्य ढाल का पता चलता है, लेकिन केवल उस पथ पर स्ट्रोक या भरा होने का पता चलता है।

  1. यदि आप इस तरह एक हरे-से-लाल रेडियल ढाल बनाते हैं: 

     // create a radialGradient
 var x1=150;
 var y1=150;
 var x2=280;
 var y2=150;
 var r1=100;
 var r2=120;
 var gradient=ctx.createRadialGradient(x1,y1,r1,x2,y2,r2);
 gradient.addColorStop(0,'red');
 gradient.addColorStop(1,'green');
 ctx.fillStyle=gradient;
  1. तब कैनवास "अदृश्य रूप से" आपकी ढाल निर्माण को इस तरह देखेगा:

यहाँ छवि विवरण दर्ज करें

  1. लेकिन जब तक आप ढाल के साथ stroke() या fill() नहीं करेंगे, आपको कैनवस पर ढाल में से कोई भी दिखाई नहीं देगा।

  2. अंत में, यदि आप ग्रेडिएंट का उपयोग करके पथ को स्ट्रोक करते हैं या भरते हैं, तो कैनवस पर "अदृश्य" ग्रेडिएंट दिखाई देता है ... लेकिन केवल वही जहां रास्ता खींचा जाता है।

यहाँ छवि विवरण दर्ज करें 

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; padding:10px; }
    #canvas{border:1px solid blue; }
</style>
<script>
window.onload=(function(){

    // canvas related vars
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");
    
    // create a radial gradient
    var x1=150;
    var y1=175;
    var x2=350;
    var y2=175;
    var r1=100;
    var r2=40;
    x2=x1;
    var gradient=ctx.createRadialGradient(x1,y1,r1,x2,y2,r2);
    gradient.addColorStop(0,'red');
    gradient.addColorStop(1,'green');
    ctx.fillStyle=gradient;

    // fill a path with the gradient
    ctx.beginPath();
    ctx.moveTo(150,0);
    ctx.lineTo(300,150);
    ctx.lineTo(150,325);
    ctx.lineTo(0,150);
    ctx.lineTo(150,0);
    ctx.fill();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=300 height=325></canvas>
</body>
</html>

डरावना आधिकारिक विवरण

कौन तय करता है कि `createRadialGradient क्या करता है?

W3C आधिकारिक अनुशंसित विनिर्देशों को जारी करता है जो ब्राउज़र एचटीएमएल 5 कैनवस तत्व के निर्माण के लिए उपयोग करते हैं।

createRadialGradient लिए W3C विनिर्देश createRadialGradient इस तरह पढ़ता है:

createRadialGradient क्या बनाता है

createRadialGradient … प्रभावी रूप से एक शंकु बनाता है, जो ढाल के निर्माण में परिभाषित दो हलकों द्वारा स्पर्श किया जाता है, पहले सर्कल के रंग के साथ शंकु के हिस्से के साथ, पहले ऑफसेट के रंग का उपयोग करके, अंत चक्र के बाद शंकु का हिस्सा (1.0) अंतिम ऑफसेट के रंग का उपयोग करते हुए, और शंकु के बाहर के क्षेत्र ढाल (पारदर्शी काले) से अछूते हैं।

यह आंतरिक रूप से कैसे काम करता है

createRadialGradient(x0, y0, r0, x1, y1, r1) विधि छह तर्क लेती है, पहले तीन मूल (x0, y0) और त्रिज्या r0 के साथ स्टार्ट सर्कल का प्रतिनिधित्व करते हैं, और अंतिम तीन मूल के साथ सर्कल का प्रतिनिधित्व करते हैं (X1 , y1) और त्रिज्या r1 है। मान अंतरिक्ष इकाइयों के समन्वय में हैं। यदि या तो r0 या r1 ऋणात्मक हैं, तो IndexSizeError अपवाद को फेंक दिया जाना चाहिए। अन्यथा, विधि को दो निर्दिष्ट सर्किलों के साथ आरंभिक रेडियल कैनवसग्रेडिएंट लौटना चाहिए।

इन चरणों का पालन करके रेडियल ग्रेडिएंट का प्रतिपादन किया जाना चाहिए:

  1. यदि x0 = X1 और y0 = y1 और r0 = r1, तो रेडियल ग्रेडिएंट को कुछ भी नहीं रंगना चाहिए। इन चरणों का पालन करें।
  2. आज्ञा देना x (ω) = (X1-x0) ω + x0; आज्ञा देना y ()) = (y1-y0) ω + y0; आज्ञा देना r ()) = (r1-r0) Let + r0 आज्ञा देना ढाल पर रंग उस स्थिति में रंग है (ऊपर वर्णित प्रक्षेप और प्रक्षेप से आने वाले रंगों के साथ)।
  3. R के सभी मानों के लिए जहां r (ω)> 0, सकारात्मक अनंत के निकटतम ω के मूल्य से शुरू होता है और नकारात्मक अनंत के निकटतम ω के मूल्य के साथ समाप्त होता है, स्थिति में त्रिज्या r (ω) के साथ वृत्त की परिधि खींचें x (,), y (ω), at पर रंग के साथ, लेकिन केवल कैनवास के उन हिस्सों पर पेंटिंग की गई है जो ग्रेडिएंट के इस रेंडरिंग के लिए इस चरण में पहले के सर्कल द्वारा पेंट नहीं किए गए हैं।

createPattern (एक पथ स्टाइलिंग ऑब्जेक्ट बनाता है)

var pattern = createPattern(imageObject,repeat)

एक पुन: प्रयोज्य पैटर्न (ऑब्जेक्ट) बनाता है।

वस्तु किसी भी को सौंपा जा सकता strokeStyle और / या fillStyle ।

तब स्ट्रोक () या भरण () ऑब्जेक्ट के पैटर्न के साथ पथ को पेंट करेगा।

तर्क:

  • imageObject एक छवि है जिसे एक पैटर्न के रूप में उपयोग किया जाएगा। छवि का स्रोत हो सकता है:

    • HTMLImageElement --- एक img तत्व या एक नई छवि (),
    • HTMLCanvasElement --- एक कैनवास तत्व,
    • HTMLVideoElement --- एक वीडियो तत्व (वर्तमान वीडियो फ्रेम को पकड़ लेगा)
    • ImageBitmap,
    • ब्लॉब।

  • रिपीट यह निर्धारित करता है कि कैसे इमेज ऑबजेक्ट को कैनवस (एक सीएसएस पृष्ठभूमि की तरह) में दोहराया जाएगा। इस तर्क को सीमांकित किया जाना चाहिए और मान्य मान निम्न हैं:

    • "दोहराएं" --- पैटर्न क्षैतिज और लंबवत रूप से कैनवास को भर देगा
    • "रिपीट-एक्स" --- पैटर्न केवल क्षैतिज रूप से दोहराएगा (1 क्षैतिज पंक्ति)
    • "रिपीट-वाई" --- पैटर्न केवल लंबवत दोहराएगा (1 ऊर्ध्वाधर पंक्ति)
    • "कोई भी दोहराएं" --- पैटर्न केवल एक बार दिखाई देता है (शीर्ष बाईं ओर)

पैटर्न ऑब्जेक्ट एक ऐसा ऑब्जेक्ट है जिसे आप अपना पथ स्ट्रोक बनाने और भरने के लिए (और पुनः उपयोग कर सकते हैं) पैटर्न बन जाते हैं।

साइड नोट: पैटर्न ऑब्जेक्ट कैनवास तत्व के लिए आंतरिक नहीं है और न ही यह संदर्भ है। यह एक अलग और पुन: प्रयोज्य जावास्क्रिप्ट ऑब्जेक्ट है जिसे आप अपनी इच्छानुसार किसी भी पथ पर असाइन कर सकते हैं। तुम भी एक अलग कैनवास तत्व पर पथ पर पैटर्न लागू करने के लिए इस वस्तु का उपयोग कर सकते हैं (!)

कैनवास पैटर्न के बारे में महत्वपूर्ण संकेत!

जब आप एक पैटर्न ऑब्जेक्ट बनाते हैं, तो पूरा कैनवास "अदृश्य रूप से" उस पैटर्न से भरा होता है ( repeat तर्क के अधीन)।

जब आप एक पथ को stroke() या fill() , अदृश्य पैटर्न का पता चलता है, लेकिन केवल उस पथ पर स्ट्रोक या भरा हुआ होने का पता चलता है।

  1. एक छवि के साथ शुरू करें जिसे आप पैटर्न के रूप में उपयोग करना चाहते हैं। महत्वपूर्ण (!): अपने पैटर्न को बनाने के लिए इसका उपयोग करने का प्रयास करने से पहले सुनिश्चित करें कि आपकी छवि पूरी तरह से लोड हो गई है ( patternimage.onload का उपयोग करके)।

यहाँ छवि विवरण दर्ज करें

  1. आप इस तरह एक पैटर्न बनाते हैं: 

     // create a pattern
 var pattern = ctx.createPattern(patternImage,'repeat');
 ctx.fillStyle=pattern;

  2. तब कैनवास "अदृश्य रूप से" आपके पैटर्न निर्माण को इस तरह से देखेगा:

यहाँ छवि विवरण दर्ज करें

  1. लेकिन जब तक आप पैटर्न के साथ stroke() या fill() नहीं करेंगे, आपको कैनवस पर कोई भी पैटर्न दिखाई नहीं देगा।

  2. अंत में, यदि आप पैटर्न का उपयोग करके एक पथ को स्ट्रोक करते हैं या भरते हैं, तो "अदृश्य" पैटर्न कैनवास पर दिखाई देता है ... लेकिन केवल वही जहां मार्ग खींचा गया है।

यहाँ छवि विवरण दर्ज करें 

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // canvas related variables
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    // fill using a pattern
    var patternImage=new Image();
    // IMPORTANT! 
    // Always use .onload to be sure the image has
    //     fully loaded before using it in .createPattern
    patternImage.onload=function(){
        // create a pattern object
        var pattern = ctx.createPattern(patternImage,'repeat');
        // set the fillstyle to that pattern
        ctx.fillStyle=pattern;
        // fill a rectangle with the pattern
        ctx.fillRect(50,50,150,100);
        // demo only, stroke the rect for clarity
        ctx.strokeRect(50,50,150,100);
    }
    patternImage.src='http://i.stack.imgur.com/K9EZl.png';

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=325 height=250></canvas>
</body>
</html>

स्ट्रोक (एक पथ कमांड)

context.stroke()

पथ के परिधि को वर्तमान context.strokeStyle अनुसार स्ट्रैक्ड किया जा सकता है। context.strokeStyle और स्ट्रैक्ड पथ को नेत्रहीन रूप से कैनवास पर खींचा जाता है।

context.stroke निष्पादित करने से पहले। context.stroke (या context.fill ) पथ स्मृति में मौजूद है और अभी तक नेत्रहीन कैनवास पर नहीं खींचा गया है।

असामान्य तरीके के स्ट्रोक खींचे जाते हैं

इस उदाहरण पथ पर विचार करें जो [0,5] से [5,5] तक 1 पिक्सेल काली रेखा खींचता है: 

// draw a 1 pixel black line from [0,5] to [5,5]
context.strokeStyle='black';
context.lineWidth=1;
context.beginPath();
context.moveTo(0,5);
context.lineTo(5,5);
context.stroke();

प्रश्न: ब्राउज़र वास्तव में कैनवास पर क्या आकर्षित करता है?

आपको शायद y = 5 पर 6 ब्लैक पिक्सेल मिलने की उम्मीद है

यहाँ छवि विवरण दर्ज करें

लेकिन (!) ... कैनवस हमेशा स्ट्रोक को आधे रास्ते में खींचता है, यह परिभाषित मार्ग के दोनों ओर है!

इसलिए चूंकि लाइन को y==5.0 पर परिभाषित किया गया है, इसलिए कैनवस y==4.5 और y==5.5 बीच की रेखा खींचना चाहता है

यहाँ छवि विवरण दर्ज करें

लेकिन, फिर से (!) ... कंप्यूटर का प्रदर्शन आधा-पिक्सेल नहीं खींच सकता है!

तो अवांछित आधा-पिक्सेल के साथ क्या करना है (नीचे नीले रंग में दिखाया गया है)?

यहाँ छवि विवरण दर्ज करें

इसका उत्तर यह है कि कैनवस वास्तव में 4.0 से 6.0 तक 2 पिक्सेल चौड़ी लाइन खींचने के लिए डिस्प्ले का आदेश देता है। यह परिभाषित black तुलना में लाइन लाइटर को भी रंगता है। यह अजीब ड्राइंग व्यवहार "एंटी-अलियासिंग" है और यह कैनवस को दांतेदार दिखने वाले स्ट्रोक से बचने में मदद करता है।

यहाँ छवि विवरण दर्ज करें

एक समायोजन की चाल जो केवल क्षैतिज और ऊर्ध्वाधर स्ट्रोक के लिए काम करती है

आप आधे पिक्सेल पर रेखा को निर्दिष्ट करके 1 पिक्सेल ठोस काली रेखा प्राप्त कर सकते हैं: 

context.moveTo(0,5.5);
context.lineto(5,5.5);

यहाँ छवि विवरण दर्ज करें

उदाहरण कोड का उपयोग कर context.stroke() कैनवास पर एक पथ को खींचने के लिए:

यहाँ छवि विवरण दर्ज करें 

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // canvas related variables
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    ctx.beginPath();
    ctx.moveTo(50,30);
    ctx.lineTo(75,55);
    ctx.lineTo(25,55);
    ctx.lineTo(50,30);
    ctx.lineWidth=2;
    ctx.stroke();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=100 height=100></canvas>
</body>
</html>

भरें (एक पथ कमांड)

context.fill()

वर्तमान context.fillStyle अनुसार भरे जाने वाले पथ के अंदर का कारण बनता है। context.fillStyle और भरे हुए मार्ग को नेत्रहीन रूप से कैनवास पर खींचा जाता है।

context.fill निष्पादित करने से पहले context.fill (या context.stroke ) पथ स्मृति में मौजूद है और अभी तक नेत्रहीन रूप से कैनवास पर नहीं खींचा गया है।

उदाहरण कोड का उपयोग कर context.fill() कैनवास पर एक भरा हुआ रास्ता निकालने के लिए:

यहाँ छवि विवरण दर्ज करें 

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // canvas related variables
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    ctx.beginPath();
    ctx.moveTo(50,30);
    ctx.lineTo(75,55);
    ctx.lineTo(25,55);
    ctx.lineTo(50,30);
    ctx.fillStyle='blue';
    ctx.fill();

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=100 height=100></canvas>
</body>
</html>

क्लिप (एक पथ कमांड)

context.clip

भविष्य के किसी भी चित्र को केवल वर्तमान पथ के अंदर प्रदर्शित करने के लिए सीमित करता है।

उदाहरण: इस छवि को एक त्रिकोणीय पथ में क्लिप करें

यहाँ छवि विवरण दर्ज करें

यहाँ छवि विवरण दर्ज करें 

<!doctype html>
<html>
<head>
<style>
    body{ background-color:white; }
    #canvas{border:1px solid red; }
</style>
<script>
window.onload=(function(){

    // canvas related variables
    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    var img=new Image();
    img.onload=start;
    img.src='http://i.stack.imgur.com/1CqWf.jpg'

    function start(){
        // draw a triangle path
        ctx.beginPath();
        ctx.moveTo(75,50);
        ctx.lineTo(125,100);
        ctx.lineTo(25,100);
        ctx.lineTo(75,50);
        
        // clip future drawings to appear only in the triangle
        ctx.clip();
        
        // draw an image
        ctx.drawImage(img,0,0);
    }

}); // end window.onload
</script>
</head>
<body>
    <canvas id="canvas" width=150 height=150></canvas>
</body>
</html>


Modified text is an extract of the original Stack Overflow Documentation
के तहत लाइसेंस प्राप्त है CC BY-SA 3.0
से संबद्ध नहीं है Stack Overflow