この記事では、HTML5キャンバスタグに基づいたJSの効果について説明して、色相ボール効果を実現します。次のように、参照のために共有してください。
実行効果のスクリーンショットは次のとおりです。
特定のコードは次のとおりです。
<！doctype html> <html> <head> <meta charset = "utf-8"/> <title> jsキャンバスタグは色合いのボールを作成します</ittitle> </head> <body> <canvas> </canvas> <スクリプトタイプ= "テキスト/javascript"> var ctx、max、p、count; canvas = document.getElementsByTagname（ 'canvas'）[0]; ctx = canvas.getContext（ '2d'）; canvas.width = canvas.height = 400; ctx.fillrect（0,0,400,400）; max = 80; count = 150; p = []; r = 0; for（a = 0; a <max; a ++）{p.push（[math.cos（r）、math.sin（r）、0]）; r+= math.pi*2/max; } for（a = 0; a <max; a ++）p.push（[0、p [a] [0]、p [a] [1]]）; for（a = 0; a <max; a ++）p.push（[p [a] [1]、0、p [a] [0]）; rus（）;}; function rus（）{var a、b、c、d、e、s、tim、p2、xp、yp、xp2、yp2、x、y、z、x1、y1、z1; ctx.globalcompositeoperation = "source-over"; ctx.fillstyle = "rgba（0,0,0,0.03）"; ctx.fillrect（0,0、canvas.width、canvas.height）; ctx.globalCompositeOperation = "Lighter";ティム= count/5; for（e = 0; e <3; e ++）{tim*= 1.7; s = 1-e/3; a = tim/59; yp = math.cos（a）; yp2 = math.sin（a）; a = tim/23; xp = math.cos（a）; xp2 = math.sin（a）; p2 = []; for（a = 0; a <p.length; a ++）{x = p [a] [0]; y = p [a] [1]; z = p [a] [2]; y1 = y*yp+z*yp2; z1 = y*yp2-z*yp; x1 = x*xp+z1*xp2; z = x*xp2-z1*xp; z1 = math.pow（2、z*s）; x = x1*z1; y = y1*z1; p2.push（[x、y、z]）; } s*= 120; for（d = 0; d <3; d ++）{for（a = 0; a <max; a ++）{b = p2 [d*max+a]; c = p2 [（（a+1）％max）+d*max]; ctx.beginpath（）; ctx.strokestyle = "hsla（"+（（a/max*360）| 0）+"、70％、60％、0.15）"; ctx.linewidth = math.pow（6、b [2]）; ctx.lineto（b [0]*s+200、b [1]*s+200）; ctx.lineto（c [0]*s+200、c [1]*s+200）; ctx.stroke（）; }}} count ++; RequestAnimationFrame（rus）;} </script> </body> </html>PS：HTML5はここで使用されているため、読者はFirefox、Google、Operaなどのブラウザを使用して、より優れたHTML5効果で上記のコードを実行することをお勧めします。
JavaScript関連のコンテンツの詳細については、このサイトのトピックをご覧ください：「JavaScriptグラフィックドローイングスキルの要約」、「JavaScriptのスイッチング特殊効果とスキルの概要」、「JavaScript Search Algorithm Skills」、「JavaScript Animation Special Effects and Skillsの要約」、「JavaScript Errors and "Sumpling Errors" Sumpling of "Sumpling"の要約」スキル」、「JavaScriptトラバーサルアルゴリズムとスキルの概要」、「JavaScriptの数学的操作の使用の概要」
この記事がみんなのJavaScriptプログラミングに役立つことを願っています。