随着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. JavaBean实现用户登陆

    本文简单讲述使用javabean实现用户登录,包括用户登录,注册和退出等. 系统结构图 2.数据库表 create table P_USER ( id       VARCHAR2(50) not n ...

  2. 第四次C语言作业

    (一)改错题 输出三角形的面积和周长,输入三角形的三条边a.b.c,如果能构成一个三角形,输出面积area和周长perimeter(保留2位小数):否则,输出"These sides do ...

  3. 我在 B 站学机器学习（Machine Learning）- 吴恩达（Andrew Ng）【中英双语】

    我在 B 站学机器学习(Machine Learning)- 吴恩达(Andrew Ng)[中英双语] 视频地址:https://www.bilibili.com/video/av9912938/ t ...

  4. 简易js进度条

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. HTTP 协议详解(超级经典)-转

    什么是HTTP协议 协议是指计算机通信网络中两台计算机之间进行通信所必须共同遵守的规定或规则,超文本传输协议(HTTP)是一种通信协议,它允许将超文本标记语言(HTML)文档从Web服务器传送到客户端 ...

  6. 使用linux部署tomcat项目

    1.下载对应的Tomcat服务器包 Apache Tomcat官网下载: http://tomcat.apache.org/download-70.cgi 比如我们使用的是  apache-tomca ...

  7. React框架 dva 和 mobx 的使用感受

    最近在用react写web项目,领导为了让前端便于维护要求都用react作为开发基础,框架选型不限.在使用 react 的时候或多或少会接触到状态管理,从开始学 react 到现在也挺久了,做一些前端 ...

  8. API说明书规范

    目录 1       前言 1.1         编写目的 1.2        预期读者 1.3         关于API设计开发 2       API公共说明 3       文档API索引 ...

  9. sololearn的c++学习记录_4m11d

    Function Templates Functions and classes help to make programs easier to write, safer, and more main ...

  10. PHP 序列化/反序列化的方法函数

    我们在开发的过程中常常遇到需要把对象或者数组进行序列号存储,反序列化输出的情况.特别是当需要把数组存储到mysql数据库中时,我们时常需要将数组进行序列号操作. 序列化(串行化):是将变量转换为可保存 ...