h5画三角形_JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例

这篇文章主要介绍了JavaScript+html5 canvas绘制缤纷多彩的三角形效果,以完整实例形式分析了html5的canvas绘制图形的相关技巧,需要的朋友可以参考下

本文实例讲述了JavaScript+html5 canvas绘制缤纷多彩的三角形效果。分享给大家供大家参考，具体如下：

运行效果截图如下：

具体代码如下：

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<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);

}

更多关于js特效相关内容感兴趣的读者可查看本站专题：《jQuery动画与特效用法总结》及《jQuery常见经典特效汇总》

希望本文所述对大家JavaScript程序设计有所帮助。