canvas绘制多边形


Posted in Javascript onFebruary 24, 2017

效果图:

canvas绘制多边形

代码如下:

<!doctype html>
<html>
<head>
 <meta http-equiv="content-type" content="text/html;charset=UTF-8" />
 <title>canvas 画多边形</title>
</head>
<body>
 <canvas id="myCanvas" width="500" height="500"></canvas>
</body>
<script>
 var canvas = document.getElementById("myCanvas");
 var ctx = canvas.getContext('2d');
 function draw(x,y,n,r){
  var i,ang;
  ang= Math.PI*2/n;
  ctx.save();
  ctx.fillStyle = 'rgba(255,0,0,.3)';
  ctx.strokeStyle = 'hsl(120,50%,50%)';
  ctx.lineWidth = 1;
  ctx.translate(x,y);
  ctx.moveTo(0,-r);
  ctx.beginPath();
  for(i=0;i<n;i++){
   ctx.rotate(ang);
   ctx.lineTo(0,-r);
  }
  ctx.closePath();
  ctx.fill();
  ctx.stroke();
  ctx.restore();
 }
 draw(100,100,3,40); 
 draw(200,100,4,40);
 draw(300,100,5,40);
 draw(100,200,6,40);
 draw(200,200,7,40);
 draw(300,200,8,40);
</script>
</html>

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
extjs ColumnChart设置不同的颜色实现代码
May 17 Javascript
使用jQuery和PHP实现类似360功能开关效果
Feb 12 Javascript
轻松学习jQuery插件EasyUI EasyUI实现拖放商品放置购物车
Nov 30 Javascript
JavaScript File API实现文件上传预览
Feb 02 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
May 09 Javascript
浅谈JavaScript 数据属性和访问器属性
Sep 01 Javascript
JS实现鼠标移上去显示图片或微信二维码
Dec 14 Javascript
Bootstrap3.3.7导航栏下拉菜单鼠标滑过展开效果
Oct 31 Javascript
js实现数组内数据的上移和下移的实例
Nov 14 Javascript
JS/HTML5游戏常用算法之碰撞检测 地图格子算法实例详解
Dec 12 Javascript
design vue 表格开启列排序的操作
Oct 28 Javascript
浅谈es6中的元编程
Dec 01 Javascript
angularjs实现多张图片上传并预览功能
Feb 24 #Javascript
Angularjs分页查询的实现
Feb 24 #Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
Feb 24 #Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
Feb 24 #Javascript
canvas实现图片根据滑块放大缩小效果
Feb 24 #Javascript
详解JS中的立即执行函数
Feb 24 #Javascript
几行js代码实现自适应
Feb 24 #Javascript
You might like
php中实现记住密码自动登录的代码
2011/03/02 PHP
php cli 小技巧
2013/06/03 PHP
一个经典的PHP文件上传类分享
2014/11/18 PHP
thinkphp框架实现数据添加和显示功能
2016/06/29 PHP
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
2010/06/28 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
2014/11/17 Javascript
用模版生成HTML的的框架jquery.tmpl使用详解
2015/01/07 Javascript
jQuery对象初始化的传参方式
2015/02/26 Javascript
javascript中的 object 和 function小结
2016/08/14 Javascript
javascript基于原型链的继承及call和apply函数用法分析
2016/12/15 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
2017/04/06 Javascript
js构造函数创建对象是否加new问题
2018/01/22 Javascript
vue-router的两种模式的区别
2019/05/30 Javascript
JavaScript 类的封装操作示例详解
2020/05/16 Javascript
[07:08]2014DOTA2西雅图国际邀请赛 小组赛7月11日TOPPLAY
2014/07/11 DOTA
[04:52]第二届DOTA2亚洲邀请赛主赛事第一天比赛集锦:OG娜迦海妖放大配合谜团大中3人
2017/04/02 DOTA
人生苦短我用python python如何快速入门?
2018/03/12 Python
win10 64bit下python NLTK安装教程
2018/09/19 Python
在pycharm上mongodb配置及可视化设置方法
2018/11/30 Python
Python实现定时执行任务的三种方式简单示例
2019/03/30 Python
Django REST framework 视图和路由详解
2019/07/19 Python
DJANGO-URL反向解析REVERSE实例讲解
2019/10/25 Python
python模拟实现斗地主发牌
2020/01/07 Python
获取CSDN文章内容并转换为markdown文本的python
2020/09/06 Python
兰蔻法国官方网站:Lancôme法国
2020/02/22 全球购物
为什么要有struct关键字
2012/05/08 面试题
2013年办公室秘书的个人自我鉴定
2013/10/24 职场文书
会计系个人求职信范文分享
2013/12/20 职场文书
大学生自我鉴定范文
2013/12/28 职场文书
优秀信贷员先进事迹
2014/01/31 职场文书
2014年机关后勤工作总结
2014/12/16 职场文书
工艺技术员岗位职责
2015/02/04 职场文书
2015年超市员工工作总结
2015/05/04 职场文书
法院执行局工作总结
2015/08/11 职场文书
Feign调用传输文件异常的解决
2021/06/24 Java/Android
javascript函数式编程基础
2021/09/15 Javascript