<!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. hdu 1203 dp(关于概率的```背包？)

    题意:一个人手里有一笔钱 n ,有 m 所大学,分别知道这些大学的投简历花费和被录取概率,因为钱数有限,只能投一部分学校,问被录取的概率最大有多大. 这题除去计算概率以外就是一个 0 1 背包问题,所 ...

  2. subzero 基于postgrest && openresty && rabbitmq 的快速rest/graphql 开发平台

    subzero是在postgrest 基础上开发的,提供了graphql 的支持,同时开发的cli 工具也很方便 集成了rabbitmq 可以让我们的应用具体实时的特性 参考架构图 使用 最简单的使用 ...

  3. 转 DataTorrent 1.0每秒处理超过10亿个实时事件

    DataTorrent是一个实时的流式处理和分析平台,它每秒可以处理超过10亿个实时事件. 与Twitter平均每秒大约6000条微博相比,最近发布的DataTorrent 1.0似乎已经超出了需求, ...

  4. Git的一些基本操作和命令

    1.创建版本库 在D盘中打开Git Bash Here 1.1.创建一个空目录 Mkdir gitDemo –创建一个目录 Cd gitDemo  --进入gitDemo目录 Pwd –查看当前目录的 ...

  5. 标 题: Re: 总感觉IT没我大山东啥事？

    发信人: liuzhlai (liuzhlai), 信区: ITExpress 标  题: Re: 总感觉IT没我大山东啥事? 发信站: 水木社区 (Sat Aug 22 15:51:50 2015) ...

  6. git 报错及解决

    报错:fatal: refusing to merge unrelated histories==== 解决办法:git pull加上参数,如:git pull –allow-unrelated-hi ...

  7. 阻塞队列 BlockingQueue

    在新增的Concurrent包中,BlockingQueue很好的解决了多线程中,如何高效安全“传输”数据的问题.通过这些高效并且线程安全的队列类,为我们快速搭建高质量的多线程程序带来极大的便利.本文 ...

  8. SQL群集多实例卸载、安装

    安装SQL多实例群集: 准备工作:准备SQL群集管理员及服务账号:sqladmin和srv-sql,sqladmin和srv-sql都属于群集节点计算机的administrators组 预留群集名称账 ...

  9. python给字典排序

    应用场景: 统计一篇文章中单词的出现频率,然后进行排序 利用sorted函数,返回一个已经排序好的list,但不改变原来的数据结构 In [1]: dt = {'a':3,'b':2,'c':1} I ...

  10. tcp_tw_recycle和tcp_timestamps导致connect失败问题

    把服务里面的net.ipv4.tcp_timestamps这个参数设置为0后已经可以正常telnet通了. 具体设置方法: 在/etc/sysctl.conf  里面加入 net.ipv4.tcp_t ...