Svg код исчезает в canvas
128
02 октября 2019, 05:10
Можете запустить и посмотреть,и увидите что часть кода когда заходит на canvas просто исчезает а должна отображаться можно это как нибудь сделать? Исходный кода был таким.https://codepen.io/petebarr/pen/edqwOP .Нужно чтобы svg код отображался на canvas
var cvs=document.getElementById("canvas"); // подлкючаем канвас
var ctx = cvs.getContext("2d"); // говорим то что наша игра 2д
TweenMax.set('svg', {
visibility: 'visible'
});
var kinkedCurve = "M 316,80 s 0,95, 0,100 0,100 0,100"; // when pulling back -> 95 giving it sharp kink
var straightCurve = "M 316,80 s 0,55, 0,100 0,100 0,100"; // rest position when released without kink -> 55
var snapTime = 2;// появление новой стрелы
var drawTime = 2;// натяжение
var snapAmp = 2;// растяжение
var snapPer = 4;// сам выстрел
var drawEase = Power2.easeOut;
var snapEase = Elastic.easeOut.config(snapAmp, snapPer);
tl = new TimelineMax( { repeat: -1, repeatDelay: 0 } );
tl.set('.arrow', { x: -62, y: 2, scale: 0.8 })
.set('.bow-frame', { x: 1, y: 1 })
.from('.string', drawTime, {attr:{d:kinkedCurve}, ease: drawEase})
.to('.bow', drawTime, { scaleX: 1.1, scaleY: 0.95, ease: drawEase, transformOrigin: "30px center" }, "-="+drawTime)
.to('.arrow', drawTime, { x: -5, ease: drawEase }, "-="+drawTime)
.to('.string', snapTime, {attr:{d:straightCurve}, ease: snapEase })
.to('.bow', snapTime, { scaleX: 1, scaleY: 1, ease: snapEase }, "-="+snapTime)
.to('.arrow', 0.085, { x: -400, ease: Linear.easeNone }, "-="+snapTime)
.fromTo('.arrow', 0.45, { x: 400 }, { x: -62, ease: Elastic.easeOut.config(1.5, 1.5), immediateRender: false }, "-=0.35")
tl.timeScale(1)
/* ==========================================================================
SLIDER
========================================================================== */
var $slider = $('#slider'),
sliderValue = { value: 0 };
$slider.slider({
range: false,
min: 0,
max: 100,
step: .1,
start: function() {
tl.pause();
},
slide: function(event, ui) {
tl.progress(ui.value / 100);
},
stop: function() {
tl.play();
}
});
tl.eventCallback("onUpdate", function() {
sliderValue.value = tl.progress() * 100;
$slider.slider(sliderValue);
});
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<canvas id="canvas" width="100" height="67"></canvas> <!-- полотно где отображается код -->
<!-- <div id="slider"></div> -->
<div class="container">
<svg class="svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 200 600 400">
<g class="bow-arrow">
<g class="bow">
<path class="string" d="M 316,80 s 50,98, 50,100 -50,100 -50,100" fill="none" stroke="#2c3944" stroke-miterlimit="10"/>
<g class="bow-frame">
<path d="M283.53 122.07c4-3.33 3.9-8.35 11.6-13.77 5.92-4.16 12.8-12.9 14.29-17.17l-2.92-1.77.14-.26a86.22 86.22 0 0 1-16.92 20.74c-4.43 3.83-6.41 8.13-7.81 10-4.45 5.87-18.81 12.35-9.32 41.65 0 0 .82-.94 3.86-.9.04-1.59-9.88-24.51 7.08-38.52z" fill="#ffce54" />
<path d="M295.12 108.31c-7.7 5.41-7.57 10.44-11.6 13.77-17 14-7 36.91-7.08 38.5l1.12.06h.41c-.26-1-3.35-13.06-3-20 .29-5.67 4.79-12.89 6.19-14.61s3.73-3 7.28-9.26c3.79-6.64 12.51-8.94 21.87-25.05l-1-.58c-1.38 4.27-8.31 13-14.19 17.17z" fill="#fca12c" />
<path d="M309.67 266.4a63.51 63.51 0 0 0-9.12-12.33 65.69 65.69 0 0 1 9.09 12.35zm-32.53-65.9c-.1.39-.52 2.16-1 4.5.36-1.7.71-3.26 1-4.5z" fill="#ffce54" />
<path d="M293.93 248.71c-7.28-6-6.78-9.24-10.81-12.57-14-11.56-9.68-29.19-7.77-35.88-3-.64-3.23-2.18-3.25-2.42-8.92 28.29 5.07 34.77 9.43 40.59 1.39 1.86 3.34 6.16 7.75 10a85.27 85.27 0 0 1 16.26 19.93l3.34-1.6c-1.72-4.38-9.43-13.53-14.95-18.05z" fill="#ffce54" />
<path d="M283.57 235c-1.13-1.24-2-2-2.7-2.82a27.56 27.56 0 0 1-2.12-3.26 24.8 24.8 0 0 0 2.06 3.23c.69.85 1.6 1.62 2.76 2.85zm-8.82-17.72v.07a36.31 36.31 0 0 1 .25-5.08 33.24 33.24 0 0 0-.25 5.01z" fill="#ffce54" />
<path d="M278.75 229c-1.75-3.14-3.8-7.78-4-11.61v.23c.19 3.75 2.25 8.25 4 11.38zm-2.59-24c-.45 2.29-.89 4.84-1.16 7.27.29-2.5.74-5.13 1.16-7.27zm24.39 49.07c-5.46-5.78-10-8.26-12.46-12.63a35 35 0 0 0-4.31-6.16 34.8 34.8 0 0 1 4.32 6.24c2.45 4.34 7 6.85 12.45 12.55z" fill="#ffca47" />
<path d="M275.35 200.26c-1.91 6.69-6.23 24.31 7.77 35.88 4 3.33 3.54 6.6 10.81 12.57 5.52 4.52 13.23 13.68 15 18.07l.75-.36a65.69 65.69 0 0 0-9.09-12.35c-5.44-5.7-10-8.21-12.44-12.55a34.8 34.8 0 0 0-4.32-6.24l-.12-.13-.1-.11c-1.16-1.27-2.07-2-2.76-2.86a24.8 24.8 0 0 1-2.06-3.23c-1.76-3.08-3.82-7.58-4-11.38v-.3a33.24 33.24 0 0 1 .25-5c.27-2.43.7-5 1.16-7.27s.87-4.11 1-4.5c-.75-.05-1.96.27-1.85-.24z" fill="#fca12c" />
<path d="M314.71 79.17a32.88 32.88 0 0 1 1.86-3.95 3 3 0 0 0 .32-.88c-1-.76-2.31-.47-4 3l-.08.16a2.6 2.6 0 0 0 1.9 1.67zm-5.3 11.97l1 .58-1-.58c2.4-3.45 3.56-7.53 5.1-11.45a2.68 2.68 0 0 1-2-1.61c-1.17 2.38-2.67 5.27-5.89 11l-.14.26zm5.09 189.08a3.2 3.2 0 0 0-1.79 1.84c2.26 4.6 3.87 3.76 5 2.18l-.22.29a31.1 31.1 0 0 1-2.99-4.31zm-.28-.5a90.14 90.14 0 0 1-5.47-12.85l.93-.45-.75.36-3.34 1.6h-.07c.7 1.1 1.32 2.12 1.89 3.07a80.61 80.61 0 0 1 4.28 8.28c.29.63.55 1.21.8 1.75a3.33 3.33 0 0 1 1.73-1.76z" fill="#394856" />
<path d="M317 281.32a14.19 14.19 0 0 1-1-1.22h.23l-.1-.53h-.39a5.69 5.69 0 0 1-.18-1.31 4.28 4.28 0 0 0-.2-.87 103.42 103.42 0 0 0-5.51-11.07l-.17.08-.93.45a90.14 90.14 0 0 0 5.47 12.85 3.33 3.33 0 0 0-1.78 1.8c-.06.12-.13.23-.19.37l.35.38.11-.2a3.2 3.2 0 0 1 1.79-1.84 31.1 31.1 0 0 0 3 4.31l.22-.29c.7-1 .01-2.02-.72-2.91z" fill="#2c3944" />
<path d="M275.35 200.25c1.79-8.29 1.74-2.65 2.68-19.71s-.47-11.65-1.58-20c-3 0-3.86.9-3.86.9a2.05 2.05 0 0 1-.26.84c-.49.93-1.48 1.65-1.5 2.89 0 2 .59 2 .56 4.06s-.64 2-.67 4 .59 2 .56 4.05-.65 2-.67 4 .59 2 .56 4.06-.65 2-.67 4 .59 2 .56 4.06c0 1.19.84 2.47 1.07 3.46v.83c-.01.38.24 1.92 3.22 2.56z" fill="#394856" />
<path d="M276.49 160.57c1.1 8.32 2.52 2.84 1.58 20s-.89 11.42-2.68 19.71c-.11.51 1.11.19 1.79.24h.12s0-2 2-4.74a6.87 6.87 0 0 0 .89-2.92v-.09c.06-.42.1-.88.14-1.36.5-5.15 2-22.51-.38-25.93-2-2.83-1.86-4.79-1.86-4.79h-.41zm38.02-80.89c-1.53 3.92-2.7 8-5.1 11.45l1 .58.69-1.21.42-.75.6-1.12.41-.79.67-1.32.27-.55q.43-.88.86-1.8l.21-.46c.31-.67.62-1.35.92-2.05a4.11 4.11 0 0 0 .2-.82 5.69 5.69 0 0 1 .16-1.21l.33-.05.09-.51h-.17c.66-1 2.66-2.47 1.65-3.91a4.78 4.78 0 0 0-.37-.47 3.1 3.1 0 0 0-.41-.38 3 3 0 0 1-.32.88 32.88 32.88 0 0 0-1.86 3.95 2.6 2.6 0 0 1-1.92-1.62l-.08-.14-.34.39.16.28a2.68 2.68 0 0 0 1.93 1.63z" fill="#2c3944" />
</g>
</g>
<g class="arrow">
<path d="M402.4 178.65c-.79-1.83-3.5-6.52-10.51-6.54 7.01.02 9.72 4.7 10.51 6.54zm-20.99 0c-1.81-1.31-3.55-2.72-5.25-4.17-2.09.51-4 1.07-5.66 1.61 1 .86 2 1.71 3 2.56zm8.78 0h7.64c-2.24-2-4.52-3.94-6.9-5.73l-1-.74a66.42 66.42 0 0 0-7.07.89c1.29 1 2.62 1.88 3.93 2.87 1.15.87 2.28 1.78 3.4 2.71zm-24.19-.13a.48.48 0 0 1 .08-.23.48.48 0 0 0-.08.23zm7.58 2.24c-1 .86-2.06 1.72-3.09 2.59 1.62.55 3.57 1.1 5.66 1.61 1.72-1.46 3.47-2.88 5.3-4.2zm24.29 0h-7.63c-1.13.94-2.28 1.86-3.45 2.74s-2.64 1.91-3.94 2.87a66.45 66.45 0 0 0 7.07.89l1-.74c2.41-1.79 4.69-3.77 6.95-5.76z" fill="#ffce54" />
<path d="M366.06 180.76a.23.23 0 0 0-.08.15.24.24 0 0 1 .08-.15z" fill="#ffca47" />
<path d="M366.07 180.76a.24.24 0 0 0-.08.15.48.48 0 0 0 .08.23l.05.07a1.3 1.3 0 0 0 .16.18l.09.08.28.21.09.06.49.28h.05l.56.27.14.06.62.26h.11l1 .36.32.11.53.19c1-.87 2.05-1.73 3.09-2.59zm24.16 0h-8.78c-1.83 1.32-3.58 2.74-5.3 4.2 1.05.26 2.14.51 3.25.74 1.11.23 2.24.45 3.35.65 1.29-1 2.62-1.88 3.94-2.87s2.41-1.78 3.54-2.72zm.7 5.76l-1 .74h2c7.05 0 9.75-4.76 10.53-6.57h-4.55c-2.3 2.06-4.58 4.04-6.98 5.83z" fill="#fca12c" />
<path d="M366 178.52a.2.2 0 0 0 0 .12.24.24 0 0 1 0-.12z" fill="#ffca47" />
<path d="M373.54 178.65c-1-.85-2-1.7-3-2.56l-.3.1-.26.09-1 .35-.2.08-.87.37-.63.31-.51.3h-.05l-.31.23-.08.07a1.29 1.29 0 0 0-.16.19v.07a.48.48 0 0 0-.08.23.24.24 0 0 0 .07.12zm16.65 0c-1.12-.93-2.25-1.84-3.41-2.71-1.31-1-2.64-1.91-3.93-2.87h-.12c-1 .18-2.07.38-3.1.6l-.37.08c-1 .22-2 .44-3 .68h-.11c1.7 1.45 3.44 2.86 5.25 4.17zm7.64 0h4.57c-.79-1.83-3.5-6.52-10.51-6.54h-1.97l1 .74c2.39 1.85 4.67 3.81 6.91 5.8z" fill="#fca12c" />
<path d="M406.05 180.38l.08-.13a1 1 0 0 0 .12-.28H269.71v-.18c-1.57.39-2.62.4-3.27-.05a5.67 5.67 0 0 0 .13 1.09c.06.27.13.54.2.79h2.94v-.88h135.9a1.92 1.92 0 0 0 .37-.29z" fill="#2c3944" />
<path d="M266.44 179.75c.64.45 1.7.44 3.27.05v.2h136.55a1 1 0 0 0 0-.28 1.26 1.26 0 0 0-.66-1.06H269.71v-.88h-2.92a7.13 7.13 0 0 0-.35 1.93v.04z" fill="#394856" />
<path d="M267.15 183c-.07-.35-.23-.82-.39-1.36.16.54.32 1.01.39 1.36z" fill="#cbcbcb" />
<path d="M266.76 181.64c-.07-.25-.14-.52-.2-.79.06.27.13.53.2.79z" fill="#2c3944" />
<path d="M266.76 181.64c-.07-.25-.14-.52-.2-.79.06.27.13.53.2.79z" fill="#cbcbcb" />
<path d="M266.57 180.84a10.55 10.55 0 0 1-1.92 0 14.88 14.88 0 0 0 .37 1.75c.4.19.82.41 1.27.66l.3.15h.08l.15.06h.25a.37.37 0 0 0 .05-.27 1.84 1.84 0 0 0 0-.19c-.07-.35-.24-.82-.39-1.36-.04-.26-.11-.52-.16-.8z" fill="#a2a2a2" />
<path d="M266.1 187c.68-.12-.26-1.81-1-3.95.69 2.17 1.51 3.78 1 3.95zm-17.1-7.28c0 1.05 5 1.05 15.82 6.86-10.66-6.11-15.82-5.81-15.82-6.86z" fill="#cbcbcb" />
<path d="M264.53 179.7a10.63 10.63 0 0 0 .12 1.18 10.55 10.55 0 0 0 1.92 0 5.67 5.67 0 0 1-.13-1.09v-.05a7.13 7.13 0 0 1 .35-1.93c.43-1.43.93-2.44-.5-1.67-.44.23-.84.43-1.22.61 1-3 2.58-5.34-.25-3.88-10.62 5.48-15.71 5.82-15.81 6.86-.01-.01 15.52-.03 15.52-.03z" fill="#cbcbcb" />
<path d="M265.15 183.08l-.12-.44zm.95 3.92a2.49 2.49 0 0 1-1.28-.44c.69.44 1.08.54 1.28.44zm-17.1-7.31z" fill="#cbcbcb" />
<path d="M264.62 180.89a12.36 12.36 0 0 0 .39 1.74 14.88 14.88 0 0 1-.37-1.75z" fill="#cbcbcb" />
<path d="M264.62 180.89a12.36 12.36 0 0 0 .39 1.74 14.88 14.88 0 0 1-.37-1.75z" fill="#cbcbcb" />
<path d="M264.62 180.89a12.36 12.36 0 0 0 .39 1.74 14.88 14.88 0 0 1-.37-1.75z" fill="#cbcbcb" />
<path d="M264.62 180.89a10.63 10.63 0 0 1-.12-1.18h-15.52c0 1.05 5.16.75 15.82 6.86a2.49 2.49 0 0 0 1.28.44c.52-.2-.31-1.8-1-3.95l-.14-.45a12.36 12.36 0 0 1-.32-1.72z" fill="#a2a2a2" />
<path d="M406.31 179.7a1 1 0 0 1 0 .28 1 1 0 0 1-.12.28l.06-.09h6.42a2.38 2.38 0 0 0 2.16-1.24 1.16 1.16 0 0 1 .17.35c-.15-.5-.58-.87-1.47-.87h-8.09c-.21 0 0 .06.27.24a1.26 1.26 0 0 1 .6 1.05z" fill="#ffce54" />
<path d="M405.61 180.76l-.3.17.31-.17z" fill="#ffca47" />
<path d="M406 180.46a1.92 1.92 0 0 1-.37.29 1.93 1.93 0 0 0 .37-.29z" fill="#2c3944" />
<path d="M406 180.46a1.92 1.92 0 0 1-.37.29 1.93 1.93 0 0 0 .37-.29z" fill="#ffca47" />
<path d="M414.95 179.31a1.16 1.16 0 0 0-.17-.35 2.38 2.38 0 0 1-2.16 1.24h-6.42l-.06.09-.08.13-.08.08a1.93 1.93 0 0 1-.36.29l-.31.17h8.2c1.13 0 1.54-.58 1.54-1.29a1.49 1.49 0 0 0-.1-.36z" fill="#fca12c" />
</g>
</g>
</svg>
</div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
<path fill="#fff" d="M39.19 15.39a10.63 10.63 0 0 1-3.38 1.29 5.31 5.31 0 0 0-9.19 3.63 5.43 5.43 0 0 0 .14 1.22A15.11 15.11 0 0 1 15.8 16a5.39 5.39 0 0 0-.72 2.68 5.32 5.32 0 0 0 2.37 4.42 5.33 5.33 0 0 1-2.45-.7v.07a5.31 5.31 0 0 0 4.27 5.21 5.45 5.45 0 0 1-1.41.19 4.78 4.78 0 0 1-1-.1 5.32 5.32 0 0 0 5 3.69 10.64 10.64 0 0 1-6.6 2.28c-.43 0-.85 0-1.27-.07a15.13 15.13 0 0 0 23.28-12.74v-.69a10.87 10.87 0 0 0 2.66-2.75 10.84 10.84 0 0 1-3.06.84 5.35 5.35 0 0 0 2.34-2.94"></path>
</svg>
</a>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
-
14:06
-
21:33
Виртуальный выделенный сервер (VDS) становится отличным выбором
-
22:26
-
22:40
-
08:34
-
15:01
-
17:01
-
11:24
-
10:16
ТОП-10
-
Почему SERVER_ADDR имеет не тот IP 47695 visits
-
Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30544 visits
-
Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23721 visits
-
Как через css изменить цвет png изображения? 10373 visits
-
Blob video url download 9980 visits
-
Php curl запрос через прокси с авторизацией 9239 visits
-
Работа с captcha vk api 8116 visits
![Как не отправлять по форме пустые данные? [закрыт]](https://hostciti.net/images/nophoto.png "Как не отправлять по форме пустые данные? [закрыт]")
© "hostciti.net" 22.1.2025 | 19:01