JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
更新时间：2016年01月26日 12:49:23 作者：m1870164
这篇文章主要介绍了JavaScript+html5 canvas绘制缤纷多彩的三角形效果,以完整实例形式分析了html5的canvas绘制图形的相关技巧,需要的朋友可以参考下
本文实例讲述了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程序设计有所帮助。
相关文章
好多情况下flash会出现需要单击激活，不过一般新版本中直接插入随然不用激活但代码较多，下面的方法是个函数，其实代码也不少，不过思路很好，大家可以看看。2009-03-03
本文通过实例代码给大家介绍了微信小程序中使用ECharts 异步加载数据实现图表功能，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2018-07-07
这篇文章主要介绍了详解webpack-dev-server使用方法,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
下面小编就为大家分享一篇用JS实现非首屏图片延迟加载的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了js+css绘制颜色动态变化的圈中圈效果,涉及JavaScript结合时间函数动态操作页面元素样式的相关技巧,需要的朋友可以参考下2016-01-01
这篇文章主要为大家详细介绍了JavaScript实现淘宝购物件数的选择，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-08-08
这篇文章主要介绍了微信小程序 wepy框架与iview-weapp的用法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-04-04
promise面试中经常会遇到的一个问题就是关于控制并发的，所以下面这篇文章主要给大家介绍了关于Promise面试题之控制并发的相关资料，需要的朋友可以参考下2021-05-05
这篇文章主要介绍了JavaScript 自定义对象,主要介绍一些方法object创建对象、使用构造函数创建对象、字面量创建对象、等展开话题，具有一定的参考价值，需要的小伙伴可以参考一下2021-12-12
最近学习中遇到这个问题，为了日后方便查询，本人翻阅了一些资料总结了以下方法，仅限原生JS，如有不对的地方欢迎指出！只求大家看完觉得有学到点什么就OK了！下面这篇文章主要介绍了利用原生javascript实现读写CSS样式的方法,需要的朋友可以参考下。2017-02-02
最新评论