<!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>