JavaScript+html5 canvas繪製繽紛多彩的三角形效果完整實例_javascript技巧
- WBOY原創
- 2016-05-16 15:17:522003瀏覽
本文實例講述了JavaScript+html5 canvas繪製繽紛多彩的三角形效果。分享給大家參考，具體如下：
運作效果截圖如下：
具體程式碼如下：
<!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