canvas實現的七色板程式碼例項

admin發表於2017-02-10
Canvas

下面的程式碼也許沒有什麼實際應用價值，但是可以作為參考之用。

特別是對於canvas的學習，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
</head>
<body>
<div style="margin:0 auto;width:600px; height:auto;text-align: center;">
<canvas id="mycanvas" width="600" height="600" style="display:block;margin:50px auto"></canvas>
</div>
</body>
<script>
  var c = document.getElementById("mycanvas");
  var ctx = c.getContext("2d");
 
  //    第一個三角形
  //    開始繪製
  ctx.beginPath();
  //    繪製的基點
  ctx.moveTo(0, 0);
  //    繪製從前一點到這點的直線
  ctx.lineTo(300, 300);
  ctx.lineTo(0, 600);
  ctx.closePath();//填充或閉合 需要先閉合路徑才能畫
  //    空心三角形
  //    ctx.strokeStyle="#FF7900";
  //    ctx.stroke();
  //    實心三角形
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(300, 300);
  ctx.lineTo(0, 600);
  ctx.closePath();//填充或閉合 需要先閉合路徑才能畫
  //    進行繪圖處理
  ctx.fillStyle = 'rgba(200,0,0,0.5)';
  ctx.fill();
 
  //    第二個三角形
  ctx.beginPath();
  ctx.moveTo(0, 0);
  ctx.lineTo(300, 0);
  ctx.lineTo(150, 150);
  ctx.closePath();
  ctx.fillStyle = "rgba(255,121,0,0.5)";
  ctx.fill();
 
  //    第三個三角形
  ctx.beginPath();
  ctx.moveTo(300, 0);
  ctx.lineTo(600, 0);
  ctx.lineTo(600, 300);
  ctx.closePath();
  ctx.fillStyle = "rgba(255,0,0,0.5)";
  ctx.fill();
 
  //    第四個三角形
  ctx.beginPath();
  ctx.moveTo(0, 600);
  ctx.lineTo(600, 600);
  ctx.lineTo(300, 300);
  ctx.closePath();
  ctx.fillStyle = "rgba(3,165,72,0.5)";
  ctx.fill();
 
  //    第五個三角形
  ctx.beginPath();
  ctx.moveTo(300, 300);
  ctx.lineTo(450, 150);
  ctx.lineTo(450, 450);
  ctx.closePath();
  ctx.fillStyle = "rgba(46,180,255,0.5)";
  ctx.fill();
 
  //   正方形
  ctx.beginPath();
  ctx.moveTo(300, 0);
  ctx.lineTo(450, 150);
  ctx.lineTo(300, 300);
  ctx.lineTo(150, 150);
  ctx.closePath();
  ctx.fillStyle = "rgba(255,245,0,0.5)";
  ctx.fill();
 
  //   平行四邊形
  ctx.beginPath();
  ctx.moveTo(600, 600);
  ctx.lineTo(600, 300);
  ctx.lineTo(450, 150);
  ctx.lineTo(450, 450);
  ctx.closePath();
  ctx.fillStyle = "rgba(129,0,196,0.5)";
  ctx.fill();
</script>
</html>

相關文章