<!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. 前端内容安全策略（csp）

    什么是CSP CSP全称Content Security Policy ,可以直接翻译为内容安全策略,说白了,就是为了页面内容安全而制定的一系列防护策略. 通过CSP所约束的的规责指定可信的内容来源( ...

  2. leetcode:Minimum Depth of Binary Tree【Python版】

    1.类中递归调用添加self: 2.root为None,返回0 3.root不为None,root左右孩子为None,返回1 4.返回l和r最小深度,l和r初始为极大值: # Definition f ...

  3. dbt 的知识文档管理

    dbt 支持docs的管理,可以方便进行分享,以及大家的可视化工作 有一篇文档讲的特别好分析了知识共享,知识管理的重要性(dbt 对应公司的ceo) https://blog.fishtownanal ...

  4. actor model vs tasked based parallizm

    举例子:计算pi actor model概念:一般有n个actor(task),和一个调度线程(本身也是一个actor)调度线程负责向每个task发送命令执行计算,以及接收每个task的结果并归并到一 ...

  5. Anaconda 使用（解决python包管理与环境管理）

    Anaconda完全入门指南(对python环境和原理,讲的比较透彻):https://www.jianshu.com/p/eaee1fadc1e9 用pip一个一个安装第三方库费时费力,还需要考虑兼 ...

  6. NPOI控制Excel格式

    1.//sheet.SetColumnWidth(3, 50 * 256);  控制第三列宽,单位为1/256个字符 dataRow.Height = 18 * 20; 控制行高,单位为1/20点 s ...

  7. POJ2584 T-Shirt Gumbo——网络最大流模板

    题目:http://poj.org/problem?id=2584 像模板一样的简单题.继续使用 & 的当前弧优化和神奇的构造函数. #include<iostream> #inc ...

  8. iis运行asp.net页面提示“服务器应用程序不可用”的解决办法_.NET.

    原因:主要是iis安装在了net framwork之后 解决办法:需要在IIS中重新注册.net 也就是要用到系统盘: cd c:\windows\microsoft.net\framework\v2 ...

  9. ASP.NET ASHX中获得Session

    有时候需要在ASHX中获取Session,可是一般是获取不到的,如何解决? 1-在 aspx和aspx.cs中,都是以Session["xxx"]="aaa"和 ...

  10. git Push failed: Could not read from remote repository 解决方案

    解决的办法很简单,进入Android Studio配置界面,选择Version Control——>Git,在右边界面切换SSH下拉选项为Native,最后重新提交.如果解决你的问题,记得分享哦 ...