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 插件实现图片延迟加载效果代码
Feb 06 Javascript
JavaScript 浏览器验证代码(来自discuz)
Jul 17 Javascript
用js实现判断当前网址的来路如果不是指定的来路就跳转到指定页面
May 02 Javascript
Jquery中的CheckBox、RadioButton、DropDownList的取值赋值实现代码
Oct 12 Javascript
关于js datetime的那点事
Nov 15 Javascript
常用DOM整理
Jun 16 Javascript
js点击按钮实现带遮罩层的弹出视频效果
Dec 19 Javascript
浅谈jQuery中ajaxPrefilter的应用
Aug 01 Javascript
详解webpack进阶之loader篇
Aug 23 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
Aug 08 Javascript
jQuery实现动态加载瀑布流
Sep 01 jQuery
谈谈JavaScript中的垃圾回收机制
Sep 17 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程序时遇到的三个问题
2012/01/17 PHP
PHP实现HTML页面静态化的方法
2015/11/04 PHP
个人总结的一些关于String、Function、Array的属性和用法
2007/01/10 Javascript
在IE和VB中支持png图片透明效果的实现方法(vb源码打包)
2011/04/01 Javascript
jQuery插件开发全解析
2012/10/10 Javascript
关于js数组去重的问题小结
2014/01/24 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
2015/03/31 Javascript
跟我学习javascript的函数调用和构造函数调用
2015/11/16 Javascript
IE6-IE9使用JSON、table.innerHTML所引发的问题
2015/12/22 Javascript
javascript 广告移动特效的实现代码
2016/06/25 Javascript
jQuery和CSS仿京东仿淘宝列表导航菜单
2017/01/04 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
2017/04/13 Javascript
JavaScript实现自动跳转文本功能
2017/05/25 Javascript
jQuery图片加载失败替换默认图片方法汇总
2017/11/29 jQuery
BootStrap自定义popover,点击区域隐藏功能的实现
2018/01/23 Javascript
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
vue配置文件实现代理v2版本的方法
2019/06/21 Javascript
微信小程序实现树莓派(raspberry pi)小车控制
2020/02/12 Javascript
一篇文章带你浅入webpack的DLL优化打包
2020/02/20 Javascript
python求质数的3种方法
2018/09/28 Python
基于python读取.mat文件并取出信息
2019/12/16 Python
keras slice layer 层实现方式
2020/06/11 Python
canvas烟花特效锦集
2018/01/17 HTML / CSS
专门出售各种儿童读物的网站:Put Me In The Story
2016/08/07 全球购物
销售业务员岗位职责
2014/01/29 职场文书
大学军训感言600字
2014/02/25 职场文书
网络技术专业求职信
2014/07/13 职场文书
自我管理的活动方案
2014/08/25 职场文书
立志成才演讲稿
2014/09/04 职场文书
工程承包协议书范本
2014/09/29 职场文书
2015元旦主持词开场白和结束语
2014/12/14 职场文书
2015年计生工作总结范文
2015/04/24 职场文书
建议书的格式及范文
2015/09/14 职场文书
2016优秀班主任个人先进事迹材料
2016/02/26 职场文书
Nginx的gzip相关介绍
2022/05/11 Servers
关于对TypeScript泛型参数的默认值理解
2022/07/15 Javascript