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 相关文章推荐
小议Function.apply()之二------利用Apply的参数数组化来提高 JavaScript程序性能
Nov 30 Javascript
在JavaScript中重写jQuery对象的方法实例教程
Aug 25 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
Dec 14 Javascript
在JavaScript中处理数组之reverse()方法的使用
Jun 09 Javascript
快速学习JavaScript的6个思维技巧
Oct 13 Javascript
浅谈js中的引用和复制(传值和传址)
Sep 18 Javascript
Bootstrap基本模板的使用和理解1
Dec 14 Javascript
详解javascript常用工具类的封装
Jan 30 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
Jul 26 Javascript
微信小程序indexOf的替换方法(推荐)
Jan 14 Javascript
js页面加载后执行的几种方式小结
Jan 30 Javascript
Vue实现移动端拖拽交换位置
Jul 29 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 生成饼图 三维饼图
2009/09/28 PHP
PHP无限分类代码,支持数组格式化、直接输出菜单两种方式
2011/05/18 PHP
Php Ctemplate引擎开发相关内容
2012/03/03 PHP
深入探讨:Nginx 502 Bad Gateway错误的解决方法
2013/06/03 PHP
深入Nginx + PHP 缓存详解
2013/07/11 PHP
PHP中遇到BOM、编码导致json_decode函数无法解析问题
2014/07/02 PHP
PHP基于CURL进行POST数据上传实例
2014/11/10 PHP
php版交通银行网银支付接口开发入门教程
2016/09/26 PHP
php统计数组不同元素的个数的实例方法
2019/09/26 PHP
PHP实现计算器小功能
2020/08/28 PHP
js判断选择时间不能小于当前时间的示例代码
2013/09/24 Javascript
javascript中兼容主流浏览器的动态生成iframe方法
2014/05/05 Javascript
Google 地图API资料整理及详细介绍
2016/08/06 Javascript
html、css和jquery相结合实现简单的进度条效果实例代码
2016/10/24 Javascript
Bootstrap基本样式学习笔记之表格(2)
2016/12/07 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
基于pako.js实现gzip的压缩和解压功能示例
2017/06/13 Javascript
vue.js实现二级菜单效果
2019/10/19 Javascript
Ant Design Vue 添加区分中英文的长度校验功能
2020/01/21 Javascript
Vue 简单实现前端权限控制的示例
2020/12/25 Vue.js
python根据文件大小打log日志
2014/10/09 Python
python使用itchat库实现微信机器人(好友聊天、群聊天)
2018/01/04 Python
Python爬取数据并写入MySQL数据库的实例
2018/06/21 Python
Python3 main函数使用sys.argv传入多个参数的实现
2019/12/25 Python
django之从html页面表单获取输入的数据实例
2020/03/16 Python
Pycharm2020.1安装中文语言插件的详细教程(不需要汉化)
2020/08/07 Python
Sneaker Studio匈牙利:购买运动鞋
2018/03/26 全球购物
MAC Cosmetics巴西官方网站:M·A·C彩妆
2019/04/18 全球购物
Sisley法国希思黎美国官方网站:享誉全球的奢华植物美容品牌
2020/06/27 全球购物
网络维护中文求职信
2014/01/03 职场文书
企业项目策划书
2014/01/11 职场文书
文秘档案管理岗位职责
2014/03/06 职场文书
工地安全标语
2014/06/07 职场文书
2015年信息中心工作总结
2015/05/25 职场文书
掌握这项技巧,一年阅读300本书不是梦
2019/09/12 职场文书
Java 超详细讲解设计模式之中的抽象工厂模式
2022/03/25 Java/Android