使用JavaScript在Canvas上画出一片星空

随着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上画出一片星空相关推荐

用web audio api 在canvas上画出音频的音轨
上一篇讲了一下如何用web audio api实现播放,这一篇讲一下如何画音轨吧
cufon，在网页上画出特殊字体
为什么80%的码农都做不了架构师?>>> 设计师们有时会使用特殊字体让网页更好看,但浏览器通常只支持Arial.Helvetica等通用字体.那么通常的解决办法就是将特殊字体做 ...
Unity在Canvas上画线（Draw Line）实现
# 前言目前Unity官方提供的UI扩展包中包含了UILineRenderer组件,本篇实现与UILineRenderer实现一致,主要讲解其基本使用与实现过程.不想看的同学可以直接下载官方扩展包. ...
html中矩形坐标,js怎么根据坐标在图片上画出矩形框？
如图本地上传的图片,并点击获取到这个图片里每个地方的坐标,根据4个角坐标在图片上画出矩形框,该怎么画?大神支招. 我图片是显示在div里的,是不是应该用canvas显示图片? 代码: Document ...
编写一个APPlet，再随机的位置上画出几个随机大小的矩形。
编写一个APPlet,再随机的位置上画出几个随机大小的矩形.如果一个矩形的宽度小于高度,则矩形填充成亮紫色:如果矩形的宽度大于高度,则矩形填充为浅黄色:如果矩形的宽度和高度相等,则只用红色线画出矩形的 ...
怎样固定计算机画图曲线,如何在电脑上画出固定长度的线段
公告: 为响应国家净网行动,部分内容已经删除,感谢读者理解. 话题:如何在电脑上画出固定长度的线段回答:这个要看你采用什么软件来画线段了既然你是用word的话,稍微有点烦:方法为:在word里搞出绘 ...
用python的opencv库在图片上画出蓝底黑字的文本框
以下是使用Python的OpenCV库实现在图片上绘制的示例代码: import cv2# 读入图片 img = cv2.imread('example.jpg')# 在图片上绘制红色矩形框 cv2. ...
python：基于matplotlib在坐标轴上画出车辆路径规划示意图（箭头、中文图例）
车辆路径规划问题的研究一般较常遇到需要画出车辆路径示意图,已知有每辆车的真实坐标序列,那么如何利用在一个空白的坐标轴上画出路径呢? 1.准备 1.1 matplotlib引入一般情况下只引入plt就 ...
html5 canvas 画阿迪达斯logo,canvas绘图画出了的美团LOGO
接下来是用HTML新标签canvas绘图画出了的美团LOGO. canvas练习 var canvas=document.getElementById('myfirstcanvas'); canvas ...

使用JavaScript在Canvas上画出一片星空

理论基础

封装好的五角星绘制函数

星空的代码演示

程序运行结果

总结

使用JavaScript在Canvas上画出一片星空相关推荐

最新文章

热门文章