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 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...
随机推荐
- bzoj3087: Coci2009 misolovke
Description [misolovke]给定一个 N*N 的网格.每个格子里至少会有一个捕鼠器, 并且已知每个格子里的捕鼠器个数.现在需要在 每一行 中选取恰好 K 个连续的格子, 把里面的捕鼠 ...
- 在VBA中调用winsock控件
如果系统没有Winsock控件的话,可以下载下面的控件MSWINSCK.OCX,然后将该文件复制到C:\Windows\System32目录下. 在VBE窗口中,从菜单"工具"-& ...
- HelloWorld
1.创建一src目录,并创建一个文本文件 2.将文件重命名为Hello.java,并用notepad打开 3.编写代码 4.将源代码编译为类文件 Java编译器(javac.exe)的作用是将Java ...
- java Util
import com.alibaba.fastjson.JSON; import com.alibaba.fastjson.JSONObject; import com.qihangedu.tms.a ...
- JavaScript 数据验证类
JavaScript 数据验证类 /* JavaScript:验证类 author:杨波 date:20160323 1.用户名验证 2.密码验证 3.重复密码验证 4.邮箱验证 5.手机号验证 6. ...
- vc6开发ActiveX并发布全攻略(三)(转)
一.环境: windows xp sp3 Microsoft VC++ 6.0 二.制作文件 打开iexpress.exe(windows提供的一个向导式cab制作工具,位置:C:\WINDOWS\s ...
- 14.高度最小的BST
题目描述 对于一个元素各不相同且按升序排列的有序序列,请编写一个算法,创建一棵高度最小的二叉查找树. 给定一个有序序列int[] vals,请返回创建的二叉查找树的高度. 返回高度的代码如下: imp ...
- ios开发 iphone中获取网卡地址和ip地址
这是获取网卡的硬件地址的代码,如果无法编译通过,记得把下面的这几个头文件加上把. #include <sys/socket.h> // Per msqr#include <sys/s ...
- LINUX下WIFI默认连接
#! /bin/sh ifconfig wlan0 upiwconfig wlan0 key 123456iwconfig wlan0 essid "rat-linux"iwcon ...
- C#编写的通过汉字得到拼音和五笔码
public static class SpellAndWbConfig { #region 变量声明 // XML文件读取实例 /// <summary> /// XML文件读取实例 / ...