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 相关文章推荐
filters.revealTrans.Transition使用方法小结
Aug 19 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
Apr 26 Javascript
js获得地址栏?问号后参数的方法
Aug 08 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
Nov 20 Javascript
js+div实现文字滚动和图片切换效果代码
Aug 27 Javascript
Vue条件循环判断+计算属性+绑定样式v-bind的实例
Sep 18 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
Nov 22 Javascript
js实现图片放大并跟随鼠标移动特效
Jan 18 Javascript
Vue快速实现通用表单验证的示例代码
Jan 09 Javascript
js实现无缝轮播图
Mar 09 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
Jul 22 Javascript
vuex存取值和映射函数使用说明
Jul 24 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中上传大体积文件时需要的设置
2006/10/09 PHP
给apache2.2加上mod_encoding模块後 php5.2.0 处理url出现bug
2007/04/12 PHP
基于PHP CURL获取邮箱地址的详解
2013/06/03 PHP
PHP FTP操作类代码( 上传、拷贝、移动、删除文件/创建目录)
2014/05/10 PHP
yii2超好用的日期组件和时间组件
2016/05/05 PHP
PHP数组生成XML格式数据的封装类实例
2016/11/10 PHP
ThinkPHP 模板引擎使用详解
2017/05/07 PHP
PHP创建自己的Composer包方法
2018/04/09 PHP
PHP根据key删除数组中指定的元素
2019/02/28 PHP
两个比较有用的Javascript工具函数代码
2010/02/17 Javascript
基于jquery的分页控件(C#)
2011/01/06 Javascript
jQueryUI写一个调整分类的拖放效果实现代码
2012/05/10 Javascript
在Mac OS下使用Node.js的简单教程
2015/06/24 Javascript
jquery简单插件制作(fn.extend)完整实例
2016/05/24 Javascript
jQuery中fadein与fadeout方法用法示例
2016/09/16 Javascript
jQuery动态创建元素以及追加节点的实现方法
2016/10/20 Javascript
JavaScript面向对象分层思维全面解析
2016/11/22 Javascript
Bootstrap超大屏幕的实现代码
2017/03/22 Javascript
mpvue全局引入sass文件的方法步骤
2019/03/06 Javascript
js时间转换毫秒的实例代码
2019/08/21 Javascript
vue 设置 input 为不可以编辑的实现方法
2019/09/19 Javascript
微信小程序图片右边加两行文字的代码
2020/04/23 Javascript
Python批量提取PDF文件中文本的脚本
2018/03/14 Python
python3中eval函数用法使用简介
2019/08/02 Python
Python处理session的方法整理
2019/08/29 Python
python字符串的拼接方法总结
2019/11/18 Python
浅析Django 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求
2020/03/09 Python
Electrolux伊莱克斯巴西商店:家用电器、小家电和配件
2018/05/23 全球购物
年会活动策划方案
2014/01/23 职场文书
给老师的一封建议书
2014/03/13 职场文书
征婚广告词
2014/03/17 职场文书
2014教师教育实践活动对照检查材料思想汇报
2014/09/21 职场文书
2016年五一劳动节专题校园广播稿
2015/12/17 职场文书
《卖火柴的小女孩》教学反思
2016/02/19 职场文书
golang json数组拼接的实例
2021/04/28 Golang
实现一个简单得数据响应系统
2021/11/11 Javascript