Canvas 入门案例
五、 Canvas 入门案例
1. canvas 圆形绘制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas圆形绘制</title>
<style>
* {
margin: 0;
}
#canvas {
display: block;
margin: 50px auto;
background-color: #ffffff;
}
</style>
</head>
<body bgcolor="black">
<canvas id="canvas" width="500" height="500"></canvas>
</body>
<script>
var cxt = canvas.getContext('2d');//画笔
var color = cxt.createLinearGradient(0, 200, 0, 300);
color.addColorStop(0, 'pink');
color.addColorStop(1, 'red');
cxt.shadowColor = 'red';
cxt.shadowOffsetX = 1;
cxt.shadowOffsetY = 1;
cxt.shadowBlur = 50;//模糊度
cxt.save();//保存路径
cxt.fillStyle = color;//填充颜色
cxt.beginPath();//开始路径
cxt.arc(250, 250, 50, 0, Math.PI * 2, false);//绘制圆(x,y,r,0deg,360deg,false/true);
cxt.closePath();//闭合路径
cxt.fill();//填充方法
cxt.restore();//释放路径
</script>
</html>
2. canvas 线条绘制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas线条绘制</title>
<style>
*{
margin: 0;
}
#canvas{
display: block;
margin: 50px auto;
background-color: #ffffff;
}
</style>
</head>
<body bgcolor="black">
<canvas id="canvas" width="500" height="500"></canvas>
</body>
<script>
var cxt = canvas.getContext('2d');//画笔
//线条颜色渐变
var color = cxt.createLinearGradient(100,200,300,200);
color.addColorStop(0,'yellow');
color.addColorStop(1,'red');
cxt.save();//保存路径
cxt.strokeStyle = color;//线条颜色
cxt.lineWidth = 1;//线条宽度
cxt.beginPath();//开始路径
cxt.moveTo(100,200);//起点坐标 绘制线;
cxt.lineTo(300,200);//终点坐标 绘制线;
cxt.closePath();//闭合路径
cxt.stroke();//线条颜色方法
cxt.restore();//释放路径
</script>
</html>
3. canvas 矩形绘制
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>canvas矩形绘制</title>
<style>
* {
margin: 0;
}
#canvas {
display: block;
margin: 50px auto;
background-color: #ffffff;
}
</style>
</head>
<body bgcolor="black">
<canvas id="canvas" width="500" height="500"></canvas>
</body>
<script>
var cxt = canvas.getContext('2d');//画笔
var color = cxt.createLinearGradient(0, 200, 0, 300);
color.addColorStop(0, 'pink');
color.addColorStop(1, 'red');
cxt.shadowColor = 'red';
cxt.shadowOffsetX = 1;
cxt.shadowOffsetY = 1;
cxt.shadowBlur = 50;//模糊度
cxt.save();//保存路径
cxt.fillStyle = color;//填充颜色
cxt.beginPath();//开始路径
cxt.rect(200,200,6,160);//绘制矩形(x,y,w,h);
cxt.closePath();//闭合路径
cxt.fill();//填充方法
cxt.restore();//释放路径
</script>
</html>
4. 粒子连线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>粒子连线</title>
</head>
<body>
<canvas id="canvas" style="background-color: black"></canvas>
</body>
<script>
function Star() {
this.cxt = canvas.getContext('2d');
console.log(this.cxt);
this.CircleNum = 200;//粒子个数
this.data = [];//存储粒子的数据
}
Star.prototype = {
//初始化
init: function () {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
this.cW = canvas.width;
this.cH = canvas.height;
for (var i = 0; i < this.CircleNum; i++) {
this.data[i] = {
//粒子位置
x: Math.random() * this.cW,
y: Math.random() * this.cH,
//粒子速度增量
sX: -0.3 + Math.random() * 0.6,
sY: -0.3 + Math.random() * 0.6,
};
// this.drawCircle(this.data[i].x, this.data[i].y);
}
},
//绘制粒子
drawCircle: function (x, y) {
var cxt = this.cxt;
cxt.save();//保存路径
cxt.fillStyle = 'pink';//填充颜色
cxt.beginPath();//开始路径
cxt.arc(x, y, 1, 0, Math.PI * 2, false);//绘制圆(x,y,r,0deg,360deg,false/true);
cxt.closePath();//闭合路径
cxt.fill();//填充方法
cxt.restore();//释放路径
},
//移动粒子以及粒子连线
moveCircle: function () {
var self = this;
var cxt = self.cxt;
var cW = self.cW;
var cH = self.cH;
cxt.clearRect(0, 0, cW, cH);//先清空画布
for (var i = 0; i < self.CircleNum; i++) {
self.data[i].x += self.data[i].sX;
self.data[i].y += self.data[i].sY;
//边界的碰撞检测
if (self.data[i].x > cW || self.data[i].x < 0)
self.data[i].sX = -self.data[i].sX;
if (self.data[i].y > cH || self.data[i].y < 0)
self.data[i].sY = -self.data[i].sY;
self.drawCircle(self.data[i].x, self.data[i].y);
//判断粒子连线:连成三角形,勾股定理
for (var j = 0; j < self.CircleNum; j++) {//下一个点
if (Math.pow(self.data[i].x - self.data[j].x, 2) +
Math.pow(self.data[i].y - self.data[j].y, 2) <= 60 * 60) {
self.drawLine(self.data[i].x, self.data[i].y, self.data[j].x, self.data[j].y);
}
}
//鼠标移入进行连线
var mouse = document.getElementById("canvas");
mouse.onmousemove = function (event) {//获取鼠标坐标
var e = event || window.event;
self.mouseX = Math.floor(e.clientX);//e.pageX/pageY
self.mouseY = Math.floor(e.clientY);
};
//console.log(self.mouseX+":"+self.mouseY );
if (Math.pow(self.data[i].x - self.mouseX, 2) +
Math.pow(self.data[i].y - self.mouseY, 2) <= 100 * 100) {
self.drawLine(self.data[i].x, self.data[i].y, self.mouseX, self.mouseY);
}
}
},
//绘制线条
drawLine: function (x1, y1, x2, y2) {
var cxt = this.cxt;
//线条颜色渐变
var color = cxt.createLinearGradient(x1, y1, x2, y2);
color.addColorStop(0, '#0ff');
color.addColorStop(1, '#06f');
cxt.save();//保存路径
cxt.strokeStyle = color;//线条颜色
cxt.globalCompositeOperation = "lighter";
cxt.lineWidth = .1;//线条宽度
cxt.beginPath();//开始路径
cxt.moveTo(x1, y1);//起点坐标 绘制线;
cxt.lineTo(x2, y2);//终点坐标 绘制线;
cxt.closePath();//闭合路径
cxt.stroke();//线条颜色方法
cxt.restore();//释放路径
}
};
var star = new Star();//实例化对象
star.init();
/* setInterval(function () {
star.moveCircle();
}, 6);*/
function render() {
star.moveCircle();
requestAnimationFrame(render);//请求帧动画, 回调稳步执行
}
render();
</script>
</html>
5. 鼠标滑动冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="KeyWords" content="">
<meta name="Description" content="">
<title>canvas鼠标滑动气泡</title>
</head>
<body>
<canvas id="canvas" style="background-color: black"></canvas>
</body>
<script>
(function () {
function Bubble(x,y) {
this.cxt = canvas.getContext('2d');
this.x = x;
this.y = y;
this.r = Math.random() * 90;
this.color = "#"+Math.floor(Math.random()*1000);
this.sX = -2 + Math.random() * 4;
this.sY = -2 + Math.random() * 4;
}
Bubble.prototype = {
//初始化canvas
init: function () {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
this.cW = canvas.width;
this.cH = canvas.height;
},
//画气泡
drawBubble: function () {
var cxt = this.cxt;
cxt.save();
cxt.fillStyle = this.color;
cxt.globalCompositeOperation = "lighter";//颜色叠加方案xor
cxt.beginPath();
cxt.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);//false逆时针
cxt.closePath();
cxt.fill();
cxt.restore();
},
//鼠标滑动气泡
moveBubble: function () {
var self = this;
self.x +=self.sX;
self.y +=self.sY;
self.r *=0.96;
},
//按键恢复气泡的大小
change:function () {
this.r = 90;
}
};
var bubbleList = [];//储存气泡的容器
var bubble = new Bubble();
bubble.init();
canvas.addEventListener("mousemove", function (e) {
bubbleList.push(new Bubble(e.clientX, e.clientY));
});
function render() {
bubble.cxt.clearRect(0,0,bubble.cW,bubble.cH);
bubbleList.forEach(function (ball) {//绘制操作
ball.drawBubble();
ball.moveBubble();
});
for (var i in bubbleList){//释放空间,维护操作
if (bubbleList[i].r == 0.001)
bubbleList.splice(i,1);
}
requestAnimationFrame(render);
}
render();
window.addEventListener("keydown",function (e) {//按键还原气泡
if (e.keyCode =='32'){
bubbleList.forEach(function (ball) {
ball.change();
});
}
});
})();
</script>
</html>
6. 彩虹雨
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas雨滴</title>
<style>
* {
padding: 0;
margin: 0;
}
</style>
</head>
<style>
</style>
<body>
<canvas id="canvas" style="background-color: black">
<audio src="下雨声.mp3" controls autoplay="autoplay" loop="loop"></audio>
</canvas>
</body>
<script>
(function () {
function Rain() {
this.cxt = canvas.getContext('2d');
this.rainData = {
x: random(0, window.innerWidth),
y: random(-1, 0),
vX: random(8, 16),
vY: random(16, 32),
r: random(2, 6),
h: -60,
};
this.color = {
red: Math.floor(random(0, 255)),
green: Math.floor(random(0, 255)),
black: Math.floor(random(0, 255)),
};
}
function random(min, max) {
return min + Math.random() * (max - min);
}
Rain.prototype = {
//初始化
init: function () {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
this.cW = canvas.width;
this.cH = canvas.height;
this.cloudNum = 66;
this.cloudData = [];
for (var i = 0; i < this.cloudNum; i++)
this.cloudData[i] = {
x: random(-100, 1300),
y: random(360, 600),
r: random(20, 60),
};
},
//空中雨滴
drawRain: function () {
var cxt = this.cxt;
var c = this.color;
var data = this.rainData;
var color = cxt.createLinearGradient(data.x, data.y, data.x, data.y + data.h);
color.addColorStop(0, "rgba(" + c.red + "," + c.green + "," + c.black + "," + "1)");
color.addColorStop(1, "rgba(" + c.red + "," + c.green + "," + c.black + "," + "0.1)");
cxt.save();
cxt.fillStyle = color;
cxt.beginPath();
cxt.rect(data.x, data.y, 1, data.h);
cxt.closePath();
cxt.fill();
cxt.restore();
},
moveRain: function () {
var flag,
inX,
inY,
lastX;
for (var i = 0; i < rain.cloudNum; i++) { //碰撞检测
if (Math.pow(rain.cloudData[i].x - this.rainData.x, 2) + Math.pow(rain.cloudData[i].y - this.rainData.y, 2) <= rain.cloudData[i].r * rain.cloudData[i].r) {
flag = true;
inX = this.rainData.x;
inY = this.rainData.y;
break;
} else {
flag = false;
}
}
//console.log(flag);
if (flag) {
this.rainData.h = 0;
lastX = rain.cloudData[i].x;
this.rainData.y -= this.rainData.vY * random(0, 6);
this.rainData.x += (this.rainData.x > lastX ? this.rainData.vX : -this.rainData.vX);
this.drawCircle(inX, inY - this.rainData.r, this.rainData.r, this.color.red, this.color.green, this.color.black);
} else {
if (this.rainData.h > -60)
this.rainData.h -= 6;
this.rainData.y += this.rainData.vY;
}
},
//云层雨滴
drawCircle: function (x, y, r, red, green, black) {
var cxt = this.cxt;
cxt.save();
cxt.fillStyle = "rgb(" + red + "," + green + "," + black + ")";
cxt.shadowColor = "rgb(" + red + "," + green + "," + black + ")";
cxt.shadowBlur = 30;
cxt.globalCompositeOperation = 'lighter';
cxt.beginPath();
cxt.arc(x, y, r, 0, Math.PI * 2, false);
cxt.closePath();
cxt.fill();
cxt.restore();
},
//云层
drawCloud: function (x, y, r) {
this.drawCircle(x, y, r, 15, 15, 15);
},
//云层移动与碰撞检测
moveCloud: function () {
var data = this.cloudData;
for (var i = 0; i < this.cloudNum; i++) {
data[i].x += 0.8;
if (data[i].x - data[i].r > this.cW)
data[i].x = -data[i].r;
data[i].r *= random(0.9999, 1);
if (data[i].r < 20 || data[i].r > 60)
data[i].r = random(20, 60);
this.drawCloud(data[i].x, data[i].y, data[i].r);
}
},
};
var rain = new Rain();
rain.init();
var rainArr = [];
function produce() {
for (var i = 0; i < 2; i++)
rainArr.push(new Rain());
}
function render() {
rain.cxt.clearRect(0, 0, rain.cW, rain.cH);
produce();
rainArr.forEach(function (rainer) {
rainer.drawRain();
rainer.moveRain();
});
rain.drawRain();
rain.moveCloud();
//回收机制
for (var i in rainArr) {
if (rainArr[i].rainData.y > rain.cH || rainArr[i].rainData.x > rain.cW)
rainArr.splice(i, 1);
}
//console.log(rainArr.length);
requestAnimationFrame(render);
}
render();
}
)();
</script>
</html>
Canvas 入门案例的更多相关文章
- Canvas入门（1）：绘制矩形、圆、直线、曲线等基本图形
来源:http://www.ido321.com/968.html 一.Canvas的基础知识 Canvas是HTML 5中新增的元素,专门用于绘制图形.canvas元素就相当于一块“画布”,一块无色 ...
- SpringMVC入门案例及请求流程图（关于处理器或视图解析器或处理器映射器等的初步配置）
SpringMVC简介:SpringMVC也叫Spring Web mvc,属于表现层的框架.Spring MVC是Spring框架的一部分,是在Spring3.0后发布的 Spring结构图 Spr ...
- SpringMvc核心流程以及入门案例的搭建
1.什么是SpringMvc Spring MVC属于SpringFrameWork的后续产品,已经融合在Spring Web Flow里面.Spring 框架提供了构建 Web 应用程序的全功能 M ...
- Struts2第一个入门案例
一.如何获取Struts2,以及Struts2资源包的目录结构的了解 Struts的官方地址为http://struts.apache.org 在他的主页当中,我们可以通过左侧的Apache ...
- MyBatis入门案例、增删改查
一.MyBatis入门案例: ①:引入jar包 ②:创建实体类 Dept,并进行封装 ③ 在Src下创建大配置mybatis-config.xml <?xml version="1.0 ...
- Hibernate入门案例及增删改查
一.Hibernate入门案例剖析: ①创建实体类Student 并重写toString方法 public class Student { private Integer sid; private I ...
- Quartz应用实践入门案例二(基于java工程)
在web应用程序中添加定时任务,Quartz的简单介绍可以参看博文<Quartz应用实践入门案例一(基于Web应用)> .其实一旦学会了如何应用开源框架就应该很容易将这中框架应用与自己的任 ...
- Quartz应用实践入门案例一（基于Web环境）
Quartz是一个完全由java编写的开源作业调度框架,正是因为这个框架整合了许多额外的功能,所以在使用上就显得相当容易.只是需要简单的配置一下就能轻松的使用任务调度了.在Quartz中,真正执行的j ...
- MyBatis入门案例 增删改查
一.MyBatis入门案例: ①:引入jar包 ②:创建实体类 Dept,并进行封装 ③ 在Src下创建大配置mybatis-config.xml <?xml version="1.0 ...
随机推荐
- ArcGIS Engine 中的绘制与编辑
1.线段绘制 基本步骤 构建形状 1. 创建 IPoint IPoint m_Point = new PointClass(); m_Point.PutCoords(x, y); 2. 创建 IPoi ...
- system表空间用满解决
分类: Oracle 早上看到alert日志报说system表空间快满了(oracle版本是11gR2): 如果system表空间不是自动扩展,空间用满甚至会出现数据库无法登陆.使用任何用户登 ...
- Openwrt 安装软件到U盘或硬盘
http://blog.licess.org/openwrt-install-software-to-udisk-harddisk/ 运行一个多月的DDNAS被结婚来玩的小孩给关了,于是趁机更新了一下 ...
- 基于UDP的通讯
XX:那飘过的100~_~{2014/10/03 10:57} UDP是一种面向非连接SOCK_DGRAM,提供无连接服务.数据包以独立包形式发送,不提供无措保证,数据能够丢失或反复. UDP的Ser ...
- [iOS] dom解析xml数据，拿到<>里面的值
<response result="success" timestamp="1338890206" cityver="1.0"> ...
- Mongodb for PHP教程之数据操作
Mongodb的常用操作 参看手册,php官方的http://us2.php.net/manual/en/mongo.manual.php 也可以参看mongodb官方的教程 数据库连接 ⑴默认格式 ...
- CSS中：overflow:hidden的作用
功能1.隐藏溢出 在IE6下,当子容器的宽高超出父容器时,父容器就会被撑开来. 要想解决这个问题,在父容器中除定义宽和高的值以外,还必须写overflow:hidden,这样就能把子容器的其它内容隐 ...
- 堆排序C＋＋实现
//heap sort //堆排序能够分为两个过程.其一是建堆.其二是出堆 //堆是一种全然二叉树,所以它能够用数组进行存储. //堆可分为最大堆和最小堆.最大堆指任一节点的值都大于其左右孩子节点的值 ...
- HDU1007(求近期两个点之间的距离)
一年前学长讲这题的时候,没听懂.自己搜解题报告也看不懂,放了一年. 现在对分治和递归把握的比一年前更加熟悉,这题也就攻克了. 题意:给你一堆点让你求近期两点之间距离的一半,假设用暴力的话O(n*n)明 ...
- Java内部类用法
内部类可以是静态(static)的,可以使用 public.protected 和 private 访问控制符,而外部类只能使用 public,或者默认. 成员式内部类 在外部类内部直接定义(不在方法 ...