多彩三角形
H5特效多才三角形，使用H5新特性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>了解更多關注我喲！！！
總結
- 上一篇： 查看目录是否为内存盘_Linux buf
- 下一篇： 计算机操作安全协议,安全协议操作语义模型