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 相关文章推荐
解读IE和firefox下JScript和HREF的执行顺序
Jan 12 Javascript
JavaScript 原型继承之构造函数继承
Aug 26 Javascript
分享XmlHttpRequest调用Webservice的一点心得
Jul 20 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
Mar 06 Javascript
JS中Eval解析JSON字符串的一个小问题
Feb 21 Javascript
JS克隆,属性,数组,对象,函数实例分析
Nov 26 Javascript
ajax的分页查询示例(不刷新页面)
Jan 11 Javascript
AngularJS实现动态添加Option的方法
May 17 Javascript
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
angularjs $http调用接口的方式详解
Aug 13 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
Jul 19 Javascript
微信小程序自定义modal弹窗组件的方法详解
Dec 20 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
Yii+MYSQL锁表防止并发情况下重复数据的方法
2016/07/14 PHP
Yii2实现多域名跨域同步登录退出
2017/02/04 PHP
Aster vs KG BO3 第三场2.19
2021/03/10 DOTA
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/01/13 Javascript
jQuery EasyUI API 中文文档 搜索框
2011/09/29 Javascript
js/jQuery对象互转(快速操作dom元素)
2013/02/04 Javascript
原生js模拟淘宝购物车项目实战
2015/11/18 Javascript
jQuery遮罩层效果实例分析
2016/01/14 Javascript
理解javascript中Map代替循环
2016/02/26 Javascript
Javascript技术栈中的四种依赖注入小结
2016/02/27 Javascript
js获取隐藏元素的宽高
2017/02/24 Javascript
vue实现消息的无缝滚动效果的示例代码
2017/12/05 Javascript
JS中Object对象的原型概念基础
2018/01/29 Javascript
Vue页面骨架屏的实现方法
2018/05/22 Javascript
微信小程序实现炫酷的弹出式菜单特效
2019/01/28 Javascript
Vue监听页面刷新和关闭功能
2019/06/20 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
2019/07/22 Javascript
对vuex中store和$store的区别说明
2020/07/24 Javascript
Python的Django框架中的表单处理示例
2015/07/17 Python
python执行使用shell命令方法分享
2017/11/08 Python
python的faker库用法
2019/11/28 Python
Python图片的横坐标汉字实例
2019/12/04 Python
使用python实现哈希表、字典、集合操作
2019/12/22 Python
Python设计密码强度校验程序
2020/07/30 Python
Python爬取网站图片并保存的实现示例
2021/02/26 Python
iKRIX意大利网上商店:男女豪华服装和配件
2019/10/09 全球购物
htmlentities() 和 htmlspecialchars()有什么区别
2015/07/01 面试题
应付会计岗位职责
2013/12/12 职场文书
电子商务网站的创业计划书
2014/01/05 职场文书
网络编辑求职信
2014/04/30 职场文书
2014年党支部书记工作总结
2014/12/04 职场文书
酒店服务员岗位职责
2015/02/09 职场文书
初中教师个人总结
2015/02/10 职场文书
公司保密管理制度
2015/08/04 职场文书
python 标准库原理与用法详解之os.path篇
2021/10/24 Python
使用Python获取字典键对应值的方法
2022/04/26 Python