本文实例讲述了JavaScript+html5 canvas绘制缤纷多彩的三角形效果。分享给大家供大家参考,具体如下:
运行效果截图如下:
![查看图片](http://files.jb51.net/file_images/article/201601/2016126124957347.jpg)
具体代码如下:
demo
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;
}
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 |