<!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{

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

    /**

     * 绘制一轮弯月

     */

    fillMoon(cxt, 2, 400, 300, 200, 0);

    function fillMoon(cxt, d, x, y, R, rot){

        cxt.save();

        cxt.translate(x, y);

        cxt.rotate(rot*Math.PI/180);

        cxt.scale(R, R);

        pathMoon(cxt, d);

        cxt.fillStyle = '#fb5';

        cxt.fill();

        cxt.restore();

    }

    function pathMoon(cxt, d){

        cxt.beginPath();

        cxt.arc(0, 0, 1, 0.5*Math.PI, 1.5*Math.PI, true);

        cxt.moveTo(0, -1);

        cxt.arcTo(d, 0, 0, 1, dis(0, -1, d, 0)/d);

        cxt.closePath();

    }

    function dis(x1, y1, x2, y2){

        return Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));

    }

</script>

 

<!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{

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

    /**

     * 绘制一片星空加月亮

     */

    cxt.clearRect(0, 0, canvas.width, canvas.height)

    var skyStyle = cxt.createRadialGradient(canvas.width/2, canvas.height, 0, canvas.width/2, canvas.height, canvas.height);

    skyStyle.addColorStop(0.0, '#035');

    skyStyle.addColorStop(1.0, 'black');

    cxt.fillStyle = skyStyle;

    cxt.fillRect(0, 0, canvas.width, canvas.height);

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

        var fiveStart = {};

        fiveStart.Radius = Math.random()*4+4;

        fiveStart.offsetX = Math.random()*canvas.width;

        fiveStart.offsetY = Math.random()*canvas.height*0.65;

        fiveStart.RotationAngle = Math.random()*360;

        drawFiveStar(cxt, fiveStart);

    }

    fillMoon(cxt, 1, 800, 150, 80, 30);

    /**

     * 绘制月亮的方法

     */

    function fillMoon(cxt, d, x, y, R, rot){

        cxt.save();

        cxt.translate(x, y);

        cxt.rotate(rot*Math.PI/180);

        cxt.scale(R, R);

        pathMoon(cxt, d);

        cxt.fillStyle = 'yellow';

        cxt.fill();

        cxt.restore();

    }

    function pathMoon(cxt, d){

        cxt.beginPath();

        cxt.arc(0, 0, 1, 0.5*Math.PI, 1.5*Math.PI, true);

        cxt.moveTo(0, -1);

        cxt.arcTo(d, 0, 0, 1, dis(0, -1, d, 0)/d);

        cxt.closePath();

    }

    function dis(x1, y1, x2, y2){

        return Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));

    }

    /**

     * 控制五角星的方法

     */

    function drawFiveStar(cxt, fiveStart){

        cxt.save();

        cxt.translate(fiveStart.offsetX, fiveStart.offsetY); //相对于原点的偏移量

        cxt.rotate(fiveStart.RotationAngle/180*Math.PI); //图形旋转(弧度)

        cxt.scale(fiveStart.Radius, fiveStart.Radius); //图形缩放( X轴的倍数, Y轴的倍数 )

        fiveStartPath(cxt);

        cxt.fillStyle = "yellow";

        cxt.fill();

        cxt.restore();

    }

    function fiveStartPath(cxt){

        cxt.beginPath();

        var x = 0; y = 0;

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

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

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

            cxt.lineTo(x, 0-y);

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

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

            cxt.lineTo(x, 0-y);

        }

        cxt.closePath();

    }

</script>

