आप सभी डेटा एक जावास्क्रिप्ट वस्तु में एक पथ आकर्षित करने के लिए की जरूरत को क्रमानुसार कर सकते हैं
javascript ऑब्जेक्ट का उपयोग करने का लाभ यह है कि आप आगे JSON करने के लिए वस्तु को क्रमानुसार सकते हैं यदि आप स्थानांतरित करने की आवश्यकता है आपके पथ एक अलग स्थान पर (जैसे सर्वर पर वापस)।
var path1={
lineWidth:1,
stroke:"blue",
points:[{x:10,y:10},{x:100,y:50},{x:30,y:200}]
};
तो फिर तुम उस वस्तु का उपयोग कर सकते आकर्षित करने के लिए/उस पथ
function draw(path){
// beginPath
ctx.beginPath();
// move to the beginning point of this path
ctx.moveTo(path.points[0].x,path.points[0].y);
// draw lines to each point on the path
for(pt=1;pt<path.points.length;pt++){
var point=path.points[pt];
ctx.lineTo(point.x,point.y);
}
// set the path styles (color & linewidth)
ctx.strokeStyle=path.stroke;
ctx.lineWidth=path.lineWidth;
// stroke this path
ctx.stroke();
}
रास्तों में से रंग बदलने के लिए पुनः बनाने, तुम बस वस्तु के स्ट्रोक संपत्ति बदल सकते हैं और आकर्षित कॉल करनी होगी() फिर से: http://jsfiddle.net/m1erickson/McZrH/
<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<style>
body{ background-color: ivory; }
#canvas{border:1px solid red;}
</style>
<script>
$(function(){
// get references to canvas and context
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
// serialize paths to a javascript objects
var path1={lineWidth:1, stroke:"blue", points:[]};
var path2={lineWidth:4, stroke:"red", points:[]};
// save the paths to an array
var paths=[];
paths.push(path1);
paths.push(path2);
// build test path1
newPoint(25,25,path1);
newPoint(100,50,path1);
newPoint(50,75,path1);
newPoint(25,25,path1);
// build test path2
newPoint(200,100,path2);
newPoint(250,100,path2);
newPoint(250,200,path2);
newPoint(200,200,path2);
newPoint(200,100,path2);
// draw the paths defined in the paths array
draw();
// add a new point to a path
function newPoint(x,y,path){
path.points.push({x:x,y:y});
}
function draw(){
ctx.clearRect(0,0,canvas.width,canvas.height);
for(p=0;p<paths.length;p++){
// get a path definition
var path=paths[p];
// beginPath
ctx.beginPath();
// move to the beginning point of this path
ctx.moveTo(path.points[0].x,path.points[0].y);
// draw lines to each point on the path
for(pt=1;pt<path.points.length;pt++){
var point=path.points[pt];
ctx.lineTo(point.x,point.y);
}
// set the path styles (color & linewidth)
ctx.strokeStyle=path.stroke;
ctx.lineWidth=path.lineWidth;
// stroke this path
ctx.stroke();
}
}
// test
// change the stroke color on each path
$("#recolor").click(function(){
paths[0].stroke="orange";
paths[1].stroke="green";
draw();
});
}); // end $(function(){});
</script>
</head>
<body>
<button id="recolor">Recolor</button><br>
<canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
012:
paths[0].stroke="orange";
paths[1].stroke="green";
draw();
यहाँ कोड है और एक फिडल है
हो सकता है कि एक समारोह में उन कार्यों को बचाने के? तो आपके पास कार्यों की एक सरणी होगी। – Cristy
जब भी आपको इस तरह की कार्यक्षमता की आवश्यकता होती है, तो एसवीजी का उपयोग करने पर विचार करें। – slebetman