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 相关文章推荐
JS对URL字符串进行编码/解码分析
Oct 25 Javascript
用jquery实现自定义风格的滑动条实现代码
Apr 26 Javascript
重构Javascript代码示例(重构前后对比)
Jan 23 Javascript
可以用鼠标拖动的DIV实现思路及代码
Oct 21 Javascript
js中同步与异步处理的方法和区别总结
Dec 25 Javascript
Javascript单元测试框架QUnitjs详细介绍
May 08 Javascript
JS合并数组的几种方法及优劣比较
Sep 19 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
Dec 22 Javascript
Angular 页面跳转时传参问题
Aug 01 Javascript
babel的使用及安装配置教程
Feb 22 Javascript
微信小程序事件 bindtap bindinput代码实例
Aug 26 Javascript
node.js域名解析实现方法详解
Nov 05 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
为什么那些咖啡爱好者大多看不上连锁咖啡店?
2021/03/06 咖啡文化
PHP setcookie设置Cookie用法(及设置无效的问题)
2011/07/13 PHP
ueditor 1.2.6 使用方法说明
2013/07/24 PHP
PHP中常用的数组操作方法笔记整理
2016/05/16 PHP
解决PHP 7编译安装错误:cannot stat ‘phar.phar’: No such file or directory
2017/02/25 PHP
PHP7多线程搭建教程
2017/04/21 PHP
YII2自动登录Cookie总是失效的解决方法
2017/06/28 PHP
php简单检测404页面的方法示例
2019/08/23 PHP
在IE中调用javascript打开Excel的代码(downmoon原作)
2007/04/02 Javascript
jquery autocomplete自动完成插件的的使用方法
2010/08/07 Javascript
一个简单的jQuery计算器实现了连续计算功能
2014/07/21 Javascript
运用jQuery定时器的原理实现banner图片切换
2014/10/22 Javascript
javascript中基本类型和引用类型的区别分析
2015/05/12 Javascript
js 函数式编程学习笔记
2017/03/25 Javascript
JS实现的添加弹出层并完成锁屏操作示例
2017/04/07 Javascript
JS实现获取毫秒值及转换成年月日时分秒的方法
2018/08/15 Javascript
vue项目部署到Apache服务器中遇到的问题解决
2018/08/24 Javascript
js 下拉菜单点击旁边收起实现(踩坑记)
2019/09/29 Javascript
Sublime Text3 配置 NodeJs 环境的方法
2020/05/20 NodeJs
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
2020/10/19 Javascript
[01:04:01]2014 DOTA2华西杯精英邀请赛5 24 DK VS VG
2014/05/25 DOTA
python备份文件以及mysql数据库的脚本代码
2013/06/10 Python
CentOS 6.5中安装Python 3.6.2的方法步骤
2017/12/03 Python
Python递归及尾递归优化操作实例分析
2020/02/01 Python
细数nn.BCELoss与nn.CrossEntropyLoss的区别
2020/02/29 Python
解决Django中checkbox复选框的传值问题
2020/03/31 Python
金融专业个人求职信范文
2013/11/28 职场文书
小区门卫工作职责
2013/12/14 职场文书
申请任职学生会干部自荐书范文
2014/02/13 职场文书
元旦晚会感言
2014/03/12 职场文书
校园游戏活动新闻稿
2014/10/15 职场文书
学校党的群众路线教育实践活动总结材料
2014/10/30 职场文书
给老婆的检讨书(搞笑版)
2015/05/06 职场文书
法制主题班会教案
2015/08/13 职场文书
JavaScript 反射学习技巧
2021/10/16 Javascript
iSCSI服务器CHAP双向认证配置
2022/04/01 Servers