佳宸学习和分享笔记的地方

0%

canvas学习笔记

canvas

基础方法

绘制弧/曲线

arc() 方法创建弧/曲线(用于创建圆或部分圆)。

1
context.arc(x,y,r,sAngle,eAngle,counterclockwise);
  • x:圆心的 x 坐标
  • y:圆心的 y 坐标
  • r:圆的半径
  • sAngle:起始角,以弧度计(弧的圆形的三点钟位置是 0 度)
  • eAngle:结束角,以弧度计
  • counterclockwise:可选。规定应该逆时针还是顺时针绘图。false 为顺时针,true 为逆时针

图片来自 w3cschool

图像绘制

drawImage() 向画布上绘制图像、画布或视频

1
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
  • img:规定要使用的图像、画布或视频
  • sx:可选。开始剪切的 x 坐标位置
  • sy:可选。开始剪切的 y 坐标位置
  • swidth:可选。被剪切图像的宽度
  • sheight:可选。被剪切图像的高度
  • x:在画布上放置图像的 x 坐标位置
  • y:在画布上放置图像的 y 坐标位置
  • width:可选。要使用的图像的宽度(伸展或缩小图像)
  • height:可选。要使用的图像的高度(伸展或缩小图像)

基础方法练习

image-20200330144638329

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.canvas {
background: #000;
}
</style>
</head>
<body>
<div class="draw">
<canvas class="canvas"></canvas>
<canvas class="canvas"></canvas>
<canvas class="canvas"></canvas>
<canvas class="canvas"></canvas>
</div>


<script>
let canvas = document.querySelectorAll("canvas");
console.log(canvas)
let context0 = canvas[0].getContext("2d");
let context1 = canvas[1].getContext("2d");
let context2 = canvas[2].getContext("2d");
let context3 = canvas[3].getContext("2d");

// 画布长宽 默认宽300 高150
// var cx = canvas.width = 400;
// var cy = canvas.height = 400;

/*
* 画一个圆里面填满
*/
context0.beginPath();
// 坐标(100,75),半径,起始角3点钟方向,转Math.PI(180)度 ,false逆时针 ,true顺时针
context0.arc(100, 75, 50, 0, Math.PI * 2, false);
// 填充颜色
context0.fillStyle = 'rgb(255,255,255)';
// 设置阴影模糊级别
context0.shadowBlur = 50;
// 阴影颜色
context0.shadowColor = 'red';
context0.fill();

/*
* 画一个1/4圆,连线闭合
*/
context1.beginPath();
// 坐标(100,75),半径,起始角3点钟方向,顺时针到 Math.PI(180)度结束这个位置 ,画线 false逆时针 ,true顺时针
context1.arc(100, 75, 50, 0, Math.PI* 1.5, true);
// 形成闭合路径
context1.closePath();
// 描边
context1.strokeStyle="white";
context1.stroke();

/*
* 画几条连续线
*/
context2.beginPath();
// 把路径移动到画布中的指定点,不创建线条
context2.moveTo(50,50);
// 添加一个新点,然后在画布中创建从该点到最后指定点的线条
context2.lineTo(100,100);
// 不用moveTo 连续用lineTo也可
context2.lineTo(200, 100);
context2.lineTo(100,50);
// 线条宽度
context2.lineWidth = 10;
// 起始和终点线圆角
context2.lineCap = 'round'
context2.strokeStyle = '#fff';
context2.stroke();

/*
* 画矩形
*/
context3.beginPath();
// 设置渐变 (开始x, 开始y, 结束x, 结束y)
let grd = context3.createLinearGradient(20,10,100,100);
// grd.addColorStop(0,'pink');
// grd.addColorStop(1,'white');
// 初始位置0, 结束位置1
grd.addColorStop(0,'rgb(255, 0, 0)');
grd.addColorStop(0.2,'rgb(255, 165, 0)');
grd.addColorStop(0.3,'rgb(255, 255, 0)');
grd.addColorStop(0.5,'rgb(0, 255, 0)');
grd.addColorStop(0.7,'rgb(0, 127, 255)');
grd.addColorStop(0.9,'rgb(0, 0, 255)');
grd.addColorStop(1,'rgb(139, 0, 255)');
context3.fillStyle = grd;
// 实心矩形 参数:左上的角位置(x, y, 宽, 高)
context3.fillRect(20, 10, 100, 100);
context3.strokeStyle = '#fff';
// 空心矩形
context3.strokeRect(130, 10, 100, 100);
// 旋转轴心在 画布的 左上角
context3.rotate(5*Math.PI/180);
context3.strokeRect(130, 10, 100, 100);
// 线条的长宽 和坐标的位置都被放大了
context3.scale(1.2,1.2);
context3.strokeRect(130, 10, 100, 100);

</script>

</body>
</html>

好看渐变色网站 uigradients用来做背景

canvas随机粒子移动+鼠标移动效果

particle

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html, body {
margin: 0;
overflow: hidden;
width: 100%;
height: 100%;
cursor: none;
background: black;
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>

<script>
let ctx = document.getElementById('canvas'),
content = ctx.getContext('2d'),
round = [],
WIDTH = document.documentElement.clientWidth,
HEIGHT = document.documentElement.clientHeight,
// 粒子个数
initRoundPopulation = 80;
let round_arr = [],
para = {
num: 100,
color: false, // 颜色 如果是false 则是随机渐变颜色
r: 0.9,
o: 0.09, // 判断圆消失的条件,数值越大,消失的越快
a: 1,

},
color,
color2

// 满屏
ctx.width = WIDTH;
ctx.height = HEIGHT;

// 判断参数中是否设置了 color,如果设置了 color,就使用该值、
// 如果参数中的 color 为 false,那么就使用随机的颜色
if (para.color) {
color2 = para.color;
} else {
color = Math.random() * 360;
}
// 鼠标移动事件
window.onmousemove = function (event) {

mouseX = event.clientX;
mouseY = event.clientY;

round_arr.push({
mouseX: mouseX,
mouseY: mouseY,
r: para.r,
o: 1
})
};
// 随机圆的构造函数
function Round_item(index, x, y) {
this.index = index;
this.x = x;
this.y = y;
// 1-3的随机半径
this.r = Math.random() * 2 + 1;
// 随机透明度 0.05-0.55
var alpha = (Math.floor(Math.random() * 10) + 1) / 10 / 2;
this.color = "rgba(255,255,255," + alpha + ")";
}

Round_item.prototype.draw = function () {
content.fillStyle = this.color;
content.shadowBlur = this.r * 2;
content.beginPath();
content.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
content.closePath();
content.fill();
};

function animate() {
content.clearRect(0, 0, WIDTH, HEIGHT);

for (var i in round) {
round[i].move();
}
// 递归调用
requestAnimationFrame(animate)
}

// 移动粒子的y坐标,向上运动
Round_item.prototype.move = function () {
this.y -= 0.15;
if (this.y <= -10) {
this.y = HEIGHT + 10;
}
this.draw();
};


function init() {
for (var i = 0; i < initRoundPopulation; i++) {
round[i] = new Round_item(i, Math.random() * WIDTH, Math.random() * HEIGHT);
round[i].draw();
}
animate();

}

init();
</script>
</body>
</html>