मैंने fillText विकल्प का उपयोग कर html5 कैनवास ऑब्जेक्ट पर एक टेक्स्ट रखा है, सवाल है कि मुझे टेक्स्ट स्थिति को स्थानांतरित करने या पहले से प्रस्तुत किए गए पाठ के रंग को बदलने की आवश्यकता है।एचटीएमएल 5 पर चल रहे ऑब्जेक्ट्स कैनवास
कुछ ही समय मुझे पता है कि कैनवास तत्व का विशेष बच्चे हेरफेर करने के लिए कैसे
टीजे की तरह, सभी दृढ़ता आपको अपने आप में बनाना है। लेकिन इसका कोई मतलब नहीं है कि यह हार्ड करने के लिए है। मैंने कुछ छोटे tutorials लिखा है जो आपको कार्य शुरू करने पर शुरू कर देंगे।
मुझे लगता है कि कैनवास के पीछे कोई ऑब्जेक्ट मॉडल नहीं है, जरूरत है तो आप एक "पाठ वस्तु" की तरह एक "बच्चे वस्तु" उपयोग नहीं कर सकते तो और इसे बदलने के । आप क्या कर सकते हैं यह है कि आप फिर से टेक्स्ट को एक अलग रंग से खींचते हैं जो कैनवास के "पिक्सेल" को ओवरराइट करता है। यदि आप टेक्स्ट को स्थानांतरित करना चाहते हैं, तो पहले आपको पिछली स्थिति में टेक्स्ट से छुटकारा पाने के लिए कैनवास साफ़ करना होगा या पृष्ठभूमि/पारदर्शी रंग के साथ टेक्स्ट को फिर से खींचना होगा। फिर आप टेक्स्ट को नई स्थिति में खींच सकते हैं।
आशा है कि इसे किसी के प्रोजेक्ट का विज्ञापन करने की अनुमति है।
http://ocanvas.org/ पर एक नज़र डालें, आप वहां प्रेरणा प्राप्त कर सकते हैं। यह कैनवास पुस्तकालय की तरह वस्तु है। आपको ईवेंट को संभालने, एनिमेशन बनाने आदि की अनुमति देता है
मैंने कभी कोशिश नहीं की है, लेकिन मुझे लगता है कि यह करने का यह तरीका होगा।
var canvas = document.getElementById("canvas"); //get the canvas dom object
var ctx = canvas.getContext("2d"); //get the context
var c = { //create an object to draw
x:0, //x value
y:0, //y value
r:5; //radius
}
var redraw = function(){ // this function redraws the c object every frame (FPS)
ctx.clearRect(0, 0, canvas.width, canvas.height); // clear the canvas
ctx.beginPath(); //start the path
ctx.arc(c.x, c.y, c.r, 0, Math.PI*2); //draw the circle
ctx.closePath(); //close the circle path
ctx.fill(); //fill the circle
requestAnimationFrame(redraw);//schedule this function to be run on the next frame
}
function move(){ // this function modifies the object
var decimal = Math.random() // this returns a float between 0.0 and 1.0
c.x = decimal * canvas.width; // mulitple the random decimal by the canvas width and height to get a random pixel in the canvas;
c.y = decimal * canvas.height;
}
redraw(); //start the animation
setInterval(move, 1000); // run the move function every second (1000 milliseconds)
यहां इसके लिए एक पहेली है। http://jsfiddle.net/r4JPG/2/
यदि आप आसानी और अनुवाद करना चाहते हैं, तो move विधि के अनुसार विधि बदलें।
यह आपके कैनवास
<html>
<head>
</head>
<body>
<canvas id="canvas" style="background:rgba(34,45,23,0.4)"></canvas>
<script>
var can = document.getElementById('canvas');
can.height = 1000; can.width = 1300;
var ctx = can.getContext('2d');
var x = 10, y = 100;
ctx.fillStyle = "black";
ctx.fillRect(700, 100, 100, 100);
function draw() {
ctx.beginPath();
ctx.arc(x, y, 20, 0, 2 * Math.PI);
ctx.fillStyle = 'rgba(250,0,0,0.4)';
ctx.fill();
x += 2;
ctx.fillStyle = "rgba(34,45,23,0.4)";
ctx.fillRect(0, 0, can.width, can.height);
requestAnimationFrame(draw);
//ctx.clearRect(0,0,can.width,can.height);
}
draw();
</script>
</body>
</html>
देखें उदाहरण here के ऊपर एक छोटे वृत्त पर आ जाएगा!
उपरोक्त का JSFiddle यहां कोई और चाहता है: http://jsfiddle.net/4fWt5/ –
<html>
<head>
<title>Canvas Exam</title>
</head>
<body>
<canvas id="my_canvas" height="500" width="500" style="border:1px solid black">
</canvas>
<script>
var dom=document.getElementById("my_canvas");
var ctx=dom.getContext("2d");
var x1=setInterval(handler,1);
var x=50;
var y=50;
r=40;
function handler()
{
ctx.clearRect(0,0,500,500);
r1=(Math.PI/180)*0;
r2=(Math.PI/180)*360;
ctx.beginPath();
//x=x*Math.random();
x=x+2;
r=r+10*Math.random();
ctx.arc(x,y,r,r1,r2);
ctx.closePath();
ctx.fillStyle="blue";
ctx.fill();
ctx.stroke();
if(x>400)
{
x=50;
y=y+10;
}
r=40;
}
</script>
</body>
</html>
@ किशन ऐसा नहीं है कि आपको कभी भी +1 देना चाहिए? क्या आपने कभी इतना अच्छा जवाब देने के लिए +1 नहीं दिया है? हा। एआईजीएफ – DutGRIFF
तो क्या कैनवास के पास "ऑब्जेक्ट्स" की कोई आंतरिक वेक्टर स्थिति नहीं है? यह सिर्फ पिक्सल का "ब्लॉब" है? –
यह सही है। यह सिर्फ एक बिटमैप है जिसके बारे में कोई जानकारी नहीं है कि इसे कुछ भी कैसे खींचा जा सकता है, जब तक कि आप इसे स्वयं रिकॉर्ड न करें। –