(精华)2020年6月28日 Canvas 效果动画
【摘要】
渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<...
渐变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>渐变</title>
</head>
<body>
<canvas id="canvas" width="600" height="800"></canvas>
<script>
//线性渐变
// createLinearGradient(0,0,200,0);
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// 创建一个线性渐变。使用渐变填充矩形:
function drawGradient() {
//开始一个新的绘制路径
ctx.beginPath();
ctx.translate(50, 50);
//创建渐变圆环
var grd = ctx.createLinearGradient(0, 0, 200, 0);
//镜像渐变
// createRadialGradient(x,y,r,x1,y1,r1)
grd.addColorStop(0.5, 'red');
// grd.addColorStop(0.5,'green');
// grd.addColorStop(0.8,'red');
grd.addColorStop(1, 'blue'); //填充渐变
ctx.lineWidth = 8;
ctx.strokeStyle = grd;
ctx.fillStyle = grd;
//沿着 100,100 位圆心，画圆
ctx.arc(100, 100, 50, 0, 360 * Math.PI / 180, true); //路径
// ctx.stroke(); // 圆环
ctx.fill(); //实心圆
}
drawGradient();
</script>
</body>
</html>
- 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
网格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>网格</title>
</head>
<body>
<canvas id="canvas" width="850" height="750" style="border:1px solid #000"></canvas>
<script>
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d'); //绘制工具，
//画网格
function drawLine(stepx, stepy) {
//样式
ctx.lineWidth = 0.5;
ctx.strokeStyle = 'green';
//绘制竖线
for (var i = stepx + 0.5; i < canvas.width; i += stepx) {
ctx.beginPath(); //新的一条路径
ctx.moveTo(i, 0);
ctx.lineTo(i, canvas.height);
ctx.stroke();
}
//绘制横线
for (var i1 = stepy + 0.5; i1 < canvas.height; i1 += stepy) {
ctx.beginPath(); //新的一条路径
ctx.moveTo(0, i1);
ctx.lineTo(canvas.width, i1);
ctx.stroke();
}
}
drawLine(10, 10);
}
</script>
</body>
</html>
- 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
效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>效果</title>
</head>
<body>
<canvas id="canvas" width="600" height="800" style="border:1px solid red"></canvas>
<script>
//平移 transform
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
// ctx.fillStyle = 'green';
// ctx.fillRect(0,0,50,70);
//原来的是(画布左上角)
ctx.save(); //保存原来的状态
ctx.translate(50, 50);
ctx.fillStyle = 'red';
ctx.fillRect(0, 0, 150, 70);
ctx.restore(); //还原状态
ctx.save();
//缩放scale
ctx.translate(250, 250);
ctx.scale(1.5, 0.5);
ctx.fillStyle = 'green';
ctx.fillRect(0, 0, 50, 70);
ctx.restore();
ctx.fillStyle = 'red';
ctx.fillRect(100, 200, 150, 70);
</script>
</body>
</html>
- 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
笑脸
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>网格</title>
</head>
<body>
<canvas id="canvas" width="850" height="750" style="border:1px solid #000"></canvas>
<script>
var canvas = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d'); //绘制工具，
// ctx.translate(300,60);
ctx.beginPath();
ctx.arc(75, 75, 50, 0, 360 * Math.PI / 180, true); //绘制一个圆
// true ：逆时针
ctx.moveTo(110, 75);
ctx.arc(75, 75, 35, 0, 180 * Math.PI / 180, false); //口
// false //顺时针
ctx.moveTo(65, 65);
ctx.arc(60, 65, 5, 0, 360 * Math.PI / 180, true); //左眼
ctx.moveTo(95, 65);
ctx.arc(90, 65, 5, 0, 360 * Math.PI / 180, true); //右眼
// ctx.moveTo(200,330);
// ctx.lineTo(230,400);
ctx.stroke();
}
</script>
</body>
</html>
- 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
文章来源: codeboy.blog.csdn.net，作者：愚公搬代码，版权归原作者所有，如需转载，请联系作者。
原文链接：codeboy.blog.csdn.net/article/details/106993565
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）