随着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. (转载)总结一下SQL语句中引号(')、quotedstr()、('')、format()在SQL语句中的用法

    总结一下SQL语句中引号(').quotedstr().('').format()在SQL语句中的用法以及SQL语句中日期格式的表示(#).('')在Delphi中进行字符变量连接相加时单引号用('' ...

  2. 记一次sql优化——left join不走索引问题

    sql一执行就卡住,然后就...杀进程了 看了一下表的大小 第一反应就是加索引,然后explain看了一下走什么索引了,结果很尴尬,三个表,只走了一个索引...一群人在那纠结为毛走不了索引. 无意间发 ...

  3. GC机制

    java虚拟机中的垃圾回收机制是,一个类,当该对象没有更多的应用指向它时,就会被垃圾回收器给回收,从而释放资源.该机制不可以程序员手动调用去回收某个对象,系统自动会去调用,当然程序员可以建议垃圾回收器 ...

  4. Yii2 获取URL的一些方法

    1. 获取url中的host信息: 例如:http://www.nongxiange.com/product/2.html Yii::$app->request->getHostInfo( ...

  5. java海量大文件数据处理方式

    1. 给定a.b两个文件,各存放50亿个url,每个url各占64字节,内存限制是4G,让你找出a.b文件共同的url? 方案1:可以估计每个文件安的大小为50G×64=320G,远远大于内存限制的4 ...

  6. bootstrap 栅格系统 HTTP协议 软件架构 B/S C/S 常见的WEB服务器

    Day32 bootstrap Bootstrap就是响应式布局最成功的实现,为了兼容不同的浏览器采用jQuery,为了适配不同的终端采用CSS3 Media Query (媒体查询) 1.1.1 栅 ...

  7. 如何改变hr颜色

    html中用css改变颜色,<hr style="border:0;background-color:#ff0000;height:1px;">如果不加border:0 ...

  8. Python OptionParser 使用详解（转载）

    Python使用命令行参数能使处理流程更自动化. 链接的内容讲解得十分详细:https://www.tuicool.com/articles/rUvIbi

  9. 0428-css样式

    一.CSS样式表      引入的三种方式1.内联样式:标签内部     style2.内嵌样式:<head></head>标签内部(<style></sty ...

  10. Vue 踩坑记

    参考: https://forum.vuejs.org/t/unknown-issues-in-change-event-of-radio-in-vue-2-x-webpack-2-x/11034 v ...