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 ...
随机推荐
- Generate Parentheses（组合，回溯）
Given n pairs of parentheses, write a function to generate all combinations of well-formed parenthes ...
- 【algorithm】尾递归
尾递归和一般的递归不同在对内存的占用,普通递归创建stack累积而后计算收缩,尾递归只会占用恒量的内存(和迭代一样).SICP中描述了一个内存占用曲线,用以上答案中的Python代码为例(普通递归): ...
- Ansible 详细用法说明(二)
setup:获取指定主机的facts. ===================================facts就是变量,内建变量 .每个主机的各种信息,cpu颗数.内存大小等.会存在fact ...
- 战五渣系列之八（绝杀AOP）
开发不用aop.程序猿的人生该会浪费多少时间.我想是时候让程序猿打败alpha狗了.程序猿解救世界. 1.概念 面向切面编程.这意味着,一切不在流水线上的东西.包含权限.日志.缓存.校验.资源.事物. ...
- Android中的动画具体解释系列【2】——飞舞的蝴蝶
这一篇来使用逐帧动画和补间动画来实现一个小样例,首先我们来看看Android中的补间动画. Android中使用Animation代表抽象的动画类,该类包含以下几个子类: AlphaAnimation ...
- Python中字符运算的优先级
表1-2 运算符优先级 运算符 描述 lambda Lambda表达式 or 布尔“或” and 布尔“与” not x 布尔“非” in,not in 成员测试 is,is not 同一性测试 &l ...
- 简单JS全选、反选代码
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org ...
- TinyXml 与 Rapidxml效率对照
曾经在做开发中一直使用TinyXml,在网上搜索说Rapidxml的效率比tinyXml高.个人比較喜欢追求效率.所以忍不住尝试性使用Rapidxml. RapidXml 的官方站点例如以下: htt ...
- HDU OJ u Calculate e
这是一道简单的数学计算问题 主义好输出格式就好 #include<stdio.h> int main() { printf("n e\n- -----------\n&quo ...
- 【CTF】后续深入学习内容
1.i春秋 https://www.ichunqiu.com/course/451 搜索black hat,可以看到黑帽大会的内容.免费. 2.wireshark 基础篇 1)由于Wireshark是 ...