随着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. Python作业之购物车

    作业之购物车 购物车的要求如下: 输入总金额 选择购买的商品,金额足够时,把选择的商品添加到购物车,金额不足时,进行提示,商品将不会添加到购物车 随时可以退出程序,同时输出已购买的商品 具体代码如下: ...

  2. TCP/IP学习笔记__mbuf

    Socket发送和接收数据都是写入和读取mbuf(存储器缓存)来完成的.下面着重介绍下Sendto函数与mbuf的关系: 以UDP协议为例: 1.UDP的输出执行过程: UDP的输出执行过程 2.协议 ...

  3. 【python进阶】Garbage collection垃圾回收2

    前言 在上一篇文章[python进阶]Garbage collection垃圾回收1,我们讲述了Garbage collection(GC垃圾回收),画说Ruby与Python垃圾回收,Python中 ...

  4. 网络协议 finally{ return问题 注入问题 jdbc注册驱动问题 PreparedStatement 连接池目的 1.2.1DBCP连接池 C3P0连接池 MYSQL两种方式进行实物管理 JDBC事务 DBUtils事务 ThreadLocal 事务特性 并发访问 隔离级别

    1.1.1 API详解:注册驱动 DriverManager.registerDriver(new com.mysql.jdbc.Driver());不建议使用 原因有2个: >导致驱动被注册2 ...

  5. EXISTS的使用详解

    .exists的使用场合: exists 用于只能用于子查询,可以替代in,若匹配到结果,则退出内部 查询,并将条件标志为true,传回全部结果资料,in 不管匹配到匹配不到都 全部匹配完毕,使用ex ...

  6. 如何搭建samba服务？

    为了日后便于查询,本文所涉及到的所有命令集合如下: chkconfig iptables off #关闭防火墙命令 在Centos7中使用的是chkconfig firewalld off seten ...

  7. page1

    1.1 常用的客户端技术:HTML. CSS. 客户端脚本技术 1.2 常用的服务器端技术:CGI .ASP .PHP (一种开发动态网页技术).ASP.NET(是一种建立动态web应用程序的技术,是 ...

  8. git使用之错误分析及解决（持续更新）

    错误一: 使用 $ git push -u origin master 出现如下错误: error: src refspec master does not match any. error: fai ...

  9. MySQL 数学函数

    MySQL 数学函数 所有的数学函数在发生错误的情况下,均返回 NULL. -元减.改变参数的符号 mysql> SELECT - 2; -> -2 注意,如果这个操作符被用于一个 BIG ...

  10. SpringMVC总结(SSM)

    Day1 1. springMvc:是一个表现层框架: 作用:就是从请求中接收传入的参数, 将处理后的结果数据返回给页面展示2. ssm整合: 1)Dao层 pojo和映射文件以及接口手动编写(或使用 ...