bezier.心跳(圆形)
1、
2、
<!--内联 XHTML--> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" > <!-- function Bezier(_canvasId, _x1,_y1, _x2,_y2, _x3,_y3, _x4,_y4) { var c = document.getElementById(_canvasId); var ctx = c.getContext("2d"); ctx.beginPath(); ctx.moveTo(_x1,_y1); ctx.bezierCurveTo(_x2,_y2, _x3,_y3, _x4,_y4); ctx.stroke(); } window.onload = function() { // 也是按照 原始的 canvas的坐标系来绘制的 //Bezier("curve01", 0,0, 100,0, 100,200, 200,200); //Bezier("curve02", 0,0, 0,100, 200,100, 200,200); // 转换了一下，坐标系 Bezier("curve01", 0,200, 100,200, 100,0, 200,0); Bezier("curve02", 0,200, 0,100, 200,100, 200,0); // ZC: 只要确定了，开始点 + 控制点1 + 控制点2 + 结束点，做出啦IDE图形就是确定的了，坐标系什么的应该没有什么关系。 // ZC: 做出来的图形，可以通过在线的绘制贝兹曲线的网站检查一下其正确性("http://cubic-bezier.com/"、"http://yisibl.github.io/cubic-bezier/") }; --> </script> <style type="text/css"> <!-- --> </style> </head> <body> <!-- 心跳的圆形，来自于网页："SVG之Animation - 前端学习笔记 - SegmentFault.html"(https://segmentfault.com/a/1190000009371194) --> <svg width="800" height="350" viewBox="0 0 800 350" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <!-- visibility="hidden" --> <!--原始的心跳的样子--> <circle cx="175" cy="75" r="20" fill="red" > <animate attributeName="r" attributeType="XML" values="20;50;20" keyTimes="0;.15;1" calcMode="spline" keySplines=".5 0 .5 1;.5 0 .5 1" begin="0" dur="1" repeatCount="indefinite" fill="freeze"> </animate> </circle> <!-- keySplines=".5 0 .5 1;.5 0 .5 1" keySplines="0 .5 1 .5; 0 .5 1 .5" --> <circle cx="280" cy="75" r="20" fill="red"> <animate attributeName="r" attributeType="XML" values="20;50;20" keyTimes="0;.5;1" calcMode="spline" keySplines=".5 0 .5 1;.5 0 .5 1" begin="0" dur="4" repeatCount="indefinite" fill="freeze"> </animate> </circle> <circle cx="385" cy="75" r="20" fill="red" > <animate attributeName="r" attributeType="XML" values="20;50;20" keyTimes="0;.5;1" calcMode="spline" keySplines="0 .5 1 .5; 0 .5 1 .5" begin="0" dur="4" repeatCount="indefinite" fill="freeze"> </animate> </circle> <rect x="50" y="150" width="30" height="30"> <animate attributeName="x" attributeType="XML" values="50;350;50" keyTimes="0;.15;1" calcMode="spline" keySplines=".5 0 .5 1;.5 0 .5 1" begin="0" dur="1" repeatCount="indefinite" fill="freeze"> </animate> </rect> <rect x="50" y="200" width="30" height="30"> <animate attributeName="x" attributeType="XML" values="50;350;650" keyTimes="0;.5;1" calcMode="spline" keySplines=".5 0 .5 1;.5 0 .5 1" begin="0" dur="4" repeatCount="indefinite" fill="freeze"> </animate> </rect> <rect x="50" y="240" width="300" height="30" fill="red" /><rect x="350" y="240" width="300" height="30" fill="blue" /> <rect x="50" y="280" width="30" height="30"> <animate attributeName="x" attributeType="XML" values="50;350;650" keyTimes="0;.5;1" calcMode="spline" keySplines="0 .5 1 .5; 0 .5 1 .5" begin="0" dur="4" repeatCount="indefinite" fill="freeze"> </animate> </rect> </svg> <div> <div style="border:5px solid red; display:block; float:left;"> <canvas id="curve01" width="200" height="200" ></canvas> </div> <div style="display:block; float:left;"> </div> <div style="border:5px solid blue; display:block; float:left;"> <canvas id="curve02" width="200" height="200" ></canvas> </div> </div> </body> </html>
3、
4、
5、
