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 相关文章推荐
让插入到 innerHTML 中的 script 跑起来的实现代码
Jul 01 Javascript
JavaScript 判断用户输入的邮箱及手机格式是否正确
Dec 08 Javascript
从QQ网站中提取的纯JS省市区三级联动菜单
Dec 25 Javascript
JavaScript设计模式之单例模式实例
Sep 24 Javascript
JQuery异步获取返回值中文乱码的解决方法
Jan 29 Javascript
javascript实现简单的贪吃蛇游戏
Mar 31 Javascript
浅谈JavaScript函数的四种存在形态
Jun 08 Javascript
AngularJS入门教程之迭代器过滤详解
Aug 18 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
Sep 04 Javascript
基于JS实现移动端左滑删除功能
Jul 28 Javascript
js对象实例详解(JavaScript对象深度剖析,深度理解js对象)
Sep 21 Javascript
js将键值对字符串转为json字符串的方法
Mar 30 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
实用函数9
2007/11/08 PHP
php a simple smtp class
2007/11/26 PHP
ThinkPHP表单数据智能写入create方法实例分析
2015/09/27 PHP
PHP常见数组函数用法小结
2016/03/21 PHP
PHP实现的DES加密解密封装类完整实例
2017/04/29 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
PHP7移除的扩展和SAPI
2021/03/09 PHP
从sohu弄下来的flash中展示图片的代码
2007/04/27 Javascript
JavaScript中的全局对象介绍
2015/01/01 Javascript
JS组件Bootstrap实现图片轮播效果
2016/05/16 Javascript
微信小程序页面滑动屏幕加载数据效果
2020/11/16 Javascript
vue获取input输入值的问题解决办法
2017/10/17 Javascript
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
javascript实现倒计时提示框
2021/03/02 Javascript
Python编写生成验证码的脚本的教程
2015/05/04 Python
在Python中操作时间之tzset()方法的使用教程
2015/05/22 Python
详解Python中的Descriptor描述符类
2016/06/14 Python
深入浅出学习python装饰器
2017/09/29 Python
Python实现爬虫爬取NBA数据功能示例
2018/05/28 Python
Pandas读写CSV文件的方法示例
2019/03/27 Python
基于python if 判断选择结构的实例详解
2019/05/06 Python
Django模型序列化返回自然主键值示例代码
2019/06/12 Python
Python中面向对象你应该知道的一下知识
2019/07/10 Python
Python笔记之facade模式
2019/11/20 Python
html5使用canvas压缩图片的示例代码
2018/09/11 HTML / CSS
即时搜索数百万张门票:SeatsForEveryone.com
2018/08/26 全球购物
REN Clean Skincare官网:英国本土有机护肤品牌
2019/02/23 全球购物
党的群众路线教育实践活动学习心得体会
2014/03/03 职场文书
《莫泊桑拜师》教学反思
2014/04/23 职场文书
大学生村官演讲稿
2014/04/25 职场文书
关于雷锋的演讲稿
2014/05/10 职场文书
春季防火方案
2014/05/10 职场文书
师德师风整改措施
2014/10/24 职场文书
社区干部培训心得体会
2016/01/06 职场文书
2016年全国助残日活动总结
2016/04/01 职场文书
ubuntu20.04虚拟机无法上网的问题及解决
2022/12/24 Servers