canvas画一颗星星：

规则的星星有内切圆和外切圆，每两个点之间的角度是固定的，因此可得到星星的每个点的坐标，画出星星。

function drawStars(x,y,radius1,radius2,num,drawType,color){

var angle = 360/(num*2);

var arr = [];

for(var i=0;i

var starObj = {};

if(i%2==0){

starObj.x = x+radius1*Math.cos(i*angle*Math.PI/180);

starObj.y = y+radius1*Math.sin(i*angle*Math.PI/180);

}else{

starObj.x = x+radius2*Math.cos(i*angle*Math.PI/180);

starObj.y = y+radius2*Math.sin(i*angle*Math.PI/180);

}

arr.push(starObj);

}

cxt.beginPath();

cxt.fillStyle=color;

cxt.strokeStyle = color;

cxt.moveTo(arr[0].x,arr[0].y);

for(var i=1;i

cxt.lineTo(arr[i].x,arr[i].y);

}

cxt.closePath();

if(drawType=="fill"){

cxt.fill();

}else{

cxt.stroke();

}

}

给星星添加随机属性：

var starArr=[]; //多个星星对象

for(var i=0;i<5;i++){

var starObj={

radius1:10+5*Math.random(),

radius2:2+4*Math.random(),

x:30+(canvas.width-60)*Math.random(),

y:30+(canvas.height-60)*Math.random(),

num:4,

angle:360*Math.random(),

changeAngle:-5+10*Math.random(),

color:"rgb("+parseInt(255*Math.random())+","+parseInt(255*Math.random())+","+parseInt(255*Math.random())+")"

}

starArr.push(starObj);

}

随机产生星星并添加动画(闪烁、旋转等)：

setInterval(function(){

cxt.clearRect(0,0,500,500);

for(var i=0;i

starArr[i].angle+=starArr[i].changeAngle;

cxt.save();

cxt.beginPath();

cxt.translate(starArr[i].x, starArr[i].y);

cxt.rotate(starArr[i].angle * Math.PI / 180);

cxt.scale(Math.sin(starArr[i].angle * Math.PI / 180), Math.sin(starArr[i].angle * Math.PI / 180));

cxt.globalAlpha = Math.abs(Math.sin(starArr[i].angle * Math.PI / 180));

drawStars(0,0,starArr[i].radius1, starArr[i].radius2, starArr[i].num, "fill", "white");

cxt.restore();

}

},30);

到此，随机产生有动画的星星就完了。

下面还补充点，当我在angular中使用canvas画星星时，我的做法时window.οnlοad=function(canvas())，FF等均正常，在IE9中报错，canvas.getContext('2d')为null，不知道是什么原因，我在directive中用canvas，canvas.getContext('2d')不为null，但是没法画出星星，没找到原因，最后曲线救国。。在canvas下加了个隐藏的图片，图片的onload执行canvas()，够曲折的方法，如果有更好的方法或是知道原因的，欢迎留言提供，不甚感激。

canvas画随机的四位验证码

效果图如下:

使用javascript和canvas画月半弯

使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5 查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm 以下是代码:

樱花的季节，教大家用canvas画出飞舞的樱花树

又到了樱花的季节,教大家使用canvas画出飞舞的樱花树效果. 废话少说,先看效果. 演示效果地址:http://suohb.com/work/tree4.htm 查看演示效果 第一步,我们先画出一棵 ...

撩妹技能 get，教你用 canvas 画一场流星雨

开始 妹子都喜欢流星,如果她说不喜欢,那她一定是一个假妹子. 现在就一起来做一场流星雨,用程序员的野路子浪漫一下. 要画一场流星雨,首先,自然我们要会画一颗流星. 玩过 canvas 的同学,你画圆画 ...

canvas 画圈 demo

html代码:

踩个猴尾不容易啊 Canvas画个猴子

踩个猴尾不容易啊  Canvas画个猴子

Canvas画椭圆的方法

虽然标题是画椭圆,但是我们先来说说Canvas中的圆 相信大家对于Canvas画圆都不陌生   oGC.arc(400, 300, 100, 0, 2*Math.PI, false); 如上所示,直接 ...

随机推荐

Java基础-ArrayList和LinkedList的区别

大致区别:  1.ArrayList是实现了基于动态数组的数据结构,LinkedList基于链表的数据结构. 2.对于随机访问get和set,ArrayList觉得优于LinkedList,因为Lin ...

Leetcode&colon; Data Stream as Disjoint Intervals &amp&semi;&amp&semi; Summary of TreeMap

Given a data stream input of non-negative integers a1, a2, ..., an, ..., summarize the numbers seen ...

&period;NET开源工作流RoadFlow-系统布署及注意事项

非常感谢您在百忙之中抽空来了解RoadFlow,下面我们说一下如果在自己本地搭建环境吧. 1.环境要求 数据库:sqlserver2005以上版本.服务器:IIS6.0以上,或iisexpress.d ...

UI：自定义键盘的实现

自定义我的封装键盘,并在试图控制器里对接 (解决多 输入框问题,把输入框存入到可变数组) @implementation AppDelegate - (BOOL)application:(UIAppl ...

bootstrap&plus;masonry&period;js写瀑布流

最近在用bootstrap写一个网站,其中有个图文展示的页面要用到瀑布流的效果.因为项目要求,项目要以bootstrap为基准,不准私自添加内联样式.内部样式,所以,自己写瀑布流就不行了,所以,根据要 ...

Unity进阶----Lua语言知识点&lpar;2018&sol;11&sol;08&rpar;

国内开发: 敏捷开发: 集中精力加班堆出来第一个版本 基本没啥大的bug 国外开发: 1).需求分析: 2).讨论 3).分模块 4).框架 5).画UML图(类图class function)(e- ...

好用的漂浮广告 jquery

这是我之前准备找工作时看一书做的笔记,都是一些笔试面试中常考的重点难点问题,但比较基础,适合初学者看. 1. char c = '\72'; 中的\72代表一个字符, ...