<!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. LG1116 【车厢重组】

    前言 看了大家的做法,什么冒泡排序,插入排序,树状数组,线段树,都好厉害呐,我都没想出来 但我发现竟然还没有人用主席树,于是我跟大家交流一下 主席树 做法 显然我们有 \(Ans=\sum_{i=1} ...

  2. 进程间通信--POSIX信号量

    1.未决和阻塞标志可以用相同的数据类型sigset_t来存储,sigset_t称为信号集,这个类型可以表示每个信号的“有效”或“无效”状态,在阻塞信号集中“有效”和“无效”的含义是该信号是否被阻塞,而 ...

  3. k8s helm 可视化UI 管理工具 monocular部署试用

    官方建议是用 helm 进行安装,但是helm 有点费事(各种原因...) 所以使用官方说的使用docker-compose 但是默认官方的compose 跑起来 还是真费事,经过调整,修改了一版支持 ...

  4. ORA-10997:another startup/shutdown operation of this instance in progress解决方法

    SQL> startup ORA-10997: another startup/shutdown operation of this instance inprogress ORA-09967: ...

  5. spring cloud 之 Eureka 知识点

    Eureka原理 当服务消费者想要调用服务提供者的API时,首先会在注册中心中查询当前可用的实例的网络地址(也可能是定时查询可用实例,本地缓存好可用服务列表),然后再使用客户端负载均衡,命中到其中一个 ...

  6. vue-echarts-v3 使用

    github地址:https://github.com/xlsdg/vue-echarts-v3 官方说明:无论多少个组件代码里写 import IEcharts from 'vue-echarts- ...

  7. maven 知识点1

    在POM 4中,dependency 中还引入了 scope,它主要管理依赖的部署.目前 scope 可以使用5个值: compile,缺省值,适用于所有阶段,会随着项目一起发布. provided, ...

  8. shell脚本 如何调用Mysql的存储过程 解决方案

    今天遇到一个在shell脚本里面要调用MySQL的存储过程,查阅了很多资料,发现有的都不好用,自己调试出了如下一种,拿来共享: 用mysql -e “ ”: 例如:   mysql -uroot -p ...

  9. 虚拟机 VMware Tools 安装

    Ubuntu 或具有图形用户界面的 Ubuntu Server 要挂载 CD 镜像并解压,请按以下步骤操作: 启动此虚拟机. 使用具有管理员权限或 root 用户权限的帐户登录此虚拟机. 选择:对于F ...

  10. Web(click and script) 与 Web(HTTP/HTML)协议区别

    先从最简单的说明上来看, Web(HTTP/HTML):       Emulation of     communication between a    browser and Web Serve ...