<!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. WPF 带CheckBox、图标的TreeView（转）

    在WPF实际项目开发的时候,经常会用到带CheckBox的TreeView,虽然微软在WPF的TreeView中没有提供该功能,但是微软在WPF中提供强大的ItemTemplate模板功能和自定义样式 ...

  2. kettle--变量的使用

    一.kettle的inner join 需求: 目前本地文件系统上有一个person.csv文件: 数据库中有一个person表: 现在需要将这两张表做inner join的操作. 1.1首先我们写一 ...

  3. WINDOWS FTP命令详解

    FTP命令是Internet用户使用最频繁的命令之一,不论是在DOS还是UNIX操作系统下使用FTP,都会遇到大量的FTP内部命令.熟悉并灵活应用FTP的内部命令,可以大大方便使用者,并收到事半功倍之 ...

  4. Django Admin 时间格式化

    http://961911.blog.51cto.com/951911/1557218 修改settings.py,添加一下内容: USE_L10N = False DATETIME_FORMAT = ...

  5. ORACLE基本操作备忘

    通过CMD登录SQLPLUS 的语句 C:\Users\Administrator>sqlplus /nolog SQL> conn sys/pwd as sysdba; 导入导出数据库( ...

  6. Microsoft Dynamics CRM 2011 中 SQL 语句总结

    一.查询用户和团队 插入的类型:OwnerIdType 可以为用户或团队: 1.团队: select top 1 ObjectTypeCode from metadataschema.entity w ...

  7. 【appium】keyevent的keycode

    方法1 AppiumDriver实现了在上述功能,代码如下(java版本) driver.sendKeyEvent(66); 方法2 HashMap<String, Integer> ke ...

  8. bzoj1876 SuperGCD

    Description Sheng bill有着惊人的心算能力,甚至能用大脑计算出两个巨大的数的GCD(最大公约 数)!因此他经常和别人比赛计算GCD.有一天Sheng bill很嚣张地找到了你,并要 ...

  9. 开发框架-APP：Hybird App

    ylbtech-开发框架-APP:Hybird App Hybrid App(混合模式移动应用)是指介于web-app.native-app这两者之间的app,兼具“Native App良好用户交互体 ...

  10. AJAX XML 实例

    AJAX XML 实例 下面的例子将演示网页如何使用 AJAX 来读取来自 XML 文件的信息 <!DOCTYPE html> <html> <head> < ...