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 复杂的嵌套环境中输出单引号和双引号
May 26 Javascript
jQuery中的bind绑定事件与文本框改变事件的临时解决方法
Aug 13 Javascript
深入理解JavaScript系列(43):设计模式之状态模式详解
Mar 04 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
Jun 17 Javascript
关于JavaScript的变量的数据类型的判断方法
Aug 14 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
Feb 25 Javascript
JavaScript常用正则函数用法示例
Jan 23 Javascript
jQuery实现checkbox的简单操作
Nov 18 jQuery
vue.js编译时给生成的文件增加版本号
Sep 17 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
Sep 20 Javascript
Vue.js 事件修饰符的使用教程
Nov 01 Javascript
搭建vscode+vue环境的详细教程
Aug 31 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 函数执行效率的小比较
2010/10/17 PHP
PHP rsa加密解密使用方法
2015/04/27 PHP
yii2中的rules 自定义验证规则详解
2016/04/19 PHP
探究Laravel使用env函数读取环境变量为null的问题
2016/12/06 PHP
PHP最常用的正则表达式
2017/02/13 PHP
php中实现字符串翻转的方法
2017/02/22 PHP
thinkPHP5.0框架应用请求生命周期分析
2017/03/25 PHP
PHP实现的简单排列组合算法应用示例
2017/06/20 PHP
JSON扫盲帖 JSON.as类教程
2009/02/16 Javascript
Javascript JSQL,SQL无处不在,
2010/05/05 Javascript
JQuery的Validation插件中Remote验证的中文问题
2010/07/26 Javascript
jQuery实现类似淘宝购物车全选状态示例
2013/06/26 Javascript
jquery dialog open后,服务器端控件失效的快速解决方法
2013/12/19 Javascript
javascript实现自动填写表单实例简析
2015/12/02 Javascript
AngularJS控制器controller正确的通信的方法
2016/01/25 Javascript
angularjs之$timeout指令详解
2017/06/13 Javascript
关于前后端json数据的发送与接收详解
2017/07/30 Javascript
基于jQuery对象和DOM对象和字符串之间的转化实例
2017/08/08 jQuery
ES6 对象的新功能与解构赋值介绍
2019/02/05 Javascript
JS算法题之查找数字在数组中的索引位置
2019/05/15 Javascript
vue webpack build资源相对路径的问题及解决方法
2020/06/04 Javascript
[06:09]辉夜杯主赛事开幕式
2015/12/25 DOTA
[01:14:35]DOTA2上海特级锦标赛B组资格赛#1 Alliance VS Fnatic第一局
2016/02/26 DOTA
Python实现从百度API获取天气的方法
2015/03/11 Python
Python算法之求n个节点不同二叉树个数
2017/10/27 Python
详解tensorflow训练自己的数据集实现CNN图像分类
2018/02/07 Python
python flask几分钟实现web服务的例子
2019/07/26 Python
详解查看Python解释器路径的两种方式
2020/10/15 Python
Luxplus瑞典:香水和美容护理折扣
2018/01/28 全球购物
中餐厅经理岗位职责
2014/04/11 职场文书
医院党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
校车司机安全责任书
2015/05/11 职场文书
征求意见函
2015/06/05 职场文书
中学图书馆工作总结
2015/08/11 职场文书
计算机实训心得体会
2016/01/14 职场文书
一篇文章带你复习java知识点
2021/06/28 Java/Android