Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> Javascript

HTML5 कैनवास में मंडलियों के अंदर एक टेक्स्ट बनाएं

<घंटा/>

कैनवास में मंडलियों के अंदर पाठ बनाने के लिए, इसका उपयोग करें:

context.beginPath();

निम्नलिखित कैनवास है:

$("#demo").on("click", "#canvas1", function(event) {
   var canvas = document.getElementById('canvas1');
   if (canvas.getContext) {
      var context = canvas.getContext("2d");
      var w = 25;
      var x = event.pageX;
      var y = Math.floor(event.pageY-$(this).offset().top);

      context.beginPath();
      context.fillStyle = "blue";
      context.arc(x, y, w/2, 0, 2 * Math.PI, false);
      context.fill();
      context = canvas.getContext("2d");

      context.font = '9pt';
      context.fillStyle = 'white';
      context.textAlign = 'center';
      context.fillText('amit', x, y+4);
   }
});

एचटीएमएल

<div id = demo>
   <canvas id = canvas1></canvas>
</div>

  1. HTML5 कैनवास के अंदर एक छवि का भाग बनाएं

    यदि आप कैनवास के अंदर किसी छवि का भाग बनाना चाहते हैं, तो छवि ऑनलोड फ़ंक्शन केवल एक बार सक्रिय होता है जब छवि ब्राउज़र में पहली बार लोड होती है। आइए उदाहरण देखें: $(document).ready(function () {    var cw1 = 200;    var ch1 = 300;    var ctx1 = $("#myCanvas")

  1. HTML5 कैनवास परिवर्तन

    HTML5 कैनवास ऐसे तरीके प्रदान करता है जो सीधे रूपांतरण मैट्रिक्स में संशोधन की अनुमति देता है। रूपांतरण मैट्रिक्स प्रारंभ में पहचान परिवर्तन होना चाहिए। फिर इसे रूपांतरण विधियों का उपयोग करके समायोजित किया जा सकता है। उदाहरण आइए कैनवास परिवर्तन का एक उदाहरण देखें: function drawShape(){// DOM वर

  1. HTML5 कैनवास के साथ एक पैटर्न बनाएं

    HTML5 कैनवास के साथ एक पैटर्न बनाने के लिए निम्नलिखित विधि का उपयोग करें:createPattern(image, पुनरावृत्ति)− यह विधि प्रतिमान बनाने के लिए एक छवि का उपयोग करेगी। दूसरा तर्क निम्नलिखित मानों में से एक के साथ एक स्ट्रिंग हो सकता है:दोहराना, दोहराना-एक्स, दोहराना-वाई, और दोहराना नहीं। यदि खाली स्ट्रिंग