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


Posted in Javascript onJanuary 26, 2016

本文实例讲述了JavaScript+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>

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

Javascript 相关文章推荐
加载 Javascript 最佳实践
Oct 30 Javascript
javascript中的delete使用详解
Apr 11 Javascript
javascript确认框的三种使用方法
Dec 17 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
Apr 04 Javascript
js图片实时加载提供网页打开速度
Sep 11 Javascript
JavaScript不使用prototype和new实现继承机制
Dec 29 Javascript
jQuery控制frames及frame页面JS的方法
Mar 08 Javascript
AngularJS select加载数据选中默认值的方法
Feb 28 Javascript
浅谈React组件之性能优化
Mar 02 Javascript
点击按钮弹出模态框的一系列操作代码实例
Mar 29 Javascript
详解vue项目中实现图片裁剪功能
Jun 07 Javascript
原生js实现下拉选项卡
Nov 27 Javascript
JavaScript+html5 canvas制作的百花齐放效果完整实例
Jan 26 #Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
Jan 26 #Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
Jan 26 #Javascript
JavaScript+html5 canvas绘制的圆弧荡秋千效果完整实例
Jan 26 #Javascript
JS组件Bootstrap Select2使用方法详解
Apr 17 #Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
Jan 26 #Javascript
Hallo.js基于jQuery UI所见即所得的Web编辑器
Jan 26 #Javascript
You might like
WINDOWS服务器安装多套PHP的另类解决方案
2006/10/09 PHP
一个程序下载的管理程序(三)
2006/10/09 PHP
PHP笔记之:日期函数的使用介绍
2013/04/24 PHP
9段PHP实用功能的代码推荐
2014/10/14 PHP
PHP输出九九乘法表代码实例
2015/03/27 PHP
PHP判断上传文件类型的解决办法
2015/10/20 PHP
php双层循环(九九乘法表)
2017/10/23 PHP
PHP fclose函数用法总结
2019/02/15 PHP
基于jQuery判断两个元素是否有重叠部分的代码
2012/07/25 Javascript
基于iframe实现类似于ajax的页面无刷新
2014/05/31 Javascript
Node.js的包详细介绍
2015/01/14 Javascript
png在IE6 下无法透明的解决方法汇总
2015/05/21 Javascript
JS中IP地址与整数相互转换的实现代码
2017/04/10 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
2017/09/21 Javascript
phantomjs导出html到pdf的方法总结
2017/10/19 Javascript
AngularJS实时获取并显示密码的方法
2018/02/06 Javascript
VueJs组件之父子通讯的方式
2018/05/06 Javascript
vue-router 源码实现前端路由的两种方式
2018/07/02 Javascript
jquery.param()实现数组或对象的序列化方法
2018/10/08 jQuery
vue各种事件监听实例(小结)
2020/06/24 Javascript
VUE中鼠标滚轮使div左右滚动的方法详解
2020/12/14 Vue.js
Python排序算法之选择排序定义与用法示例
2018/04/29 Python
python绘制直线的方法
2018/06/30 Python
pygame游戏之旅 创建游戏窗口界面
2018/11/20 Python
python导入库的具体方法
2020/06/18 Python
Python分类测试代码实例汇总
2020/07/23 Python
python切割图片的示例
2020/11/12 Python
html5贪吃蛇游戏使用63行代码完美实现
2013/06/25 HTML / CSS
Nº21官方在线商店:numeroventuno.com
2019/09/26 全球购物
Steiff台湾官网:德国金耳釦泰迪熊
2019/12/26 全球购物
煤矿安全保证书
2015/02/27 职场文书
出纳岗位职责范本
2015/03/31 职场文书
2015大学生暑假调查报告
2015/07/13 职场文书
oracle表分区的概念及操作
2021/04/24 Oracle
解读Vue组件注册方式
2021/05/15 Vue.js
根德5570型九灯四波段立体声收音机是电子管收音机的楷模 ? 再论5570
2022/04/05 无线电