案例四:画同心圆
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>circle</title>
</head>
<body>
<canvas></canvas>
</body>
<script>
let canvas = document.querySelector("canvas");
let ctx = canvas.getContext('2d');
let sw = window.innerWidth;
let sh = window.innerHeight;
canvas.width = sw;
canvas.height = sh;
let timer = null;
let sa = 0;
let ea = 0;//结束弧度
let speed = Math.PI / 180;
let r = 20;
let drawCircle = (obj) => {
ea += speed;
ctx.beginPath();
ctx.arc(obj.x, obj.y, r, sa, ea, false);
ctx.lineWidth = obj.lw;
ctx.strokeStyle = obj.color;
ctx.stroke();
if (ea >= Math.PI * 2) {
r += 20;
ea = 0;
if(r>=300){
clearInterval(timer);
}
}
}
timer = setInterval(() => {
// ctx.clearRect(0, 0, sw, sh);
drawCircle({
x: sw / 2,
y: sh / 2,
lw: 5,//线宽
color: 'tomato'
})
}, 10)
</script>
</html>
效果:circle1-CSDN直播使用canvas画circlehttps://live.csdn.net/v/216521
案例5:画圆
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>circle</title>
</head>
<body>
<canvas></canvas>
</body>
<script>
let canvas = document.querySelector("canvas");
let ctx = canvas.getContext('2d');
let sw = window.innerWidth;
let sh = window.innerHeight;
canvas.width = sw;
canvas.height = sh;
let timer = null;
// 绘制圆
function Circle(obj) {
this.x = obj.x;
this.y = obj.y;
this.r = 4;
this.color = 'hotpink';
}
Circle.prototype.draw = function () {
ctx.beginPath();
ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, true);
ctx.fillStyle = this.color;
ctx.fill();
}
// 自定义圆心
let x = sw / 2;
let y = sh / 2;
let r = 300;
let speed = Math.PI / 180;
let na = 0;
timer = setInterval(() => {
na += speed;
r-=0.05;
if(r<=0){
clearInterval(timer);
}
// if (na >= Math.PI * 2) {
// r -= 40;
// na = 0;
// if (r <= 0) {
// clearInterval(timer);
// }
// }
let cx = Math.cos(na) * r + x;
let cy = Math.sin(na) * r + y;
let c = new Circle({
x: cx,
y: cy
});
c.draw();
}, 30)
</script>
</html>
效果:circle2-CSDN直播使用canvas画圆https://live.csdn.net/v/216522
案例6:drawImage
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas></canvas>
</body>
<script>
let canvas = document.querySelector("canvas");
let ctx = canvas.getContext('2d');
let sw = window.innerWidth;
let sh = window.innerHeight;
canvas.width = sw;
canvas.height = sh;
let img = new Image();
img.onload = function () {
ctx.drawImage(img, 0, 0, 600, 680);
lj();
}
img.src = 'img/许凯.jpeg';
function lj() {
let imageData = ctx.getImageData(0, 0, 600, 680);
// console.log(data);
fs(imageData);
}
// 反色
function fs(data) {
ctx.clearRect(0, 0, 600, 680);
for (let i = 0; i < data.data.length; i++) {
if (i % 4 == 3) {
continue;
}
data.data[i] = 255 - data.data[i];
}
// 将数据显示在canvas中
ctx.putImageData(data,0,0);
}
</script>
</html>
效果图:
案例7:使用贝塞尔曲线画心
二次贝塞尔:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas></canvas>
</body>
<script>
let canvas = document.querySelector("canvas");
let ctx = canvas.getContext('2d');
let sw = window.innerWidth;
let sh = window.innerHeight;
canvas.width = sw;
canvas.height = sh;
function be2(){
ctx.beginPath();
ctx.moveTo(200,200);
ctx.quadraticCurveTo(50,150,200,350);
ctx.fillStyle = 'pink';
ctx.fill();
ctx.beginPath();
ctx.moveTo(200,200);
ctx.quadraticCurveTo(350,150,200,350);
ctx.fillStyle = 'pink';
ctx.fill();
}
be2();
</script>
</html>
效果图:
三次贝塞尔:
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<canvas></canvas>
</body>
<script>
let canvas = document.querySelector("canvas");
let ctx = canvas.getContext('2d');
let sw = window.innerWidth;
let sh = window.innerHeight;
canvas.width = sw;
canvas.height = sh;
function be3(){
ctx.beginPath();
ctx.moveTo(200,200);
ctx.bezierCurveTo(50,100,50,330,200,350);
ctx.fillStyle = 'red';
ctx.fill();
ctx.beginPath();
ctx.moveTo(200,200);
ctx.bezierCurveTo(350,100,350,330,200,350);
ctx.fillStyle = 'hotpink';
ctx.fill();
}
be3();
</script>
</html>
效果: