如何在 HTML 画布中添加淡出效果
[英]How to add a Fade out effect in an HTML canvas
问题描述
我正在尝试向 HTML Canvas 中的拱形添加淡出效果（在绘制后半秒后发生）。
我可以画一个圆圈。
这是我绘制拱门的代码。
ctx.beginPath();
ctx.fillStyle = "#000000";
ctx.arc(Xcoord, Ycoord, 50, 0, 2 * Math.PI, false);
ctx.fill();
ctx.lineWidth = "4";
ctx.strokeStyle = "#000000";
ctx.stroke();
ctx.closePath();
有没有办法可以扩展它以添加在绘制后 0.5 秒开始的淡出效果。
3 个解决方案
解决方案1
0 2019-12-30 10:11:15
我的解决方案是基于纯JavaScript 的。
- 设置一个间隔。
- 如果没有，设置不透明度。
- 将不透明度降低到 0。
- 不透明度达到 0 后的清除间隔。
var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); ctx.fillStyle = "#FF0000"; ctx.fillRect(0,0,200,100); setTimeout(function(){ var fadeTarget = document.getElementById("myCanvas"); var fadeEffect = setInterval(function () { if (!fadeTarget.style.opacity) { fadeTarget.style.opacity = 1; } if (fadeTarget.style.opacity > 0) { fadeTarget.style.opacity -= 0.02; } else { clearInterval(fadeEffect); } }, 20); },0.5);
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;"> Your browser does not support the canvas element. </canvas>
解决方案2
0 2019-12-31 05:17:16
将鼠标悬停在 SVG 文件上：
body { text-align: center; } #donut-icing { fill: #FA9CB6; transition: fill 3s ease-out; } #donut:hover { cursor: pointer; } #donut:hover #donut-icing { fill: #4a8af4; }
<html> <head> <title>SVG Donut Animated on Hover with CSS / Sass</title> </head> <body> <svg id="donut" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="204" height="203" viewBox="0 0 204 203"> <defs> <linearGradient id="donut-a" x1="50%" x2="50%" y1="59.542%" y2="98.874%"> <stop offset="0%" stop-color="#F8F5EA"/> <stop offset="100%" stop-color="#E1D6B6"/> </linearGradient> <path id="donut-icing" fill="#FA9CB6" d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 M0,100 L0,156.203125 C0,159.048145 2.12004279,161.359375 4.63917526,161.359375 C7.35102845,161.359375 9.47049623,159.052855 9.27835052,156.203125 L9.27835052,148.46875 C9.4934916,145.61902 11.6018043,143.3125 14.4329897,143.3125 C16.8052584,143.3125 18.9141431,145.62373 19.0721649,148.46875 L19.0721649,156.203125 L19.0721649,168.0625 C18.9141431,170.90752 21.0230278,173.21875 23.7113402,173.21875 C26.2264819,173.21875 28.3347946,170.91223 28.3505155,168.0625 L28.3505155,161.359375 L28.3505155,154.140625 C28.3347946,151.291053 30.4431073,148.984375 32.9896907,148.984375 C35.6465615,148.984375 37.7554461,151.295764 37.628866,154.140625 L37.628866,193.84375 C37.7554461,196.68877 39.8643308,199 42.2680412,199 C45.067785,199 47.1760977,196.69348 47.4226804,193.84375 L47.4226804,131.453125 C47.1760977,128.603395 49.2844103,126.296875 52.0618557,126.296875 C54.4878645,126.296875 56.5967492,128.608105 56.7010309,131.453125 L56.7010309,176.3125 C56.5967492,179.15752 58.7056338,181.46875 61.3402062,181.46875 C63.909088,181.46875 66.0174007,179.16223 65.9793814,176.3125 L65.9793814,141.765625 C66.0174007,138.916053 68.1257134,136.609375 70.6185567,136.609375 C73.3291675,136.609375 75.4380522,138.920764 75.257732,141.765625 L75.257732,160.84375 C75.4380522,163.688611 77.5469369,166 79.8969072,166 C82.750391,166 84.8587037,163.693322 85.0515464,160.84375 L85.0515464,153.625 C84.8587037,150.775428 86.9670164,148.46875 89.6907216,148.46875 C92.1704706,148.46875 94.2793552,150.780139 94.3298969,153.625 L94.8453608,187.140625 C94.8027248,189.985486 97.14593,192.296875 100,192.296875 C102.927546,192.296875 105.270115,189.990197 105.154639,187.140625 L104.639175,149.5 C104.746746,145.61902 106.855058,143.3125 109.278351,143.3125 C112.058513,143.3125 114.167397,145.62373 113.917526,148.46875 L113.917526,168.0625 C114.167397,170.90752 116.276282,173.21875 119.072165,173.21875 C121.479736,173.21875 123.588049,170.91223 123.71134,168.0625 L123.71134,161.359375 L123.71134,154.140625 C123.588049,151.291053 125.696362,148.984375 128.350515,148.984375 C130.899816,148.984375 133.0087,151.295764 132.989691,154.140625 L132.989691,193.84375 C133.0087,196.68877 135.117585,199 137.628866,199 C140.321039,199 142.429352,196.69348 142.268041,193.84375 L142.268041,138.671875 L142.268041,131.453125 C142.429352,128.603395 144.537665,126.296875 146.907216,126.296875 C149.741119,126.296875 151.850003,128.608105 152.061856,131.453125 L152.061856,139.1875 L152.061856,171.15625 C151.850003,174.00127 153.958888,176.3125 156.701031,176.3125 C159.162342,176.3125 161.270655,174.00598 161.340206,171.15625 L161.340206,144.859375 L161.340206,141.765625 C161.270655,138.916053 163.378968,136.609375 165.979381,136.609375 C168.582422,136.609375 170.691306,138.920764 170.618557,141.765625 L170.618557,144.859375 L170.618557,176.3125 C170.629257,179.157361 172.738142,181.46875 175.257732,181.46875 C177.941596,181.46875 180.049909,179.162072 179.896907,176.3125 L179.896907,153.625 C180.111958,150.775428 182.220271,148.46875 185.051546,148.46875 C187.423725,148.46875 189.532609,150.780139 189.690722,153.625 L189.690722,163.421875 C189.532609,166.266736 191.875815,168.578125 194.845361,168.578125 C197.65743,168.578125 200,166.271447 200,163.421875 L200,100"/> </defs> <g fill="none" fill-rule="evenodd" transform="translate(2 2)"> <circle cx="100" cy="100" r="100" fill="url(#donut-a)"/> <path stroke="#302434" stroke-linecap="square" stroke-width="2" d="M180,160 C180.163288,159.782085 185.314605,152.363686 187,149 L180,160 Z M48,185 C63.1555058,194.519493 80.9387639,200 99.9750338,200 C111.534055,200 122.652906,197.969392 133,194.15209"/> <mask id="donut-c" fill="#fff"> <use xlink:href="#donut-icing"/> </mask> <use fill="#FA9CB6" xlink:href="#donut-icing"/> <path d="M200,100 C200,44.771525 155.228475,0 100,0 C44.771525,0 0,44.771525 0,100 M0,100 L0,156.203125 C0,159.048145 2.12004279,161.359375 4.63917526,161.359375 C7.35102845,161.359375 9.47049623,159.052855 9.27835052,156.203125 L9.27835052,148.46875 C9.4934916,145.61902 11.6018043,143.3125 14.4329897,143.3125 C16.8052584,143.3125 18.9141431,145.62373 19.0721649,148.46875 L19.0721649,156.203125 L19.0721649,168.0625 C18.9141431,170.90752 21.0230278,173.21875 23.7113402,173.21875 C26.2264819,173.21875 28.3347946,170.91223 28.3505155,168.0625 L28.3505155,161.359375 L28.3505155,154.140625 C28.3347946,151.291053 30.4431073,148.984375 32.9896907,148.984375 C35.6465615,148.984375 37.7554461,151.295764 37.628866,154.140625 L37.628866,193.84375 C37.7554461,196.68877 39.8643308,199 42.2680412,199 C45.067785,199 47.1760977,196.69348 47.4226804,193.84375 L47.4226804,131.453125 C47.1760977,128.603395 49.2844103,126.296875 52.0618557,126.296875 C54.4878645,126.296875 56.5967492,128.608105 56.7010309,131.453125 L56.7010309,176.3125 C56.5967492,179.15752 58.7056338,181.46875 61.3402062,181.46875 C63.909088,181.46875 66.0174007,179.16223 65.9793814,176.3125 L65.9793814,141.765625 C66.0174007,138.916053 68.1257134,136.609375 70.6185567,136.609375 C73.3291675,136.609375 75.4380522,138.920764 75.257732,141.765625 L75.257732,160.84375 C75.4380522,163.688611 77.5469369,166 79.8969072,166 C82.750391,166 84.8587037,163.693322 85.0515464,160.84375 L85.0515464,153.625 C84.8587037,150.775428 86.9670164,148.46875 89.6907216,148.46875 C92.1704706,148.46875 94.2793552,150.780139 94.3298969,153.625 L94.8453608,187.140625 C94.8027248,189.985486 97.14593,192.296875 100,192.296875 C102.927546,192.296875 105.270115,189.990197 105.154639,187.140625 L104.639175,149.5 C104.746746,145.61902 106.855058,143.3125 109.278351,143.3125 C112.058513,143.3125 114.167397,145.62373 113.917526,148.46875 L113.917526,168.0625 C114.167397,170.90752 116.276282,173.21875 119.072165,173.21875 C121.479736,173.21875 123.588049,170.91223 123.71134,168.0625 L123.71134,161.359375 L123.71134,154.140625 C123.588049,151.291053 125.696362,148.984375 128.350515,148.984375 C130.899816,148.984375 133.0087,151.295764 132.989691,154.140625 L132.989691,193.84375 C133.0087,196.68877 135.117585,199 137.628866,199 C140.321039,199 142.429352,196.69348 142.268041,193.84375 L142.268041,138.671875 L142.268041,131.453125 C142.429352,128.603395 144.537665,126.296875 146.907216,126.296875 C149.741119,126.296875 151.850003,128.608105 152.061856,131.453125 L152.061856,139.1875 L152.061856,171.15625 C151.850003,174.00127 153.958888,176.3125 156.701031,176.3125 C159.162342,176.3125 161.270655,174.00598 161.340206,171.15625 L161.340206,144.859375 L161.340206,141.765625 C161.270655,138.916053 163.378968,136.609375 165.979381,136.609375 C168.582422,136.609375 170.691306,138.920764 170.618557,141.765625 L170.618557,144.859375 L170.618557,176.3125 C170.629257,179.157361 172.738142,181.46875 175.257732,181.46875 C177.941596,181.46875 180.049909,179.162072 179.896907,176.3125 L179.896907,153.625 C180.111958,150.775428 182.220271,148.46875 185.051546,148.46875 C187.423725,148.46875 189.532609,150.780139 189.690722,153.625 L189.690722,163.421875 C189.532609,166.266736 191.875815,168.578125 194.845361,168.578125 C197.65743,168.578125 200,166.271447 200,163.421875 L200,100" mask="url(#donut-c)"/> <path stroke="#302434" stroke-linecap="square" stroke-width="3" d="M200 100C200 44.771525 155.228475 0 100 0 44.771525 0 0 44.771525 0 100M0 100L0 156.203125C0 159.048145 2.12004279 161.359375 4.63917526 161.359375 7.35102845 161.359375 9.47049623 159.052855 9.27835052 156.203125L9.27835052 148.46875C9.4934916 145.61902 11.6018043 143.3125 14.4329897 143.3125 16.8052584 143.3125 18.9141431 145.62373 19.0721649 148.46875L19.0721649 156.203125 19.0721649 168.0625C18.9141431 170.90752 21.0230278 173.21875 23.7113402 173.21875 26.2264819 173.21875 28.3347946 170.91223 28.3505155 168.0625L28.3505155 161.359375 28.3505155 154.140625C28.3347946 151.291053 30.4431073 148.984375 32.9896907 148.984375 35.6465615 148.984375 37.7554461 151.295764 37.628866 154.140625L37.628866 193.84375C37.7554461 196.68877 39.8643308 199 42.2680412 199 45.067785 199 47.1760977 196.69348 47.4226804 193.84375L47.4226804 131.453125C47.1760977 128.603395 49.2844103 126.296875 52.0618557 126.296875 54.4878645 126.296875 56.5967492 128.608105 56.7010309 131.453125L56.7010309 176.3125C56.5967492 179.15752 58.7056338 181.46875 61.3402062 181.46875 63.909088 181.46875 66.0174007 179.16223 65.9793814 176.3125L65.9793814 141.765625C66.0174007 138.916053 68.1257134 136.609375 70.6185567 136.609375 73.3291675 136.609375 75.4380522 138.920764 75.257732 141.765625L75.257732 160.84375C75.4380522 163.688611 77.5469369 166 79.8969072 166 82.750391 166 84.8587037 163.693322 85.0515464 160.84375L85.0515464 153.625C84.8587037 150.775428 86.9670164 148.46875 89.6907216 148.46875 92.1704706 148.46875 94.2793552 150.780139 94.3298969 153.625L94.8453608 187.140625C94.8027248 189.985486 97.14593 192.296875 100 192.296875 102.927546 192.296875 105.270115 189.990197 105.154639 187.140625L104.639175 149.5C104.746746 145.61902 106.855058 143.3125 109.278351 143.3125 112.058513 143.3125 114.167397 145.62373 113.917526 148.46875L113.917526 168.0625C114.167397 170.90752 116.276282 173.21875 119.072165 173.21875 121.479736 173.21875 123.588049 170.91223 123.71134 168.0625L123.71134 161.359375 123.71134 154.140625C123.588049 151.291053 125.696362 148.984375 128.350515 148.984375 130.899816 148.984375 133.0087 151.295764 132.989691 154.140625L132.989691 193.84375C133.0087 196.68877 135.117585 199 137.628866 199 140.321039 199 142.429352 196.69348 142.268041 193.84375L142.268041 138.671875 142.268041 131.453125C142.429352 128.603395 144.537665 126.296875 146.907216 126.296875 149.741119 126.296875 151.850003 128.608105 152.061856 131.453125L152.061856 139.1875 152.061856 171.15625C151.850003 174.00127 153.958888 176.3125 156.701031 176.3125 159.162342 176.3125 161.270655 174.00598 161.340206 171.15625L161.340206 144.859375 161.340206 141.765625C161.270655 138.916053 163.378968 136.609375 165.979381 136.609375 168.582422 136.609375 170.691306 138.920764 170.618557 141.765625L170.618557 144.859375 170.618557 176.3125C170.629257 179.157361 172.738142 181.46875 175.257732 181.46875 177.941596 181.46875 180.049909 179.162072 179.896907 176.3125L179.896907 153.625C180.111958 150.775428 182.220271 148.46875 185.051546 148.46875 187.423725 148.46875 189.532609 150.780139 189.690722 153.625L189.690722 163.421875C189.532609 166.266736 191.875815 168.578125 194.845361 168.578125 197.65743 168.578125 200 166.271447 200 163.421875L200 100"/> <circle cx="100.5" cy="100.5" r="26.5" fill="#FFF" stroke="#302434" stroke-linecap="square" stroke-width="3"/> <path stroke="#FFF" stroke-linecap="round" stroke-width="2" d="M103,132 L103,132 C119.016258,132 132,119.016258 132,103" opacity=".7"/> <path fill="#F7DA71" stroke="#302434" stroke-width="2.062" d="M168.854871,80.8314322 L168.854871,81.1126307 C168.854871,82.6700566 170.123055,83.9411037 171.680144,83.9411037 L183.967742,83.9411037 C185.519686,83.9411037 186.793015,82.6697696 186.793015,81.1126307 L186.793015,80.8314322 C186.793015,79.2740064 185.52483,78.0029593 183.967742,78.0029593 L171.680144,78.0029593 C170.1282,78.0029593 168.854871,79.2742934 168.854871,80.8314322 Z" transform="rotate(-134 177.824 80.972)"/> <path fill="#FFAD38" stroke="#302434" stroke-width="2.062" d="M170.784479,122.710815 L170.784479,122.992013 C170.784479,124.549439 172.052663,125.820486 173.609752,125.820486 L185.89735,125.820486 C187.449294,125.820486 188.722623,124.549152 188.722623,122.992013 L188.722623,122.710815 C188.722623,121.153389 187.454438,119.882342 185.89735,119.882342 L173.609752,119.882342 C172.057808,119.882342 170.784479,121.153676 170.784479,122.710815 Z" transform="rotate(25 179.754 122.851)"/> <path fill="#9FC1EA" stroke="#302434" stroke-width="2.062" d="M137.779864,103.591935 L137.779864,103.873134 C137.779864,105.430559 139.048049,106.701607 140.605137,106.701607 L152.892735,106.701607 C154.444679,106.701607 155.718008,105.430272 155.718008,103.873134 L155.718008,103.591935 C155.718008,102.034509 154.449824,100.763462 152.892735,100.763462 L140.605137,100.763462 C139.053193,100.763462 137.779864,102.034796 137.779864,103.591935 Z" transform="rotate(-73 146.749 103.733)"/> <path fill="#FFAD38" stroke="#302434" stroke-width="2.062" d="M69.2022598,19.4388294 L69.2022598,19.7200279 C69.2022598,21.2774537 70.4704445,22.5485008 72.0275331,22.5485008 L84.3151307,22.5485008 C85.8670745,22.5485008 87.1404041,21.2771667 87.1404041,19.7200279 L87.1404041,19.4388294 C87.1404041,17.8814035 85.8722194,16.6103564 84.3151307,16.6103564 L72.0275331,16.6103564 C70.4755893,16.6103564 69.2022598,17.8816905 69.2022598,19.4388294 Z" transform="rotate(-41 78.171 19.58)"/> <path fill="#F45467" stroke="#302434" stroke-width="2.062" d="M63.4327156,63.1481419 L63.4327156,63.4293404 C63.4327156,64.9867663 64.7009003,66.2578133 66.2579889,66.2578133 L78.5455866,66.2578133 C80.0975304,66.2578133 81.3708599,64.9864793 81.3708599,63.4293404 L81.3708599,63.1481419 C81.3708599,61.5907161 80.1026752,60.319669 78.5455866,60.319669 L66.2579889,60.319669 C64.7060452,60.319669 63.4327156,61.5910031 63.4327156,63.1481419 Z" transform="rotate(-51 72.402 63.289)"/> <path fill="#9FC1EA" stroke="#302434" stroke-width="2.062" d="M93.4950295,44.5196548 L93.4950295,44.8008533 C93.4950295,46.3582791 94.7632142,47.6293262 96.3203028,47.6293262 L108.6079,47.6293262 C110.159844,47.6293262 111.433174,46.3579921 111.433174,44.8008533 L111.433174,44.5196548 C111.433174,42.9622289 110.164989,41.6911819 108.6079,41.6911819 L96.3203028,41.6911819 C94.768359,41.6911819 93.4950295,42.962516 93.4950295,44.5196548 Z" transform="rotate(-120 102.464 44.66)"/> <path fill="#F45467" stroke="#302434" stroke-width="2.062" d="M116.763462,17.6083368 L116.763462,17.8895353 C116.763462,19.4469612 118.031647,20.7180082 119.588736,20.7180082 L131.876333,20.7180082 C133.428277,20.7180082 134.701607,19.4466741 134.701607,17.8895353 L134.701607,17.6083368 C134.701607,16.050911 133.433422,14.7798639 131.876333,14.7798639 L119.588736,14.7798639 C118.036792,14.7798639 116.763462,16.051198 116.763462,17.6083368 Z" transform="rotate(-163 125.733 17.749)"/> <path fill="#9FC1EA" stroke="#302434" stroke-width="2.062" d="M31.4950295,42.5196548 L31.4950295,42.8008533 C31.4950295,44.3582791 32.7632142,45.6293262 34.3203028,45.6293262 L46.6079004,45.6293262 C48.1598442,45.6293262 49.4331738,44.3579921 49.4331738,42.8008533 L49.4331738,42.5196548 C49.4331738,40.9622289 48.1649891,39.6911819 46.6079004,39.6911819 L34.3203028,39.6911819 C32.768359,39.6911819 31.4950295,40.962516 31.4950295,42.5196548 Z" transform="rotate(-120 40.464 42.66)"/> <path fill="#9FC1EA" stroke="#302434" stroke-width="2.062" d="M7.00295932,122.683344 L7.00295932,122.964542 C7.00295932,124.521968 8.27114404,125.793015 9.82823266,125.793015 L22.1158303,125.793015 C23.6677741,125.793015 24.9411037,124.521681 24.9411037,122.964542 L24.9411037,122.683344 C24.9411037,121.125918 23.6729189,119.854871 22.1158303,119.854871 L9.82823266,119.854871 C8.27628888,119.854871 7.00295932,121.126205 7.00295932,122.683344 Z" transform="rotate(44 15.972 122.824)"/> <path fill="#9FC1EA" stroke="#302434" stroke-width="2.062" d="M143.573598,38.5351135 L143.573598,38.816312 C143.573598,40.3737379 144.841783,41.644785 146.398871,41.644785 L158.686469,41.644785 C160.238413,41.644785 161.511742,40.3734509 161.511742,38.816312 L161.511742,38.5351135 C161.511742,36.9776877 160.243558,35.7066406 158.686469,35.7066406 L146.398871,35.7066406 C144.846928,35.7066406 143.573598,36.9779747 143.573598,38.5351135 Z" transform="rotate(10 152.543 38.676)"/> <path fill="#FFAD38" stroke="#302434" stroke-width="2.062" d="M13.7798639,78.5919351 L13.7798639,78.8731336 C13.7798639,80.4305595 15.0480486,81.7016065 16.6051372,81.7016065 L28.8927349,81.7016065 C30.4446787,81.7016065 31.7180082,80.4302725 31.7180082,78.8731336 L31.7180082,78.5919351 C31.7180082,77.0345093 30.4498235,75.7634622 28.8927349,75.7634622 L16.6051372,75.7634622 C15.0531935,75.7634622 13.7798639,77.0347963 13.7798639,78.5919351 Z" transform="rotate(-73 22.749 78.733)"/> <path fill="#FFAD38" stroke="#302434" stroke-width="2.062" d="M133.763462,61.6083368 L133.763462,61.8895353 C133.763462,63.4469612 135.031647,64.7180082 136.588736,64.7180082 L148.876333,64.7180082 C150.428277,64.7180082 151.701607,63.4466741 151.701607,61.8895353 L151.701607,61.6083368 C151.701607,60.050911 150.433422,58.7798639 148.876333,58.7798639 L136.588736,58.7798639 C135.036792,58.7798639 133.763462,60.051198 133.763462,61.6083368 Z" transform="rotate(-17 142.733 61.749)"/> <path fill="#F7DA71" stroke="#302434" stroke-width="2.062" d="M40.1448483,100.300712 L40.1448483,100.58191 C40.1448483,102.139336 41.4130331,103.410383 42.9701217,103.410383 L55.2577193,103.410383 C56.8096631,103.410383 58.0829927,102.139049 58.0829927,100.58191 L58.0829927,100.300712 C58.0829927,98.7432859 56.8148079,97.4722388 55.2577193,97.4722388 L42.9701217,97.4722388 C41.4181779,97.4722388 40.1448483,98.7435729 40.1448483,100.300712 Z" transform="rotate(54 49.114 100.441)"/> <path stroke="#302434" stroke-linecap="square" stroke-width="2" d="M143 190C153.043627 185.195415 162.158445 178.746675 170 171M28.7212226 170.713933C31.3439197 173.284559 34.1076215 175.717271 37 178M11.5217511 145.997463C13.5503966 149.823796 15.8170146 153.505818 18.3020045 157.024023"/> <path stroke="#FFF" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 140C20.5567785 140 22.8296876 142.321236 23 145.178571L23 152.946429 23 169M37 146C39.5567785 146 41.8296876 148.311968 42 151.157895L42 158.894737 42 195M56 123C58.5567785 123 60.8296876 125.305227 61 128.142857L61 135.857143 61 177M151 122C153.556779 122 155.829688 124.311968 156 127.157895L156 134.894737 156 171M74 133C76.5567785 133 78.8296876 135.3242 79 138.185185L79 145.962963 79 161M94 145C96.5567785 145 98.8296876 147.3242 99 150.185185L99 157.962963 99 187M113 139C115.556779 139 117.829688 141.280512 118 144.087719L118 151.719298 118 168M132 145C134.556779 145 136.829688 147.311968 137 150.157895L137 157.894737 137 194M170 133C172.301101 133 174.346719 135.293314 174.5 138.116279L174.5 145.790698 175 177M189 144C191.556779 144 193.829688 146.301766 194 149.135135L194 156.837838 194 163" opacity=".7"/> </g> </svg> </body> </html>
解决方案3
0 2020-01-01 18:24:34
一个很棒的画布 2d 资源是 MDN 的CanvasRenderingContext2D
这是我最近回答的同一主题的第二个问题。 以下关于如何在画布上淡化内容的答案将解释如何渲染动画（淡化）内容。
定时
下面使用的示例time传递给mainLoop通过功能requestAnimationFrame创建与动画FX的各种时间。 时间存储在globalTime并根据需要使用
动画计时在底部函数drawContent并使用变量animateStart （开始前多长时间）和animateLen （动画多长时间）
然后从中将 0-1（在animPos ）的值传递给函数donut.draw并用于动画。 donut.draw还使用globalTime来更改糖霜颜色。
var globalTime; // set in mainLoop var startTime; // undefined means it is reset var animateStart = 2500; // in ms time till animation starts 2.5 seconds var animateLen = 10000; // in ms length of animation 10 seconds function drawContent() { var animPos = 0; // default anim pos // check if animation need reset. If so set start time if (startTime === undefined) { startTime = globalTime + animateStart } // use the dif between global and start times to get the animation pos const t = globalTime - startTime; if (t >= 0 && t < animateLen) { animPos = t / (animateLen / 2); animPos = animPos > 1 ? 1- (animPos - 1) : animPos; } else if(t >= animateLen) { startTime = undefined } // resets animation donut.draw(Math.easeInOut(animPos)); }
衰退
使用globalAlpha对洒水进行淡化。 糖霜在甜甜圈上投射的阴影也有一些褪色。 （使用globalAlpha和globalCompositeOperation = "source-atop" ）
糖霜上的高亮线也使用 CSS 颜色格式rgba(255,255,255, 0.7)褪色，其中最后一个值是 alpha 量（从 0 - 1）。
为什么是顶级演示？
我不是 SVG 的粉丝，因为 Vivek Raju 的SVG 示例非常漂亮，它可能会让人们远离更好的 canvas 2D 或 WebGL 解决方案，它们可以更加动态和有趣。
因此，下面的示例使用纯 JS 和CanvasRenderingContext2D API 重新创建了相同的内容。
演示
Math.TAU = Math.PI * 2; // set up 2 PI Math.PI90 = Math.PI / 2; // 90 deg Math.easeInOut = (v, p = 2) => v < 0 ? 0 : v > 1 ? 1 : v ** p / (v ** p + (1 - v) ** p) Math.rand = (val) => Math.random() * val; Math.randI = (val) => Math.random() * val | 0; requestAnimationFrame(mainLoop); CanvasRenderingContext2D.prototype.setStyle = function(style) { for(const [key, value] of Object.entries(style)) { this[key] = value } } const ctx = canvas.getContext("2d"); const W = canvas.width = innerWidth; // size canvas to page const H = canvas.height = innerHeight * 1.5; const sprinkle = (x, y, col, size, ang) => ({x,y,col,size,ang}); const donut = { styles: { main: { // the icing lineWidth: 3, strokeStyle: "#000", fillStyle: "#FCC", }, inner: { // the donut lineWidth: 2, strokeStyle: "#000", fillStyle: "#DB8", }, highlight: { lineWidth: 2, strokeStyle: "rgba(255,255,255,0.8)", }, sprinkle: { lineWidth: 2, strokeStyle: "#000", } }, x: W * (1/2), y: H * (1/3) - H * (1/16) , r: Math.min(W * (1 / 2.5), H * (1 / 4)), highlightOffset: 4, drips:11, // best that this value is odd and >= 3 sprinkleCount: 7, resetDrips: 0, init() { var i = 0; this.dripLens = []; this.sprinkles = []; while (i < this.drips) { this.dripLens.push(Math.rand(1) + ((i + 1) % 2)); i++; } i = 0; const dr = this.r / this.drips; const innerR = this.r * (1/3); while (i < this.sprinkleCount) { const a = (i / (this.sprinkleCount - 1)) * (Math.PI + 1) + Math.PI - 0.5; const dist = Math.rand(this.r - innerR) * 0.4; const col = "#" + Math.randI(0xFFF).toString(16).padStart(3,"0").replace(/[0-9]/g,"A"); const ang = Math.rand(Math.TAU); const x = Math.cos(a) * (dist + innerR * 1.75) + this.x; const y = Math.sin(a) * (dist + innerR * 1.75) + this.y; this.sprinkles.push(sprinkle(x,y,col, dr*0.85, ang)); i++; } }, draw(dripScale) { const y = this.y + this.r * (1/1.5); const dr = this.r / this.drips; const dripLen = this.r * (1/2.3) * dripScale; const innerR = this.r * (1/3); const ho = this.highlightOffset; const lw = this.styles.main.lineWidth; var x = this.x + this.r - dr, xx = x - dr * 2; var i = 0; ctx.setStyle(this.styles.inner); ctx.beginPath(); ctx.arc(this.x, this.y, this.r - lw, 0, Math.TAU); ctx.arc(this.x, this.y, innerR + lw, 0, Math.TAU); ctx.fill("evenodd"); ctx.stroke(); ctx.setStyle(this.styles.main); const lum = Math.sin(globalTime / (250 * 90)) * 20 + 50; ctx.fillStyle = "hsl("+(globalTime / 250) % 360 +",100%,"+lum+"%)" ctx.beginPath(); ctx.arc(this.x, this.y, this.r, Math.PI, Math.TAU); while (i < this.drips) { const dy = this.dripLens[i++] * dripLen; if (i % 2) { ctx.arc(x, y + dy, dr, 0, Math.PI); } else { ctx.arc(x, y + dy, dr,0, -Math.PI, true); } x -= dr * 2; } ctx.closePath(); ctx.moveTo(this.x + innerR, this.y); ctx.arc(this.x, this.y, innerR, 0, Math.TAU); ctx.globalCompositeOperation = "source-atop"; ctx.globalAlpha = 0.25; ctx.lineWidth = this.styles.main.lineWidth * 3; ctx.stroke(); ctx.globalAlpha = 1; ctx.globalCompositeOperation = "source-over"; ctx.lineWidth = this.styles.main.lineWidth; ctx.fill("evenodd"); ctx.stroke(); ctx.setStyle(this.styles.highlight); ctx.beginPath(); ctx.arc(this.x, this.y, innerR + ho, 0, Math.PI90); i = 0; while (i < this.drips - 1) { const dy1 = this.dripLens[i++] * dripLen; const dy2 = this.dripLens[i++] * dripLen; ctx.moveTo(xx + dr + ho, y + dy1); ctx.arc(xx, y + dy2, dr + ho, 0, -Math.PI90, true); xx -= dr * 4; } const dy1 = this.dripLens[i] * dripLen; ctx.moveTo(xx + dr + ho, y + dy1); ctx.arc(this.x, this.y, this.r - ho, Math.PI , Math.PI + Math.PI90); ctx.stroke(); i = 4; ctx.setStyle(this.styles.sprinkle); for (const spr of this.sprinkles) { const dy = ((spr.y - (this.y - this.r)) / this.r) * 5 * dripScale; ctx.globalAlpha = Math.sin(globalTime / ((1 + i) * 200)) * 0.4 + 0.6; ctx.setTransform(1,0,0,1, spr.x, spr.y + dy); ctx.rotate(spr.ang + dy * 0.2 * (i++ % 2 ? -1 : 1)); ctx.fillStyle = spr.col; ctx.beginPath(); ctx.arc(0, -spr.size, spr.size / 2, Math.PI, Math.TAU); ctx.arc(0, spr.size, spr.size / 2, 0, Math.PI); ctx.closePath(); ctx.fill(); ctx.stroke(); } ctx.globalAlpha = 1; ctx.setTransform(1, 0, 0, 1, 0, 0); if (this.resetDrips === 0 && dripScale < 0.01) { this.resetDrips = 1; i = 0; while (i < this.dripLens.length) { this.dripLens[i] = Math.rand(1) + 0.1 + ((i + 1) % 2); i++; } } else if (this.resetDrips === 1 && dripScale > 0.9) { this.resetDrips = 0; } } }; donut.init(); var globalTime; var startTime; var animateStart = 2500; // 2.5 seconds var animateLen = 10000; // 10 seconds function mainLoop(time) { globalTime = time; ctx.globalAlpha = 1; ctx.clearRect(0, 0, W, H); drawContent(); requestAnimationFrame(mainLoop); } function drawContent() { var animPos = 0; if (startTime === undefined) { startTime = globalTime + animateStart } const t = globalTime - startTime; if (t >= 0 && t < animateLen) { animPos = t / (animateLen / 2); animPos = animPos > 1 ? 1- (animPos - 1) : animPos; } else if(t >= animateLen) { startTime = undefined } // resets animation donut.draw(Math.easeInOut(animPos)); }
body { padding: 0px; } canvas { position: absolute; top: 0px; left: 0px; }
<canvas id="canvas"></canvas>
淡出HTML5画布中的文本效果
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.