HTML5 Canvas ( 绘制一轮弯月, 星空中的弯月 )的更多相关文章

  1. 使用 HTML5 Canvas 绘制出惊艳的水滴效果

    HTML5 在不久前正式成为推荐标准,标志着全新的 Web 时代已经来临.在众多 HTML5 特性中,Canvas 元素用于在网页上绘制图形,该元素标签强大之处在于可以直接在 HTML 上进行图形操作 ...

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

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

  3. 使用html5 canvas绘制图片

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  4. 使用html5 canvas绘制圆形或弧线

    注意:本文属于<html5 Canvas绘制图形入门详解>系列文章中的一部分.如果你是html5初学者,仅仅阅读本文,可能无法较深入的理解canvas,甚至无法顺畅地通读本文.请点击上述链 ...

  5. html5 Canvas绘制图形入门详解

    html5,这个应该就不需要多作介绍了,只要是开发人员应该都不会陌生.html5是「新兴」的网页技术标准,目前,除IE8及其以下版本的IE浏览器之外,几乎所有主流浏览器(FireFox.Chrome. ...

  6. 解决html5 canvas 绘制字体、图片与图形模糊问题

    html5 canvas 绘制字体.图片与图形模糊问题 发生情况 多出现在高dpi设备,这意味着每平方英寸有更多的像素,如手机,平板电脑.当然很多高端台式电脑也有高分辨率高dpi的显示器. canva ...

  7. 使用html5 Canvas绘制线条(直线、折线等)

    使用html5 Canvas绘制直线所需的CanvasRenderingContext2D对象的主要属性和方法(有"()"者为方法)如下: 属性或方法 基本描述 strokeSty ...

  8. html5 canvas绘制环形进度条，环形渐变色仪表图

    html5 canvas绘制环形进度条,环形渐变色仪表图                                             在绘制圆环前,我们需要知道canvas arc() 方 ...

  9. 怎样用JavaScript和HTML5 Canvas绘制图表

    原文:https://code.tutsplus.com/zh-...原作:John Negoita翻译:Stypstive 在这篇教程中,我将展示用JavaScript和canvas作为手段,在饼状 ...

随机推荐

  1. 强大的Java Json工具类

    转自: https://blog.csdn.net/u014676619/article/details/49624165 import java.io.BufferedReader; import ...

  2. MVC思想-程序的控制流程-Struts2和SpringMVC黑马流程图

    1.初探 javaEE就是搞清前后台是怎么交互的,而控制那个交互的就被称为是:C:控制器 C负责协调调度程序如何执行的,M负责读数据的处理,比如说:验证输入的密码是否正确,是否 有这个权限.V就简单了 ...

  3. SQL Server中如何实现遍历表的记录

    SQL Server遍历表一般都要用到游标,SQL Server中可以很容易的用游标实现循环,实现SQL Server遍历表中记录. 但游标在实际的开发中都不推荐使用. 我们知道还可以借助临时表或表变 ...

  4. redis-benchmark压力测试

    redis-benchmark是redis官方提供的压测工具,安装好redis后,默认安装.使用简便. 语法: Usage: redis-benchmark [-h <host>] [-p ...

  5. 如何彻底卸载Jenkins（Windows版本）

    起因: 最近在做持续集成测试过程中遇到一个问题,之前部署的Jenkins管理员密码忘了之后无法登陆,而且删除掉tomcat下webapps文件夹中的Jenkins目录后,再次安装Jenkins后相关的 ...

  6. java的关键字：static、final

    java的 static: 性质 静态对象 非静态对象 拥有属性: 是类共同拥有的 是类各对象独立拥有的 内存分配: 内存空间上是固定的 空间在各个附属类里面分配 分配顺序: 先分配静态对象的空间 继 ...

  7. CDN、浏览器缓存

    CDN是什么? 谈到CDN的作用,可以用8年买火车票的经历来形象比喻: 8年前,还没有火车票代售点一说,12306.cn更是无从说起.那时候火车票还只能在火车站的售票大厅购买,而我所住的小县城并不通火 ...

  8. postman的Testing examples（常用方法）

    在实现接口自动测试的时候,会经常遇到接口参数依赖的问题,例如调取登录接口的时候,需要先获取登录的key值,而每次请求返回的key值又是不一样的,那么这种情况下,要实现接口的自动化,就要用到postma ...

  9. [C++ Primer] : 第11章: 关联容器

    目录 使用关联容器 关联容器概述 关联容器操作 无序容器 使用关联容器 关联容器与顺序容器有着根本的不同: 关联容器中的元素是按关键字来保存和访问的, 按顺序容器中的元素是按它们在容器中的位置来顺序保 ...

  10. jq 获取name值一样的数组

    <input type="text" value="" name="wid"/><input type="tex ...