canvas 画六边形边框
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Document</title>
</head> <body>
<canvas id="myCanvas" width='' height=''>测试</canvas>
<script>
var myCanvas = document.getElementById("myCanvas");
var context = myCanvas.getContext("2d"); function drawPath(x, y, n, r) {
var i, ang;
ang = Math.PI * / n //旋转的角度
context.save(); //保存状态
context.fillStyle = 'rgba(0,0,0,0)'; //填充红色,半透明
context.strokeStyle = 'hsl(120,50%,50%)'; //填充绿色
context.lineWidth = ; //设置线宽
context.translate(x, y); //原点移到x,y处,即要画的多边形中心
context.moveTo(, -r); //据中心r距离处画点
context.beginPath();
for (i = ; i < n; i++) {
context.rotate(ang) //旋转
context.lineTo(, -r); //据中心r距离处连线
}
context.closePath();
context.stroke();
context.fill();
context.restore(); //返回原始状态
}
drawPath(, , , ) //在100,100处画一个半径为40的五边形
drawPath(, , , ) //在200,100处画一个半径为40的三角形
drawPath(, , , ) //在300,100处画一个半径为40的六边形
drawPath(, , , ) //在100,200处画一个半径为40的十五边形
drawPath(, , , ) //在100,200处画一个半径为40的四边形
</script>
</body> </html>
canvas 画六边形边框的更多相关文章
- canvas 画六边形
<section class="m1-c"> <div class="m1-t clearfix"> <ul> <li ...
- HTML5之Canvas画正方形
HTML5之Canvas画正方形 1.设计源码 <!DOCTYPE html> <head> <meta charset="utf-8" /> ...
- 使用javascript和canvas画月半弯
使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5 查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm 以下是代码: <!do ...
- canvas 画圈 demo
html代码: <canvas id="clickCanvas2" width="180" height="180" data-to ...
- 踩个猴尾不容易啊 Canvas画个猴子
踩个猴尾不容易啊 Canvas画个猴子 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...
- canvas画随机闪烁的星星
canvas画一颗星星: 规则的星星有内切圆和外切圆,每两个点之间的角度是固定的,因此可得到星星的每个点的坐标,画出星星. function drawStars(x,y,radius1,radius2 ...
- canvas画时钟
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- Canvas画椭圆的方法
虽然标题是画椭圆,但是我们先来说说Canvas中的圆 相信大家对于Canvas画圆都不陌生 oGC.arc(400, 300, 100, 0, 2*Math.PI, false); 如上所示,直接 ...
- 深夜,用canvas画一个时钟
深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...
随机推荐
- windows下PHP批量生成打包android程序APK-渠道txt植入apk文件
服务器安装php环境 下载 android-sdk-windows 下载JDK 1.打开zip支持 c:/windows/php.ini ,打开 exec 2.apk 支持mime添加 .apk a ...
- 【uTenux实验】内存池管理(固定内存池和可变内存池)
1.固定内存池管理实验 内存管理是操作系统的一个基础功能.uTenux的内存池管理函数提供了基于软件的内存池管理和内存块分配管理.uTenux的内存池有固定大小的内存池和大小可变的内存池之分,它们被看 ...
- Requests库上传文件时UnicodeDecodeError: 'ascii' codec can't decode byte错误解析
在使用Request上传文件的时候碰到如下错误提示: 2013-12-20 20:51:09,235 __main__ ERROR 'ascii' codec can't decode byte 0x ...
- MyBatis无法根据中文条件查询出结果
情况是这样的 , 以英文做参数可以查询到结果 , 以中文做参数则查询不到结果 在mysql workbench中执行sql , 可以查询到结果. 这是mybatis中没有指定utf-8的缘故导致的. ...
- uboot和内核波特率不同
uboot和内核波特率不同,在uboot启动后,修改uboot参数: set bootargs 'noinitrd root=/dev/mtdblock3 init=/linuxrc console= ...
- img会在特定的情况下主动的第二次调用MVC的action
当img的src为空,或者不是合法路径的时候,会连续调用MVC的action两次,第二次所传的值为src的值,这常常会导致程序报错. 这不是MVC的issue,而是浏览器的行为,当response f ...
- set JAVA_HOME in RHEL/CentOS
3.3. Install OpenJDK on Red Hat Enterprise Linux Introduction OpenJDK is one of many Java Developmen ...
- (转)MyEclipse自动生成Hibernate实体类, oracle篇
转自http://blog.csdn.net/hejinwei_1987/article/details/9465529 1.打开 windows -> Open Perspective -&g ...
- Linq To DataSet
private static void LinqToDataSet() { string sql = "select * from Advertising"; using (Dat ...
- 纸上谈兵:左倾堆(leftist heap)
作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 我们之前讲解了堆(heap)的概念.堆是一个优先队列.每次从堆中取出的元素都是堆中 ...