5
एनिमेट करें मैं निम्नलिखित कोड को कैसे संशोधित कर सकता हूं ताकि खींची गई रेखा को धराशायी कर दिया जा सके, आप इसे प्रदान किए गए jfiddle में कार्रवाई में देख सकते हैं।प्रगतिशील ड्रैड लाइन एचटीएमएल 5 कैनवास और Jquery
<html>
<style>
#canvas
{
border-style:solid;
border-width:1px;
}
</style>
<div id="canvas">
<p>Hover over me</p>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</html>
$(function() {
animateLine = function(canvas, hoverDivName, colorNumber, pathString) {
$('#' + hoverDivName).hover(
function() {
var line = canvas.path(pathString).attr({
stroke: colorNumber
});
var length = line.getTotalLength();
$('path[fill*="none"]').animate({
'to': 1
}, {
duration: 5000,
step: function(pos, fx) {
var offset = length * fx.pos;
var subpath = line.getSubpath(0, offset);
canvas.clear();
canvas.path(subpath).attr({
stroke: colorNumber
});
},
});
}, function() {
$('path[fill*="none"]').stop(true, false).fadeOut();
});
};
var canvas = Raphael('canvas', 200, 200);
var pathString = "M10 10L10 200L100 200Z";
animateLine(canvas, "canvas", "#000", pathString);
});
[कैनवास के लिए whatwg विनिर्देश] (http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#line-styles) एक सेटलाइनडिश विधि का उल्लेख करता है जिसे माना जाता है ऐसा करने के लिए, लेकिन मैंने कोशिश की कोई ब्राउज़र उस का समर्थन नहीं करता है। – Philipp
देखें [यह] (http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas) कैनवास में धराशायी या बिंदीदार रेखा को बनाने के तरीके पर उत्तर दें। – Zemljoradnik