随着Html5的迅猛发展，画布也变得越来越重要。下面我就写一个关于在canvas上画出一片星空的简单的代码的示例。

理论基础

  • 初始化一个canvas，获得一个用于绘制图形的上下文环境context。并指定为2d方式进行绘图。
  • 画一个五角星其实就是找点和连线的过程。根据几何知识，可以使用两个同心圆来方便的求得相应的坐标位置。
  • 设置状态，完成五角星的绘制过程。最后应用于整片星空，绘制很多的五角星。

封装好的五角星绘制函数

下面这个绘制的五角星的方法是可以被复用的，注释也写的比较的清楚。

/**
             * 画一个五角星的封装的函数
             * @param {Object} cxt  提供绘图的上下文的环境
             * @param {Object} r    充当绘图时小圆的半径的值
             * @param {Object} R    充当绘图时大圆的半径的值
             * @param {Object} x    绘图时x轴方向上的偏移量
             * @param {Object} y    绘图时y轴方向上的偏移量
             * @param {Object} rota 绘图时图形旋转的角度,表示顺时针的旋转方向！
             */
            function drawStar(cxt, r,R ,x,y,rota){
                cxt.beginPath();
                //使用循环的方式确定点的位置
                for(var i =0 ;i<5 ;i++){
                    //外层大圆上的五个点的位置
                    cxt.lineTo(Math.cos((18+i*72-rota)/180*Math.PI)*R+x
                    ,-Math.sin((18+i*72-rota)/180*Math.PI)*R+y);
                    //内层小圆上点的位置
                    cxt.lineTo(Math.cos((54+i*72-rota)/180*Math.PI)*r+x
                    ,-Math.sin((54+i*72-rota)/180*Math.PI)*r+y);
                }
                cxt.closePath();

                //设置一些状态
                cxt.fillStyle="bf1";
                cxt.strokeStyle="#fd5";
                cxt.lineWidth=3;
                cxt.lineJoin="round";
                cxt.fill();
                cxt.stroke();
            }

星空的代码演示

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>创建一个Canvas的小实例</title>
        <style>
            #canvas{
                border: dashed solid #321234;
                background: black;
            }
        </style>
    </head>

    <body>
        <h1>Canvas 实例</h1>
        <hr />
        <br />
        <canvas id="canvas">
            如果这段文字出现，那就说明你的浏览器不支持Canvas哟！
        </canvas>
        <script>
            window.onload= function(){
                var canvas = document.getElementById("canvas");
                canvas.width=800;
                canvas.height=800;
                var context = canvas.getContext("2d");

                //画一片星空开始吧
                for(var i=0 ;i<200;i++){
                    var R = Math.random()*10+10;
                    var x = Math.random()*canvas.width;
                    var y = Math.random()*canvas.height;
                    var r = Math.random()*360;
                    drawStar(context,R/2,R,x,y,r);
                }
            }
            /**
             * 画一个五角星的封装的函数
             * @param {Object} cxt  提供绘图的上下文的环境
             * @param {Object} r    充当绘图时小圆的半径的值
             * @param {Object} R    充当绘图时大圆的半径的值
             * @param {Object} x    绘图时x轴方向上的偏移量
             * @param {Object} y    绘图时y轴方向上的偏移量
             * @param {Object} rota 绘图时图形旋转的角度,表示顺时针的旋转方向！
             */
            function drawStar(cxt, r,R ,x,y,rota){
                cxt.beginPath();
                //使用循环的方式确定点的位置
                for(var i =0 ;i<5 ;i++){
                    //外层大圆上的五个点的位置
                    cxt.lineTo(Math.cos((18+i*72-rota)/180*Math.PI)*R+x
                    ,-Math.sin((18+i*72-rota)/180*Math.PI)*R+y);
                    //内层小圆上点的位置
                    cxt.lineTo(Math.cos((54+i*72-rota)/180*Math.PI)*r+x
                    ,-Math.sin((54+i*72-rota)/180*Math.PI)*r+y);
                }
                cxt.closePath();

                //设置一些状态
                cxt.fillStyle="bf1";
                cxt.strokeStyle="#fd5";
                cxt.lineWidth=3;
                cxt.lineJoin="round";
                cxt.fill();
                cxt.stroke();
            }
        </script>
    </body>

</html>

程序运行结果

总结

这段代码是基于在imooc上Canvas详解而制作的。在这里非常感谢作者给我的启发。另外我觉得在图形的相关的绘制过程中一些常用的而且有用的代码很是值得我们将其封装起来，以便于今后的代码的复用。省时省力还高效！

