html5实例-闪烁的星星

一、绘制五角星

1.1页面结构

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>绘制五角星</title><style type="text/css">canvas{background: #00113F;}</style><script type="text/javascript">window.onload = function() {var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');}</script></head><body><canvas id="canvas" width="500" height="500"></canvas></body>
</html>

1.2封装一个绘制多边形的函数

在绘制之前首先我们需要画图分析一下，如何绘制一个多边形

由上图我们可以知道，五角星其实是由10个点连接起来的，而五角星外角的五个点是在一个大圆上，内角的五个点也是在一个小圆上，并且这两个圆的圆心是一样的。因此我们只要知道这两个圆的半径以及点的角度（角度等于360度/点的个数），即可绘制出这些点。
由上面分析可知，我们只需要知道原点坐标，大圆的半径，小圆的半径，以及确定需要绘制的边数，即可绘制出一个多边形，在这里我们默认绘制五边形
现在我们编写绘制多边形的函数，首先我们需要设置一些默认值

  function drawStart(Object) {  　　/*设置一些默认值*/Object = Object || {};Object.x = Object.x; //多边形的x轴坐标Object.y = Object.y; //多边形的y轴坐标Object.radius1 = Object.radius1; //多边形外面大圆的半径Object.radius2 = Object.radius2; //多边形内部小圆的半径Object.angle = 360 / (Object.num * 2); //每个点所对应的角度Object.num = Object.num || 5; //设置绘制几边形,默认为五边形Object.drawType = Object.drawType || 'fill'; //绘制填充多边形还是不填充多边形Object.fillStyle = Object.fillStyle || '#fff'; //设置多边形的填充颜色Object.strokeStyle = Object.strokeStyle || '#ccc' //设置多边形的边的颜色*/}

接下来我们需要确定五角星的所有点的坐标，并且把每个点的信息存放在对象里面，然后放在一个数组中

    var arr = [];for(var i = 0; i < Object.num * 2; i++) {var oStar = {};if(i % 2 == 0) { //判断是小圆上的点还是大圆上的点oStar.x = Object.x + Object.radius1 * Math.cos(i * Object.angle * Math.PI / 180); //x坐标：圆点横坐标+半径*cos(弧度)oStar.y = Object.y + Object.radius1 * Math.sin(i * Object.angle * Math.PI / 180);//y坐标：圆点纵坐标+半径*sin(弧度)} else {oStar.x = Object.x + Object.radius2 * Math.cos(i * Object.angle * Math.PI / 180);oStar.y = Object.y + Object.radius2 * Math.sin(i * Object.angle * Math.PI / 180);}arr.push(oStar);}

再接下来我们把这些点利用直线连起来就可以绘制一个五角星了

    /*开始绘制多边形*/context.beginPath();context.moveTo(arr[0].x, arr[0].y);for(var i = 0; i < arr.length; i++) {context.lineTo(arr[i].x, arr[i].y);}context.closePath(); //关闭路径可以使首尾节点连接起来if(Object.drawType == 'fill') { //判断需不需要填充多边形context.fillStyle = Object.fillStyle;context.strokeStyle = Object.strokeStyle;context.stroke();context.fill();} else if(Object.drawType == 'stroke') {context.strokeStyle = Object.strokeStyle;context.stroke();}

二、让星星闪烁

2.1 canvas图形合成api

2.2设置多个星星的参数

利用for语句循环遍历50次，每循环一次设置一个星星的参数，然后把这些参数放在一个数组中

    var starArr = [];for(var i = 0; i < 50; i++) {var oStar2 = {x: 30 + (canvas.width - 60) * Math.random(),y: 30 + (canvas.height - 60) * Math.random(),radius1: 10 + 5 * Math.random(),radius2: 5,                        angle1: 360 * Math.random(), //初始角度changeAngle: -5 + 10 * Math.random(), //每次旋转的角度
        }starArr.push(oStar2);}

让星星每60ms变换一次

    setInterval(function() {context.clearRect(0, 0, 500, 500);for(var i = 0; i < starArr.length; i++) {starArr[i].angle1 += starArr[i].changeAngle;context.save(); //保存之前的绘图环境
            context.beginPath();context.translate(starArr[i].x, starArr[i].y); context.rotate(starArr[i].angle1 * Math.PI / 180) //缩放context.scale(Math.sin(starArr[i].angle1 * Math.PI / 180), Math.sin(starArr[i].angle1 * Math.PI / 180));context.globalAlpha = Math.abs(Math.sin(starArr[i].angle1 * Math.PI / 180));drawStart({x: 0,y: 0,radius1: starArr[i].radius1,radius2: starArr[i].radius2,num: 5});context.restore();}}, 60)

完整代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>绘制五角星</title><style type="text/css">canvas {background: #00113F;}</style><script type="text/javascript">window.onload = function() {var canvas = document.getElementById('canvas');var context = canvas.getContext('2d');function drawStart(Object) {/*设置一些默认值*/Object = Object || {};Object.x = Object.x; //多边形的x轴坐标
                    Object.y = Object.y; //多边形的y轴坐标
                    Object.radius1 = Object.radius1; //多边形外面大圆的半径
                    Object.radius2 = Object.radius2; //多边形内部小圆的半径
                    Object.angle = 360 / (Object.num * 2);Object.num = Object.num || 5; //设置绘制几边形,默认为五边形
                    Object.drawType = Object.drawType || 'fill'; //绘制填充多边形还是不填充多边形
                    Object.fillStyle = Object.fillStyle || '#fff'; //设置多边形的填充颜色
                    Object.strokeStyle = Object.strokeStyle || '#ccc' //设置多边形的边的颜色*/var arr = [];for(var i = 0; i < Object.num * 2; i++) {var oStar = {};if(i % 2 == 0) { //判断是小圆上的点还是大圆上的点
                            oStar.x = Object.x + Object.radius1 * Math.cos(i * Object.angle * Math.PI / 180); //x坐标：圆点横坐标+半径*cos(弧度)
                            oStar.y = Object.y + Object.radius1 * Math.sin(i * Object.angle * Math.PI / 180); //y坐标：圆点纵坐标+半径*sin(弧度)
                        } else {oStar.x = Object.x + Object.radius2 * Math.cos(i * Object.angle * Math.PI / 180);oStar.y = Object.y + Object.radius2 * Math.sin(i * Object.angle * Math.PI / 180);}arr.push(oStar);}/*开始绘制多边形*/context.beginPath();context.moveTo(arr[0].x, arr[0].y);for(var i = 0; i < arr.length; i++) {context.lineTo(arr[i].x, arr[i].y);}context.closePath(); //关闭路径可以使首尾节点连接起来if(Object.drawType == 'fill') { //判断需不需要填充多边形
                        context.fillStyle = Object.fillStyle;context.strokeStyle = Object.strokeStyle;context.stroke();context.fill();} else if(Object.drawType == 'stroke') {context.strokeStyle = Object.strokeStyle;context.stroke();}}var starArr = [];for(var i = 0; i < 50; i++) {var oStar2 = {x: 30 + (canvas.width - 60) * Math.random(),y: 30 + (canvas.height - 60) * Math.random(),radius1: 10 + 5 * Math.random(),radius2: 5,angle1: 360 * Math.random(), //初始角度
                        changeAngle: -5 + 10 * Math.random(), //每次旋转的角度
                    }starArr.push(oStar2);}setInterval(function() {context.clearRect(0, 0, 500, 500);for(var i = 0; i < starArr.length; i++) {starArr[i].angle1 += starArr[i].changeAngle;context.save(); //保存之前的绘图环境
                        context.beginPath();context.translate(starArr[i].x, starArr[i].y);context.rotate(starArr[i].angle1 * Math.PI / 180) //缩放
                        context.scale(Math.sin(starArr[i].angle1 * Math.PI / 180), Math.sin(starArr[i].angle1 * Math.PI / 180));context.globalAlpha = Math.abs(Math.sin(starArr[i].angle1 * Math.PI / 180));drawStart({x: 0,y: 0,radius1: starArr[i].radius1,radius2: starArr[i].radius2,num: 5});context.restore();}}, 60)}</script></head><body><canvas id="canvas" width="500" height="500"></canvas></body>
</html>

效果演示

点击预览demo

转载于:https://www.cnblogs.com/Anne1991/p/6606396.html

html5实例-闪烁的星星相关推荐

html5测试 2345,HTML5实例测试
HTML5对于浏览器来说,意味着浏览器层次上的定位,当然它也是浏览器性能所不可获取的.那么浏览器中,HTML5具有哪些主要特点?两大特点:首先,强化了Web网页的表现性能.其次,追加了本地数据库等We ...
Linux操作系统下，在终端打印出闪烁的星星图案
Linux系统下,在终端打印出闪烁的星星图案. 一.首先需要耐心,使用输出语句先"弄"出一个星星图案 (我是为了打印出来的星星是在终端中间,所以这样子敲的,可根据自己想法完成) 二 ...
HTML5实例教程——简易涂鸦板-何韬-专题视频课程
HTML5实例教程--简易涂鸦板-6858人已学习课程介绍用CANVES制作一个涂鸦板,让初学者初步了解HTML5的语言与功能. 课程收益快速学会涂鸦板的做法,同时对HT ...
OpenGL_Qt学习笔记之_07(闪烁的星星)
OpenGL_Qt学习笔记之_07(闪烁的星星) 这一小节我们要完成的任务是:将一张背景是黑色,中间是白亮色的星星图片和五颜六色的颜色进行色彩融合,变成一颗彩色的星星.并且让这些星星自转和公转,可以控 ...
java随机星星怎么闪_canvas画随机闪烁的星星
canvas画一颗星星: 规则的星星有内切圆和外切圆,每两个点之间的角度是固定的,因此可得到星星的每个点的坐标,画出星星. function drawStars(x,y,radius1,radius2 ...
字中字效果-html5实例
用html5实现如图字中有字效果实现思路:用canvas输出文字,然后分析像素点,根据像素点输出文字. 核心代码: var canvas;var ctx;var tex;var blankStr = ...
闪烁的星星(Nehe)
以下代码演示与Nehe教程第九课中一样的效果.第十课中三维的暂不实现.主要使用纹理贴图相关方面知识. WStar.h #pragma once #include <QtOpenGL/QtOpen ...
【web素材】05—13款炫酷的HTML5实例动画
素材整理 | 杨小二前言在之前的文章中,我也跟大家分享过关于CSS3以及HTML5制作的一些动画效果,虽然这些动画效果,可能在实际项目中根本不会应用到,但是,我们通过这些练习,可以帮助我们更好的理 ...
HTML5实例教程:OL标签的start属性和reversed属性
在HTML5中的OL被改良了,为它增加了两个新属性. start属性: start属性用来定义列表编号的起始位置,比如下面的代码,列表将从50开始51...55以此类推 <ol start=&q ...

html5实例-闪烁的星星

一、绘制五角星

1.1页面结构

1.2封装一个绘制多边形的函数

二、让星星闪烁

2.1 canvas图形合成api

2.2设置多个星星的参数

html5实例-闪烁的星星相关推荐

最新文章

热门文章