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 相关文章推荐
jquery 列表双向选择器之改进版
Aug 09 Javascript
Javascript中的getUTCHours()方法使用详解
Jun 10 Javascript
JS实现IE状态栏文字缩放效果代码
Oct 24 Javascript
JavaScript拖拽、碰撞、重力及弹性运动实例分析
Jan 08 Javascript
JavaScript中利用jQuery绑定事件的几种方式小结
Mar 06 Javascript
jquery+json实现分页效果
Mar 07 Javascript
JavaScript常用判断写法大全(推荐)
May 30 Javascript
Node.js搭建小程序后台服务
Jan 03 Javascript
ionic grid(栅格)九宫格制作详解
Jun 30 Javascript
Vue父子组件双向绑定传值的实现方法
Jul 31 Javascript
Vue 动态添加路由及生成菜单的方法示例
Jun 20 Javascript
Vue实现拖放排序功能的实例代码
Jul 08 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
php实现的mongodb操作类实例
2015/04/03 PHP
Zend Framework教程之Zend_Db_Table表关联实例详解
2016/03/23 PHP
使用PHP访问RabbitMQ消息队列的方法示例
2018/06/06 PHP
PHP从零开始打造自己的MVC框架之路由类实现方法分析
2019/06/03 PHP
Nigma vs AM BO3 第二场2.13
2021/03/10 DOTA
用javascript动态调整iframe高度的方法
2007/03/06 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
2014/07/23 Javascript
批量修改标签css样式以input标签为例
2014/07/31 Javascript
用JavaScript显示浏览器客户端信息的超相近教程
2015/06/18 Javascript
JavaScript代码轻松实现网页内容禁止复制(代码简单)
2015/10/23 Javascript
jQuery实现背景弹性滚动的导航效果
2016/06/01 Javascript
Angularjs为ng-click事件传递参数
2017/06/15 Javascript
js+html5实现页面可刷新的倒计时效果
2017/07/15 Javascript
原生JS与jQuery编写简单选项卡
2017/10/30 jQuery
Node.js使用Express.Router的方法
2017/11/14 Javascript
angular动态表单制作
2018/02/23 Javascript
JS实现字符串中去除指定子字符串方法分析
2018/05/17 Javascript
面试题:react和vue的区别分析
2019/04/08 Javascript
vue实现element表格里表头信息提示功能(推荐)
2019/11/20 Javascript
微信小程序去除左上角返回键的实现方法
2020/03/06 Javascript
[18:32]DOTA2 HEROS教学视频教你分分钟做大人-谜团
2014/06/12 DOTA
[01:18:35]DOTA2-DPC中国联赛 正赛 Elephant vs LBZS BO3 第一场 1月29日
2021/03/11 DOTA
用Python写的图片蜘蛛人代码
2012/08/27 Python
Python数组条件过滤filter函数使用示例
2014/07/22 Python
Python入门及进阶笔记 Python 内置函数小结
2014/08/09 Python
python搜索指定目录的方法
2015/04/29 Python
Python中pygal绘制雷达图代码分享
2017/12/07 Python
python中强大的format函数实例详解
2018/12/05 Python
python实现文法左递归的消除方法
2020/05/22 Python
解决TensorFlow调用Keras库函数存在的问题
2020/07/06 Python
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
2016/11/21 HTML / CSS
几道数据库的面试题或笔试题
2014/05/31 面试题
社区十八大感言
2014/01/19 职场文书
收入证明怎么写
2015/06/12 职场文书
幼儿园园长新年寄语
2015/08/17 职场文书
超市主管竞聘书
2015/09/15 职场文书