JavaScript+html5 キャンバスはカラフルな三角形の効果の完全な例を描画します

ホームページ

ウェブフロントエンド

jsチュートリアル

JavaScript+html5 キャンバスはカラフルな三角形の効果の完全な例を描画します_JavaScript スキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:17 PM

canvas html5 javascript 三角形描く

この記事の例では、JavaScript+html5 キャンバスがカラフルな三角形の効果を描画する方法について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:

実行中のエフェクトのスクリーンショットは次のとおりです:

具体的なコードは次のとおりです:

<!DOCTYPE HTML>
<html>
 <head>
  <title>demo</title>
  <style type="text/css">
   body {
    margin:0; padding:0; 
   }
   #canvas {
    width:500px; height:500px; border:3px solid #F2F2F2; box-shadow:0px 0px 25px #494949; margin:0 auto;
    margin-left:200px; margin-top:50px;
   }
  </style>
 </head>
 <body>
  <canvas id="canvas" width="500px" height="500px"></canvas>
  <script type="text/javascript">
   var colorArray = "01234567890ABCDEFabcdef".split("");
   var canvas = document.getElementById("canvas");
   var ctx = canvas.getContext("2d");
   function createTriangle(startPos, r, color) {
    var startX = startPos.x,
     startY = startPos.y;
     ctx.save();
     ctx.strokeStyle = color || "black";
     ctx.beginPath();
     ctx.lineWidth=2;
     ctx.moveTo(startX, startY);
     ctx.lineTo(startX+r*Math.sin(Math.PI/6), startY+r*Math.cos(Math.PI/6));
     ctx.lineTo(startX-r*Math.sin(Math.PI/6), startY+r*Math.cos(Math.PI/6));
     ctx.lineTo(startX, startY);
     ctx.closePath(); 
     ctx.stroke();
     ctx.restore();
   }
   function createColor() {
    var color = "#";
    for(var i=0; i<6; i++) {
     color += colorArray[Math.floor(Math.random()*colorArray.length)];
    }
    return color;
   }
   for(var i=0; i<100; i++) {
    var x = Math.round(Math.random()*500),
     y = Math.round(Math.random()*500),
     color = createColor();
    console.log(color);
    createTriangle({x: x, y: y}, 50, color); 
   }
  </script>
 </body>
</html>

ログイン後にコピー

js 特殊効果に関連するさらなるコンテンツに興味のある読者は、このサイトの特別トピック「jQuery アニメーションと特殊効果の使用法の概要」および「一般的な古典の概要」をチェックしてください。 jQuery"

の特殊効果

この記事が JavaScript プログラミングのすべての人に役立つことを願っています。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。