<!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. Spring学习--静态工厂方法、实例工厂方法创建 Bean

    通过调用静态工厂方法创建 bean: 调用静态工厂方法创建 bean 是将对象创建的过程封装到静态方法中 , 当客户端需要对象时 , 只需要简单地调用静态方法 , 而不需要关心创建对象的细节. 要声明 ...

  2. List<Map<String, Integer>> 同key的value全部累加合并

    public static void main(String[] args){ List<Map<String,Object>> list1 = new ArrayList&l ...

  3. 如何查看Eclipse的数字版的版本（转）

    为什么叫数字版的版本,因为Eclipse软件里显示的是文字版的版本,比如我现在的就是Version: Indigo Release.这在下载插件的时候很不方便. 如何查看文字版的版本信息:打开Ecli ...

  4. Windows环境下用jwplayer+Nginx搭建视频点播服务器

    flv视频可以采用两种方式发布: 一.普通的HTTP下载方式 二.基于Flash Media Server或Red5服务器的rtmp/rtmpt流媒体方式. 多数知名视频网站都采用的是前一种方式. 两 ...

  5. Java Mail多人群发与多附件发送

        近期公司的项目用到了Java Mail来发送注冊邮件,只是.开发的时候都是使用封装好的JAR,曾经也不是非常了解Java Mail的使用原理. 网上非常多代码都是仅仅有一部分,看一看也跑不起来 ...

  6. markdown 知识点

    符号 说明 作用 ___ 三个下划线 一条直线 * 或_ 1个星号 或 1个下划线 文字斜体 ** 或__ 2个星号 或 2个下划线 文字加粗 全角2个空格 缩进2个汉字 竖线之间加3个间隔符放在第二 ...

  7. GPU驱动兼容性问题

    GPU驱动兼容性问题 问题描述: 将笔记本的GTX860M 的驱动升级到了376.09版本,出现登陆界面,输入密码后黑屏. 解决思路: 由于正常显示登陆窗口,且可以输入密码,基本排除硬件问题和集成显卡 ...

  8. 用Qstring给char[]数组赋值（转）

    tree_data.Desc  //Desc是char[80]类型的数据 Qstring newDescStr; strcpy(tree_data.Desc , newDescStr.toLocal8 ...

  9. ML(3.2): NavieBayes R_kalR

    ML3.1 介绍e1071包实施朴素贝叶斯分类的函数,本例使用klaR包中的NaiveBayes函数,因为该函数较之前者增加了两个功能,一个是可以输入先验概率,另一个是在正态分布基础上增加了核平滑密度 ...

  10. dede频道页实现三级栏目嵌套调用文章

      dede频道页实现三级栏目嵌套调用文章: //支持arclist标签开始--> $typeid = $row['id']; if((class_exists('PartView'))) { ...