5
làm cách nào tôi có thể sửa đổi mã sau để dòng được vẽ nét đứt, bạn có thể thấy nó hoạt động trong jfiddle được cung cấp.Làm sống động dòng gạch đứt nét HTML5 Canvas & 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);
});
[đặc tả whatwg cho canvas] (http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html#line-styles) đề cập đến phương thức setLineDash được cho là để làm điều đó, nhưng không có trình duyệt nào tôi đã thử hỗ trợ điều đó. – Philipp
Xem [this] (http://stackoverflow.com/questions/4576724/dotted-stroke-in-canvas) câu trả lời về cách tạo đường nét đứt nét hoặc chấm chấm trong canvas. – Zemljoradnik