<!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');

    /**

     * 扩展context('2d'), 绘制五角星的方法

     */

    CanvasRenderingContext2D.prototype.fillFiveStar = function(fiveStar){

        this.beginPath();

        this.lineWidth = 10;

        var x = 0, y = 0;

        for(var i = 0; i < 5; i++){

            x = Math.cos((18+72*i-fiveStar.RotationAngle)/180*Math.PI);

            x = x*fiveStart.bigRadius+fiveStar.offsetX;

            y = -Math.sin((18+72*i-fiveStar.RotationAngle)/180*Math.PI);

            y = y*fiveStart.bigRadius+fiveStar.offsetY;

            this.lineTo(x,y);

            x = Math.cos((54+i*72-fiveStar.RotationAngle)/180*Math.PI);

            x = x*fiveStart.smallRadius+fiveStar.offsetX;

            y = -Math.sin((54+i*72-fiveStar.RotationAngle)/180*Math.PI);

            y = y*fiveStart.smallRadius+fiveStar.offsetY;

            this.lineTo(x,y);

        }

        this.closePath();

        this.stroke();

    }

    /**

     * 调用扩展的方法

     */

    var fiveStart = {

        bigRadius: 200,

        smallRadius: 30,

        offsetX: 400,

        offsetY: 300,

        RotationAngle: 0

    }

    cxt.fillFiveStar(fiveStart);

</script>

HTML5 Canvas ( 扩展context('2d') ) CanvasRenderingContext2D.prototype.你的方法名的更多相关文章

  1. 基于 HTML5 Canvas 的简易 2D 3D 编辑器

    不管在任何领域,只要能让非程序员能通过拖拽来实现 2D 和 3D 的设计图就是很牛的,今天我们不需要 3dMaxs 等设计软件,直接用 HT 就能自己写出一个 2D 3D 编辑器,实现这个功能我觉得成 ...

  2. HTML5 Canvas 绘图

    首先要注意: <canvas> 元素不被一些老的浏览器所支持, 但被支持于Firefox 1.5+, Opera 9+, 新版本的Safari, Chrome, 以及Internet Ex ...

  3. 50代码HTML5 Canvas 3D 编辑器优雅搞定

    1024程序员节刚过,手痒想实现一个html的3d编辑器,看了three.js 同时还看了网上流传已久的<<基于 HTML5 Canvas 的简易 2D 3D 编辑器>>,都觉 ...

  4. 赠书：HTML5 Canvas 2d 编程必读的两本经典

    赠书:HTML5 Canvas 2d 编程必读的两本经典 这两年多一直在和HTML5 Canvas 打交道,也带领团队开发了世界首款基于HTML5 Canvas 的演示文档工具---AxeSlide( ...

  5. HTML5 Canvas 2D library All In One

    HTML5 Canvas 2D library All In One https://github.com/search?q=Javascript+Canvas+Library https://git ...

  6. HTML5 Canvas核心技术图形动画与游戏开发（读书笔记）----第一章，基础知识

    一,canvas元素 1 为了防止浏览器不支持canvas元素,我们设置“后备内容”(fallback content),下面紫色的字即为后备内容 <canvas id="canvas ...

  7. HTML5 Canvas自定义圆角矩形与虚线(Rounded Rectangle and Dash Line)

    HTML5 Canvas自定义圆角矩形与虚线(RoundedRectangle and Dash Line) 实现向HTML Canvas 2d context绘制对象中添加自定义的函数功能演示,如何 ...

  8. HTML5 Canvas彩色小球碰撞运动特效

    脚本简介 HTML5 Canvas彩色小球碰撞运动特效是一款基于canvas加面向对象制作的运动小球动画特效.   效果展示 http://hovertree.com/texiao/html5/39/ ...

  9. 学习笔记：HTML5 Canvas绘制简单图形

    HTML5 Canvas绘制简单图形 1.添加Canvas标签,添加id供js操作. <canvas id="mycanvas" height="700" ...

随机推荐

  1. Almost Union-Find 并查集（脱离原来的树）

    h: 0px; "> I hope you know the beautiful Union-Find structure. In this problem, you’re to im ...

  2. 使用just-api 进行接口测试

    just-api 是基于配置的测试,同时支持基于jsonpath jsonschema 的数据校验, 对于数据的请求只集成hook,支持测试失败重试.测试报告.graphql api 测试.... 使 ...

  3. 【转】每天一个linux命令（61）：wget命令

    原文网址:http://www.cnblogs.com/peida/archive/2013/03/18/2965369.html Linux系统中的wget是一个下载文件的工具,它用在命令行下.对于 ...

  4. bzoj 3611(洛谷 4103) [Heoi2014]大工程——虚树

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3611 https://www.luogu.org/problemnew/show/P4103 ...

  5. win10激活命令

    以管理员方式打开命令提示符输入以下3条命令slmgr /ipk W269N-WFGWX-YVC9B-4J6C9-T83GX 按回车slmgr /skms 54.223.212.31 按回车slmgr ...

  6. 利用windows server 2012 R2的Hyper-V搭建多个虚拟机的 Dynamics CRM 环境知识点小结

    一.需要掌握网络的知识,域真正的意义,防火墙等其他知识,这些知识我还需要加强,下面是我和同事的结果,不对的地方大家可以指出来,谢谢. 1.安装好的CRM2011环境,必须先打Update Rollup ...

  7. PHP错误和异常处理

    1.错误报告级别: 错误E_ERROR; 警告 E_WARNING 注意 E_NOTICE 2.php.ini 中的配置 error_reporting=;  错误提示 一般设置为: error_re ...

  8. WinForm 打开文件夹

    string path="c:\windows"; Process.Start("explorer.exe", path);

  9. java 关于Java中静态代码块以及构造函数的执行先后顺序

    先转个链接  http://blog.csdn.net/wangbaokangfei/article/details/7757320 另外补充一下.静态方法,只执行一次就自动在内存中存在,再次实例化此 ...

  10. spring SOA architecture

    在谈这个之前,还得再说下SOA和平台.SOA做两件事情,一个是解耦并识别可重用的服务,一个是对服务进行灵活组装和编排满足业务需求,SOA核心是业务和技术的解耦,服务和能力的复用.而在IT领域的平台平台 ...