本文已参与「新人创作礼」活动，一起开启掘金创作之路。
canvas
canvas的像素化
使用canvas绘制图形，只要绘制成功，canvas就像素化了它们
canvas没有能力再次得到这个图形，也就是canvas没有能力再去修改画布上的内容。这也是canvas轻量级的原因
<canvas width="300" height="300" id="myCanvas">
当前浏览器不支持
</canvas>
<script>
// canvas画布的使用
var canvas = document.getElementById("myCanvas"); //- 得到canvas
var ctx = canvas.getContext("2d");
ctx.fillStyle = "green"; //- 先给颜色显示
ctx.fillRect(100, 100, 200, 50); //- 后绘制矩形
</script>
canvas的动画
canvas的动画思想：清屏 - 更新 - 渲染
canvas上的画布的元素，一旦使用就被像素化了，不通过style.left方法修改，而是需要重新绘制
<canvas id="myCanvas" width="1000" height="600">
123
</canvas>
<script>
//- 得到画布
var canvas = document.getElementById("myCanvas")
//- 获取上下文
var ctx = canvas.getContext("2d");
//- 设置颜色
ctx.fillStyle = "blue";
//- 信号量
var left = 100;
setInterval(function () {
//- 清除画布。从0 0 开始清除，1000 600 表示清除1000宽度 600高度
ctx.clearRect(0, 0, 1000, 600);
//- 更新。更新信号量
left++;
//- 渲染
ctx.fillRect(left, 100, 100, 100
}, 10)
</script>
动画就是将相关静态画面连续播放。
把每一次绘制的静态画面叫做“帧”，时间的间隔就表示的是帧的间隔
面向对象思维实现canvas动画
canvas也是使用面向对象方法进行编程，因为我们可以使用面向对象来维持canvas的属性和状态
<canvas id="mycanvas" width="1000" height="600"></canvas>
//- 得到画布
var canvas = document.getElementById("mycanvas");
//- 获取上下文
var ctx = canvas.getContext("2d");
//- 维护状态
function Rect(x, y, w, h, color) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.color = color;
}
//- 更新和渲染的方法
Rect.prototype.update = function () {
this.x++;
}
Rect.prototype.render = function () {
//- 设置颜色
ctx.fillStyle = this.color;
//- 设置颜色
ctx.fillRect(this.x, this.y, this.w, this.h);
}
我们创建了两个实例
//- 实例化
var r1 = new Rect(100, 100, 50, 50, "purple");
var r2 = new Rect(50, 200, 80, 80, "red");
动画过程在定时器里，每一帧都会调用实例的更新和渲染方法
//- 定时器中设置动画过程。清除-更新-渲染
setInterval(function () {
ctx.clearRect(0, 0, canvas.width, canvas.height);
r1.update(); //- 引用更新方法
r1.render(); //- 引用渲染方法
r2.update(); //- 引用更新方法
r2.render(); //- 引用渲染方法
}, 10)
canvas的绘制
填充矩形
填充矩形
//- 填充矩形 fill
btn1.onclick = function () {
//- 填充颜色
ctx.fillStyle = "green";
//- 填充矩形
ctx.fillRect(100, 100, 200, 50);
}
参数含义：分别代表填充坐标x、填充坐标y、矩形的宽度width、矩形的高度height
绘制矩形边框
//- 绘制矩形边框 stroke
btn2.onclick = function () {
//- 绘制边框颜色
ctx.strokeStyle = "red";
//- 绘制大小
ctx.strokeRect(200, 200, 200, 200)
}
参数含义：分别代表绘制坐标x、绘制坐标y、矩形的宽度width、矩形的高度height
清除画布
//- 清除画布
btn3.onclick = function () {
ctx.clearRect(0, 0, 1000, 600);
}
参数含义：分别代表清除坐标x、清除坐标y、矩形的宽度width、矩形的高度height
绘制路径
绘制路径是为了设置不规则的多边形状态
使用路径进行绘制的时候需要既定的步骤：
- 需要设置路径起点
- 使用绘制命令画出路径
- 封闭路径
- 需要填充护着绘制已经封闭路径的形状
<canvas id="mycanvas" width="1000" height="600">
123
</canvas>
<script>
var canvas = document.getElementById("mycanvas");
//- 所有图形绘制都是通过ctx属性 方法制作的，和canvas已经没有关系了
var ctx = canvas.getContext("2d");
//- 创建一个路径
ctx.beginPath();
//- 移动绘制点
ctx.moveTo(100, 100);
//- 描述行进路径
ctx.lineTo(200, 200);
ctx.lineTo(300, 50);
//- 封闭这个路径
ctx.closePath();
//- 绘制这个不规则的图形
ctx.strokeStyle = "red";
ctx.stroke();
</script>
开始路径
ctx.beginPath();
移动绘制点
ctx.moveTo(100,100);
描述绘制路径
ctx.lineTo(200,200);
多次描述绘制路径
ctx.lineTo(300,50);
ctx.lineTo(100,400);
闭合路径
ctx.closePath();
描边
ctx.strokeStyle = "red";
ctx.stroke();
填充
ctx.fillStyle = "green";
ctx.fill();
圆弧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas id="mycanvas" width="600" height="600">123</canvas>
<script>
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
//创建一个路径
ctx.beginPath();
ctx.arc(200, 200, 100, 0, 7, false);
ctx.stroke();
</script>
</body>
</html>
参数含义：
200,200代表起始坐标
100表示圆的半径
0,7指的是圆弧的开始和结束位置，使用弧度制单位
false表示顺时针方向，true表示逆时针方向
透明度
透明度的值在0~1之间
ctx.globalAlpha = 0.2
canvas实现鼠标炫彩小球案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#mycanvas {
border: 1px solid #000;
}
</style>
</head>
<body>
<canvas id="mycanvas" width="800" height="800"></canvas>
<script>
//- 得到画布
var canvas = document.getElementById("mycanvas");
//- 获取上下文
var ctx = canvas.getContext("2d");
//- 制作小球
function Ball(x, y, r) { //- 起坐标，始坐标，半径
this.x = x;
this.y = y;
this.r = r; //- 初始半径
this.color = getRandom(); //- 设置随机颜色
this.dx = parseInt(Math.random() * 10) - 5; //- 设置行进方向
this.dy = parseInt(Math.random() * 10) - 5;
//- 将小球维护到数组中
ballArr.push(this);
}
//- 渲染小球
Ball.prototype.render = function () {
ctx.beginPath();
ctx.arc(this.x, this.y, this.r, 0, 2 * Math.PI, false);
ctx.fillStyle = this.color;
ctx.fill();
}
//- 让小球动起来
Ball.prototype.update = function () {
this.x += this.dx;
this.y += this.dy;
this.r -= 3;
if (this.r < 0) {
this.remove();
}
}
Ball.prototype.remove = function () {
for (var i = 0; i < ballArr.length; i++) {
ballArr.splice(i, 1)
}
}
//- canvas设置鼠标监听，鼠标移动的过程，创建小球
canvas.addEventListener("mousemove", function (event) {
new Ball(event.offsetX, event.offsetY, 20);
})
//- 维护小球的数组
var ballArr = [];
//- 用定时器进行动画渲染和更新
setInterval(function () {
//- 动画的逻辑：清屏-更新-渲染
ctx.clearRect(0, 0, canvas.width, canvas.height)
// console.log(ballArr);
for (var i = 0; i < ballArr.length; i++) {
console.log(ballArr);
ballArr[i].update();
ballArr[i].render();
}
}, 30)
//- 设置随机颜色
function getRandom() {
var allType = "0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f";
var allTypeArr = allType.split(",");
console.log(allTypeArr);
var color = "#";
for (var i = 0; i < 6; i++) {
var random = parseInt(Math.random() * allTypeArr.length)
console.log(random);
color += allTypeArr[random];
// console.log(color);
}
return color;
}
console.log(getRandom());
</script>
</body>
</html>
canvas基本用法的web API
