<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>canvas</title>
<script type="text/javascript" src="../js/jQuery.js"></script>
<style type="text/css">
*{
margin: 0;
padding: 0;
outline: none;
border: none;
}
#canvas{
margin: auto auto;
width: 7rem;
margin: .25rem 0 0 1.5rem;
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="canvas" width="1000" height="600"></canvas>
</body>
</html>
<script type="text/javascript">
/**
* rem 布局初始化
*/
$('html').css('font-size', $(window).width()/10);
/**
* 获取 canvas 画布
* 获取 canvas 绘图上下文环境
*/
var canvas = $('#canvas')[0];
var cxt = canvas.getContext('2d'); /**
* 线段相交交点的三种表现形式
* bevel round miter( 受 miterLimit 值得约束 )
*/
var fiveStart = {
bigRadius: 200,
smallRadius: 30,
offsetX: 400,
offsetY: 300,
RotationAngle: 0
} //cxt.lineJoin = "bevel"; //线与线的交点平角
//cxt.lineJoin = "round"; //线与线的交点圆角
cxt.lineJoin = "miter"; //线与线的交点尖角
cxt.miterLimit = 40; //尖角指数配合 miter 使用,数字越大,产生尖角的可能性越大
drawFiveStar(cxt, fiveStart); /**
* 绘制五角星的方法
*/
function drawFiveStar(cxt, fiveStart){
cxt.beginPath();
cxt.lineWidth = 10;
var x = 0, y = 0;
for(var i = 0; i < 5; i++){
x = Math.cos((18+72*i-fiveStart.RotationAngle)/180*Math.PI);
x = x*fiveStart.bigRadius+fiveStart.offsetX;
y = -Math.sin((18+72*i-fiveStart.RotationAngle)/180*Math.PI);
y = y*fiveStart.bigRadius+fiveStart.offsetY;
cxt.lineTo(x,y);
x = Math.cos((54+i*72-fiveStart.RotationAngle)/180*Math.PI);
x = x*fiveStart.smallRadius+fiveStart.offsetX;
y = -Math.sin((54+i*72-fiveStart.RotationAngle)/180*Math.PI);
y = y*fiveStart.smallRadius+fiveStart.offsetY;
cxt.lineTo(x,y);
}
cxt.closePath();
cxt.stroke();
}
</script>

HTML5 Canvas ( 画一个五角星 ) lineJoin miterLimit的更多相关文章

  1. 没事用html5 canvas画一个仪表盘自用,自适应的哦

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. html5 canvas 实现一个简单的叮当猫头部

    原文:html5 canvas 实现一个简单的叮当猫头部 html5的canvas是很强大的,今天也是温习了一下之前的基础知识,然后学着做了一个简单的小案例.虽然在这一块几乎空白,但还是乐于尝试... ...

  3. 用Canvas画一个刮刮乐

    Canvas 通过 JavaScript 来绘制 2D图形.Canvas 是逐像素进行渲染的.开发者可以通过javascript脚本实现任意绘图.Canvas元素是HTML5的一部分,允许脚本语言动态 ...

  4. 深夜,用canvas画一个时钟

    深夜,用canvas画一个时钟 查看demo 这几天准备阿里巴巴的笔试,可以说已经是心力交瘁,自从阿里和蘑菇街的内推被刷掉之后,开始越来越怀疑起自己的能力来,虽然这点打击应该是微不足道的.毕竟校招在刚 ...

  5. 10分钟,利用canvas画一个小的loading界面

    首先利用定义下canvas得样式 <canvas width="1024" height="720" id="canvas" styl ...

  6. html5 canvas画进度条

    这个ie8的兼容是个问题,ie8 的innerHTML有问题啊,添加两个附件吧 <!DOCTYPE html> <html> <head> <meta cha ...

  7. HTML5 Canvas 画虚线组件

    前段时间由于项目需要,用到了HTML5 Canvas画图,但是没有画虚线的方法,自己写了一个HTML5 画虚线的组件. dashedLine.js if (window.CanvasRendering ...

  8. HTML5 Canvas 画钟表

    画钟表是2D画图的老生常谈,我也不能免俗弄了一个.代码如下: <!DOCTYPE html> <html lang="utf-8"> <meta ht ...

  9. CSS3进度条 和 HTML5 Canvas画圆环

    看到一些高大上的进度条插件,然后想自己用CSS写.经过搜索资料之后,终于成功了.为了以后方便拿来用,或者复习.将代码贴出. HTML代码: 只需要两个div,外面的为一个有border的div id为 ...

随机推荐

  1. ajax完整请求

    @RequestMapping(value = "/quotaPage") // , method = RequestMethod.GET名额分配@ResponseBody //注 ...

  2. 【idea】如何将idea的项目路径设置成代码目录和配置文件目录

    一:创建相应的目录 二.提升目录的等级

  3. UVA1252 【Twenty Questions】

    分析 为了叙述方便,设"心里想的物体"为W.首先在读入时把每个物体转化为一个二进制整数.不难发现,同一个特征不需要问两遍,所以可以用一个集合s表示已经询问的特征集. 在这个集合s中 ...

  4. PDF文本框更改字体大小

    在Adobe Acrobat  Professional 7.0版本后里单击所插入的文本框,会出现文本框属性,此时只能改文本框的属性,不能修改文本框内的字体大小 要改字体很简单,左键选中要改的文本,按 ...

  5. C# 使用ZXing.NET生成一维码、二维码

    以上图片是本示例中的实际运行效果,在生活中我们的一维码(也就是条形码).二维码 使用已经非常广泛,那么如何使用c#.net来进行生成一维码(条形码).二维码呢? 使用ZXing来生成是非常方便的选择, ...

  6. alpha和color key

    一.alpha 1.透明度,一般取值0-255 2.Alpha 通道:    Alpha 通道是为保存选择区域而专门设计的通道.在生成一个图像文件时,并不必须产生 Alpha 通道.通常它是由人们在图 ...

  7. net web service 参数类型

    因为Web Services的执行是建立在XML架构之上的,所以它能够支持丰富的数据类型. 下表列出了使用SOAP协议时Web Services支持的数据类型:  类 型 含 义 基础类型 也即标准基 ...

  8. 字符设备之register_chrdev与register_chrdev_region(转)

    之前写字符设备驱动,都是使用register_chrdev向内核注册驱动程序中构建的file_operations结构体,之后创建的设备文件,只要是主设备号相同(次设备号不同),则绑定的都是同一个fi ...

  9. codevs 1131 统计单词数

    #include<iostream> #include<string> using namespace std; int main() { string s, s0; getl ...

  10. Mono.Cecil 修改目标.NET的IL代码保存时报异常的处理。

    使用Mono.Cecil对目标.NET的DLL程序进行IL修改后保存时报“Failed to resolve assembly: ' xxxxxx, version=xxxxx,Culture=xxx ...