<!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. Java-JDK & Android SDK下载安装及配置教程

    转自:http://blog.csdn.net/dr_neo/article/details/49870587 第一步.安装JDK: 第二步.安装Eclipse: 第三步.下载并安装AndroidSD ...

  2. 结构体：HASH表模板

    这种 HASHMAP 就是一个链式前向星的表: 其中: init 函数:hashmap 创建初始化: check 函数:寻找 hash 表中是否有需要查找的值,若有则返回 1 ,否则返回 0 :遍历方 ...

  3. codeforces315Div1 B Symmetric and Transitive

    http://codeforces.com/contest/568/problem/B 题意就是给一个有n个元素的集合,现在需要求有多少个A的二元关系p,使得p是对称的,是传递的,但不是自反的. 首先 ...

  4. 在oracle的连接(join)中使用using关键字

    如果是使用natraul join,并且两张表中如果有多个字段是具有相同的名称和数据类型的,那么这些字段都将被oracle自作主张的将他们连接起来. 但实际上我们有时候是不需要这样来连接的.我们只需要 ...

  5. 《Entity Framework 6 Recipes》中文翻译 ---- 系列教程

    为了方便大家的阅读和学习,也是响应网友的建议,在这里为这个系列做一个目录.在目录开始这前,我先来回答之前遇到的几个问题. 1.为什么要学习EF? 这个问题很简单,项目需要.这不像学校,没人强迫你学习! ...

  6. 【转】每天一个linux命令（23）：Linux 目录结构

    原文网址:http://www.cnblogs.com/peida/archive/2012/11/21/2780075.html 对于每一个Linux学习者来说,了解Linux文件系统的目录结构,是 ...

  7. 消息中间件 ActiveMQ的简单使用

    一.AactiveMQ的下载和安装 1. 下载ActiveMQ 地址:http://activemq.apache.org/activemq-5152-release.html 我这里下载的是wind ...

  8. git 不能拉取时，检查是不是被杀毒软件给干掉了

    我这儿是 \Git\bin\sh.exe 被干掉了. 添加排除,并从隔离区中还原.

  9. ios获取安装的app

    http://www.iphonedevsdk.com/forum/iphone-sdk-development/22289-possible-retrieve-these-information.h ...

  10. lwip：与tcp发送相关的选项和函数

    1. 禁用Nagle tpcb->flags |= TF_NODELAY 2. tcp_write仅enqueue packet,而不会启动发送. 在tcp_write后调用tcp_output ...