<!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. 迭代器Iterator的底层实现原理

    第一步:没有接口的迭代器简单实现原理 package com.bjsxt.xiaofei; /** * 迭代器底层原理 * 方法: * hasNext() * next() * remove() * ...

  2. test20180921 量子纠缠

    题意 问题描述 万能的红太阳J 君正在研究量子信息的纠缠. 具体来说,J 君有一个初始为空的信息集.她会进行m 次操作,有时,她会向信息集内加入一个长度不超过L 的的数字串(一个数字串为一个仅由0 到 ...

  3. systemd学习笔记

    一.systemd介绍 systemd即为system daemon,是linux下的一种init软件与多数发行版使用的System V风格init相比,systemd采用了以下新技术: (1) 采用 ...

  4. Apache和Nginx的Rewrite规则对比

    一.Apache的rewrite 1.Rewrite规则简介: Rewirte主要的功能就是实现URL的跳转,它的正则表达式是基于Perl语言.可基于服务器级的(httpd.conf)和目录级的(.h ...

  5. TensorFlow学习线路

    如何高效的学习 TensorFlow 代码? 或者如何掌握TensorFlow,应用到任何领域? 作者:黄璞链接:https://www.zhihu.com/question/41667903/ans ...

  6. 监控分析——Web中间件

    发现 中间件监控看是否有性能瓶颈 核心:主要看中间件的线性池进程池有没有排队情况,请求是否处理及时就OK Apache 以前php都是用apache,现在基本用nginx了. 首先自己启动apache ...

  7. FastAdmin composer json 版本说明

    来源于 FastAdmin 执行 composer update 后将 ThinkPHP 升级到了 V5.1. FastAdmin  是基于 ThinkPHP 5.0.x 开发的,而 ThinkPHP ...

  8. python类的继承的两种方式

    class Animal(object): """docstring for Animal""" def __init__(self, na ...

  9. 使用scrapy框架爬取自己的博文（3）

    既然如此,何不再抓一抓网页的文字内容呢? 谷歌浏览器有个审查元素的功能,就是按树的结构查看html的组织形式,如图: 这样已经比较明显了,博客的正文内容主要在div 的class = cnblogs_ ...

  10. MFC的组合框（ComboBox）控件切换下拉样式

    由于课题的需求需要做MFC串口程序,看了百度下载的串口助手的界面风格,发现这个设计很好 波特率的组合框只给出了5个可选数值,然后第6个选项是Custom,即手动输入. 实际上DCB结构的BaudRat ...