使用JavaScript在Canvas上画出一片星空的更多相关文章

  1. canvas上画出坐标集合，并标记新坐标，背景支持放大缩小拖动功能

    写在前面:项目需求,用户上传一个区位的平面图片,用户可以在图片上添加新的相机位置,并且展示之前已绑定的相机坐标位置,图片支持放大缩小&拖动的功能.新增坐标,页面展示相对canvas定位,保存时 ...

  2. （转）第02节：在Canvas上画简单的图形

    我们现在已经可以在HTML中使用Fabric.js库了,那这节我们就详细的学习一下如何在canvas上画出简单的图形. 在画东西之前我们需要了解画任何东西的基本三个步骤: 声明画布(canvas),用 ...

  3. Android中Google地图路径导航，使用mapfragment地图上画出线路(google map api v2)详解

    在这篇里我们只聊怎么在android中google map api v2地图上画出路径导航,用mapfragment而不是mapview,至于怎么去申请key,manifest.xml中加入的权限,系 ...

  4. 第五讲：使用html5中的canvas动态画出物理学上平抛运动

    <html> <head> <title>平抛运动</title> <script src="../js/jscex.jscexRequ ...

  5. Android教程：在百度地图上画出轨迹

    [日期:2013-04-14] 来源:Linux社区  作者:crazyxin1988 [字体:大 中 小]     接着上面的项目<Android访问webservice.客户端登录注册> ...

  6. 如何在canvas中画出一个太极图

    先放一个效果图: 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /&g ...

  7. WPF在圆上画出刻度线

    思路 我们可以使用Ellipse先画出一个圆当背景,然后用Canvas再叠加画上刻度线,就能得到如下的效果 我们先用Ellipse画一个橙色的圆,然后将Canvas的宽度和高度绑定到Ellipse的宽 ...

  8. [Java]在窗口界面上画出硬盘中图片文件

    利用类javax.swing.JPanel来在窗口界面上画图.图片文件通过javax.imageio.ImageIO类来获取. import java.awt.Graphics; import jav ...

  9. HTML5 canvas上画文字出现乱码

    不是这个的问题, <html> <head> <meta charset="utf-8"/> </head> 是因为从网上复制粘贴下 ...

随机推荐

  1. salt基本使用之一（1）

    1.帮助文档 以cmd函数为例子说下salt中的一些帮助信息 # 查看指定modules用法 salt '*' sys.doc cmd # 查看所有的modules列表 salt '*' sys.li ...

  2. 如何理解主函数main中变量(int argc,char *argv[])的含义

    每一个C语言的初学者,都会注意到主函数main()里的两个参数,但是初学者一般不会去关注这两个参数的具体作用,下面我们就来介绍这两个参数的具体作用. main()函数是控制台程序的入口,int mai ...

  3. Padding Oracle攻击

    最近在复现LCTF2017的一道题目,里面有一个padding oracle攻击,也算是CBC翻转攻击,这个攻击主要针对CBC加密模式的 网上有关这个攻击的博客文章很多,但是其中有一些细节可能是个人的 ...

  4. java判断A字符串是否包含B字符串

    public static void main(String[] args) { String str="ABC_001"; if(str.indexOf("ABC&qu ...

  5. Go 语言递归函数

    递归,就是在运行的过程中调用自己. 语法格式如下: func recursion() { recursion() /* 函数调用自身 */ } func main() { recursion() } ...

  6. PHP MySQL 插入数据

    PHP MySQL 插入数据 使用 MySQLi 和 PDO 向 MySQL 插入数据 在创建完数据库和表后,我们可以向表中添加数据. 以下为一些语法规则: PHP 中 SQL 查询语句必须使用引号 ...

  7. PHP 5 Date/Time 函数

    PHP Date/Time 简介 Date/Time 函数允许您从 PHP 脚本运行的服务器上获取日期和时间.您可以使用 Date/Time 函数通过不同的方式来格式化日期和时间. 注释:这些函数依赖 ...

  8. Sharding-jdbc实现分库分表

    首先在pom文件中引入需要的依赖 <dependency> <groupId>io.shardingjdbc</groupId> <artifactId> ...

  9. 重温java基础

    Java标识符 Java所有的组成部分都需要名字.类名.变量名以及方法名都被称为标识符. 关于Java标识符,有以下几点需要注意: 所有的标识符都应该以字母(A-Z或者a-z),美元符($).或者下划 ...

  10. hive分区partition（动态和静态分区混合使用; partition的简介）

    分区是hive存放数据的一种方式.将列值作为目录来存放数据,就是一个分区.这样where中给出列值时,只需根据列值直接扫描对应目录下的数据,不扫面其他不关心的分区,快速定位,查询节省大量时间.分动态和 ...