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 相关文章推荐
你真的了解JavaScript吗?
Feb 24 Javascript
javascript 极速 隐藏/显示万行表格列只需 60毫秒
Mar 28 Javascript
关于取不到由location.href提交而来的上级页面地址的解决办法
Jul 30 Javascript
js文件Cookie存取值示例代码
Feb 20 Javascript
js超时调用setTimeout和间歇调用setInterval实例分析
Jan 28 Javascript
jquery马赛克拼接翻转效果代码分享
Aug 24 Javascript
jQuery动态添加及删除表单上传元素的方法(附demo源码下载)
Jan 15 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
May 18 Javascript
JS对象创建的几种方式整理
Feb 28 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
Sep 04 Javascript
React 使用recharts实现散点地图的示例代码
Dec 07 Javascript
this.$toast() 了解一下?
Apr 18 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
phpfans留言版用到的install.php
2007/01/04 PHP
php学习之运算符相关概念
2011/06/09 PHP
php ios推送(代码)
2013/07/01 PHP
thinkPHP框架实现的无限回复评论功能示例
2018/06/09 PHP
laravel-admin 管理平台获取当前登陆用户信息的例子
2019/10/08 PHP
TNC vs BOOM BO3 第三场2.13
2021/03/10 DOTA
jquery.validate分组验证代码
2011/03/17 Javascript
js DOM的学习笔记
2011/12/22 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
2013/01/17 Javascript
javascript页面动态显示时间变化示例代码
2013/12/18 Javascript
解析jquery中的ajax缓存问题
2013/12/19 Javascript
QQ空间顶部折页撕开效果示例代码
2014/06/15 Javascript
jquery实现简单实用的打分程序实例
2015/07/23 Javascript
json实现添加、遍历与删除属性的方法
2016/06/17 Javascript
浅谈javascript控制HTML5的全屏操控,浏览器兼容的问题
2016/10/10 Javascript
浅谈jquery中使用canvas的问题
2016/10/10 Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
2017/04/22 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
2017/09/11 Javascript
JS实现瀑布流布局
2017/10/21 Javascript
微信小程序实现鼠标拖动效果示例
2017/12/01 Javascript
Postman的下载及安装教程详解
2018/10/16 Javascript
在Django中创建第一个静态视图
2015/07/15 Python
python实现list元素按关键字相加减的方法示例
2017/06/09 Python
对Python中画图时候的线类型详解
2019/07/07 Python
Ubuntu16.04安装python3.6.5步骤详解
2020/01/10 Python
PageFactory设计模式基于python实现
2020/04/14 Python
Python selenium键盘鼠标事件实现过程详解
2020/07/28 Python
使用CSS3的rem属性制作响应式页面布局的要点解析
2016/05/24 HTML / CSS
html5使用canvas绘制文字特效
2014/12/15 HTML / CSS
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
大学生求职信范文
2014/05/24 职场文书
关爱老人标语
2014/06/21 职场文书
公务员政审材料范文
2014/12/23 职场文书
出租车拒载检讨书
2015/01/28 职场文书
Go中的条件语句Switch示例详解
2021/08/23 Golang
苹果的回收机器人可以通过拆解iPhone获取大量的金和铜并外公布了环境保护最新进展
2022/04/21 数码科技