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: Data Stream as Disjoint Intervals &;&; Summary of TreeMap
Given a data stream input of non-negative integers a1, a2, ..., an, ..., summarize the numbers seen ...
.NET开源工作流RoadFlow-系统布署及注意事项
非常感谢您在百忙之中抽空来了解RoadFlow,下面我们说一下如果在自己本地搭建环境吧. 1.环境要求 数据库:sqlserver2005以上版本.服务器:IIS6.0以上,或iisexpress.d ...
UI：自定义键盘的实现
自定义我的封装键盘,并在试图控制器里对接 (解决多 输入框问题,把输入框存入到可变数组) @implementation AppDelegate - (BOOL)application:(UIAppl ...
bootstrap+masonry.js写瀑布流
最近在用bootstrap写一个网站,其中有个图文展示的页面要用到瀑布流的效果.因为项目要求,项目要以bootstrap为基准,不准私自添加内联样式.内部样式,所以,自己写瀑布流就不行了,所以,根据要 ...
Unity进阶----Lua语言知识点(2018/11/08)
国内开发: 敏捷开发: 集中精力加班堆出来第一个版本 基本没啥大的bug 国外开发: 1).需求分析: 2).讨论 3).分模块 4).框架 5).画UML图(类图class function)(e- ...
好用的漂浮广告 jquery
这是我之前准备找工作时看一书做的笔记,都是一些笔试面试中常考的重点难点问题,但比较基础,适合初学者看. 1. char c = '\72'; 中的\72代表一个字符, ...
