一个给力的html5 画多边形的例子
只需改变参数就能画出你想要的多边形，代码简单！不得不惊叹canvas的强大！
代码奉上
<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>画图</title>
</head> <body>
<canvas id = "myCanvas" width = '500' height = '500'>Canvas画线技巧</canvas>
<script>
var myCanvas = document.getElementById("myCanvas");
var context = myCanvas.getContext("2d");
function drawPath(x, y, n, r)
{
var i,ang;
ang = Math.PI*2/n //旋转的角度
context.save();//保存状态
context.fillStyle ='rgba(255,0,0,.3)';//填充红色，半透明
context.strokeStyle ='hsl(120,50%,50%)';//填充绿色
context.lineWidth = 1;//设置线宽
context.translate(x, y);//原点移到x,y处，即要画的多边形中心
context.moveTo(0, -r);//据中心r距离处画点
context.beginPath();
for(i = 0;i < n; i ++)
{
context.rotate(ang)//旋转
context.lineTo(0, -r);//据中心r距离处连线
}
context.closePath();
context.stroke();
context.fill();
context.restore();//返回原始状态
}
drawPath(100, 100, 3, 40)//在100,100处画一个半径为40的三边形
drawPath(200, 100, 4, 40)//在200,100处画一个半径为40的四角形
drawPath(300, 100, 5, 40)//在300,100处画一个半径为40的五边形
drawPath(100, 200, 6, 40)//在100,200处画一个半径为40的六边形
drawPath(200, 200, 7, 40)//在100,200处画一个半径为40的七边形
drawPath(300, 200, 7, 40)//在300,200处画一个半径为40的八边形
</script>
</body>
</html>
一个给力的html5 画多边形的例子的更多相关文章
- iOS-CGContextRef画各种图形例子
iOS-CGContextRef画各种图形例子 绘制效果图 绘制代码 - (void)drawRect:(CGRect)rect { //一个不透明类型的Quartz 2D绘画环境,相当于一个画布,你 ...
- 超给力的HTML5 3D动画欣赏及源码下载
HTML5有着非常巨大的魅力,尤其是CSS3和Cavnas,可以帮助页面渲染得非常炫酷.值得一提的是,利用HTML5的3D特性可以帮助你更加方便地在网页上实现3D动画特效.本文分享的这些HTML5 3 ...
- 【转】C# 串口操作系列(1) -- 入门篇，一个标准的，简陋的串口例子。
C# 串口操作系列(1) -- 入门篇,一个标准的,简陋的串口例子. 标签: c#objectnewlineexceptionbytestring 2010-05-17 01:10 117109人阅读 ...
- 使用Java、Matlab画多边形闭合折线图
由于写论文要将“哈密顿回路问题(TSP)”的求解中间结果表示出来,查了一下使用程序画多边形图形.现在在总结一下,这个图是“由给定节点首尾相连的”闭合多边形. 1.使用matlab作闭合多边形图 没有找 ...
- 【编程漫谈】用JAVA画多边形
一门语言只要带图形库就可以编程画图了,用JAVA画图有两种方式,一是在内存中画好然后生成图片,就可以看到画图的效果了.另一个就是在窗口界面上直接画,可以实时看到程序的运行效果.刚开始学编程的时候,我加 ...
- 最全vue的vue-amap使用高德地图插件画多边形范围
一.在vue-cli的框架下的main.js(或者main.ts)中引入高德插件,代码如下: import Vue from 'vue' import VueAMap from 'vue-amap' ...
- 查看某一个点是否在某个多边形内 使用ST_Contains函数
查看某一个点是否在某个多边形内 使用ST_Contains函数 --LINESTRING ( 121.312350 30.971457 , 121.156783 31.092221 , 121.35 ...
- 一个layer可以跟着画完的线移动ios程序 好玩啊。
用法:采用的是关键帧实现的. 实验目的:让上层的layer子层能够跟着在另一个子层上花的线进行移动 .即当线画完之后,图形开始移动,并且能够停在最后的那个位置 效果图: 采用是直接在layer图层上进 ...
- 每天一个JavaScript实例-html5拖拽
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
随机推荐
- gdb调试python
一.概述 有时我们会想调试一个正在运行的Python进程,或者一个Python进程的coredump.例如现在遇到一个mod_wsgi的进程僵死了,不接受请求,想看看究竟是运行到哪行Python代码呢 ...
- iOS技术
iOS技术 OC:分类(好处,和延展的区别) 分类: 在不修改原有的类的基础上增加新的方法 一个庞大的类可以分模块开发 一个庞大的类可以由多个人来编写,更有利于团队合作 分类是对原有类的一种扩展,在 ...
- c语言中的#ifndef、#def、#endif等宏是什么意思
#ifndef.(或者#ifndef).#def.#endif等宏这几个宏是为了进行条件编译.一般情况下,源程序中所有的行都参加编译.但是有时希望对其中一部分内容只在满足一定条件才进行编译,也就是对一 ...
- 深入A标签点击触发事件而不跳转的详解
本文介绍下,当点击A标签时,触发事件但不跳转的实现方法,有需要的朋友参考下吧. 点击页面上的空链接,点击后页面自动刷新,并会定位到页面顶端. 不过,有时需要点击#页面但不作跳转,可以这样写: < ...
- iframe自适应高度的问题
最近工作中遇到了iframe自适应高度的问题. 如果在iframe中写定高度height的属性,并且iframe中内容高度小于给定的height时,会在手机浏览器中莫名的产生下拉框,造成体验度下降. ...
- hdu 4676 Sum Of Gcd 莫队+数论
题目链接 给n个数, m个询问, 每个询问给出[l, r], 问你对于任意i, j.gcd(a[i], a[j]) L <= i < j <= R的和. 假设两个数的公约数有b1, ...
- nginx File not found 错误分析与解决方法
使用php-fpm解析PHP,出错提示如下:"No input file specified","File not found",原因是php-fpm进程找不到 ...
- CSS实现宽高成比例缩放
用js实现一个宽度自适应,高度随着宽度变化而变化的矩形,相信大家肯定都会.无非是js获取一下元素宽度,然后再计算出相应比例的高度,然后赋给元素,但如果要求只用CSS实现呢. html代 ...
- Cocos2D-x权威指南：核心类成员CCNode
节点类(CCNode)是Cocos2D-x中的主要类,继承自CCObject.继承关系如图3-2所看到的. 不论什么须要画在屏幕上的对象都是节点类. 最经常使用的节点类包含场景类(CCScene).布 ...
- http 双向通信之port映射
新产品开发了近2-3个月,给到客户做试用的时候,发现一个开发这么久从未考虑到的一个通信问题,mark下,下次开发同类产品的时候长点记性了. 产品由client与服务端两部分组成,client与服务端须 ...