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 ...
随机推荐
- Linux内存管理-内核的shmall和shmmax参数（性能调优）（转）
内核的shmall和shmmax参数 SHMMAX=配置了最大的内存segment的大小:这个设置的比SGA_MAX_SIZE大比较好. SHMMIN=最小的内存segment的大小 SHMMNI=整 ...
- SQL Server 2008 R2 安装时提示“Reporting Services目录数据库文件存在”
打开MSSQL数据库管理系统的安装目录,例如: X:\Program Files\Microsoft SQL Server\MSSQL10.MSSQLSERVER\MSSQL\DATA. 其中 X:\ ...
- windows安装ZIP压缩版的Weblogic Server
以前要装Weblogic Server的时候都是装的安装版,最近发现ZIP版本的Weblogic Server是一个只包含Weblogic Server的版本,于是就想着弄一下它. 这里用到的Webl ...
- Meteor check
check方法用于检查参数或类型是否匹配模式. 安装check包 打开命令提示符窗口,并安装该软件包. C:\Users\Administrator\Desktop\meteorApp>mete ...
- [转]JS 引擎的执行机制
转: https://www.cnblogs.com/wancheng7/p/8321418.html ------------------------------------------------ ...
- CentOS 6.x DRBD
CentOS 6.x DRBD 一.drbd概述 Distributed Replicated Block Device(DRBD)是一种基于软件的,无共享,复制的存储解决方案,在服务器之间的 ...
- nginx access.log 忽略favicon.ico訪问记录的方法
favicon.ico 文件是浏览器收藏网址时显示的图标,当第一次訪问页面时.浏览器会自己主动发起请求获取页面的favicon.ico文件.当/favicon.ico文件不存在时,服务器会记录404日 ...
- Codeforces Round #221 (Div. 2) D
有点郁闷的题目,给了2000ms,可是n,m的范围已经是5000了.5000 * 5000一般在别的OJ已经是超了2000ms,一開始不敢敲.看了下别人有n*m的潜逃循环,原来CF的机子如此的强大,一 ...
- instancetype VS id
英文好的直接读下面链接的文章就好了: http://stackoverflow.com/questions/8972221/would-it-be-beneficial-to-begin-using- ...
- 责任链模式的具体应用 ServiceStack.Redis订阅发布服务的调用
责任链模式的具体应用 1.业务场景 生产车间中使用的条码扫描,往往一把扫描枪需要扫描不同的条码来处理不同的业务逻辑,比如,扫描投入料工位条码.扫描投入料条码.扫描产出工装条码等,每种类型的条码位数 ...