我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！
前言
大家好，我是小阵 🔥，一路奔波不停的码字业务员
如果喜欢我的文章，可以关注 ➕ 点赞，与我一同成长吧~😋
加我微信：zzz886885，邀你进群，一起学习交流，摸鱼学习两不误🌟
开开心心学技术大法~~
p
来了来了，他真的来了~
正文
先看效果
实现思路
-
先通过canvas画出来背景表格
- 通过循环与
moveTo、lineTO绘制横向和纵向灰线
- 通过循环与
-
然后通过
context.rect画出来大矩形和小矩形- 通过
context.fill将矩形颜色填满 - 通过
context.stroke画出来矩形边缘
- 通过
-
再通过
context.arc画出圆形- 同上，通过
fill和strock画出来一个填满颜色的圆形，一个圆形灰边
- 同上，通过
-
中间的三角形是通过
moveTo与lineTo来绘制的- 同样画出来填充颜色和灰边
-
注意，上面的所通过fill填充的不太一样。大矩形的
fill画出来了黄色背景，其他的小矩形、圆形和三角形都只是空fill目的是掩盖大矩形的黄色背景 -
然后是图形的`boxShadow``
- 通过
context.shadowColor确定阴影的颜色 - 通过
context.shadowOffsetX确定阴影的横向偏移量 - 通过
context.shadowOffsetY确定阴影的纵向偏移量 - 通过
context.shadowBlur确定阴影的模糊效果
- 通过
-
至此就完毕了
具体实现
基础html
<body>
<canvas id="canvas" width="600" height="400"></canvas>
</body>
只是提供一个canvas
canvas部分
绘制背景部分
drawGird('lightgray', 10, 10);
function drawGird(color, stepX, stepY) {
context.strokeStyle = color;
context.lineWidth = 0.5;
for (var i = stepX + 0.5; i < context.canvas.width; i += stepX) {
context.beginPath();
context.moveTo(i, 0);
context.lineTo(i, context.canvas.height);
context.stroke();
}
for (var i = stepY + 0.5; i < context.canvas.height; i += stepY) {
context.beginPath();
context.moveTo(0, i);
context.lineTo(context.canvas.width, i);
context.stroke();
}
}
绘制shadow效果
设定shadow效果
context.shadowColor = 'rgba(200,200,0,0.5)';
context.shadowOffsetX = 12;
context.shadowOffsetY = 12;
context.shadowBlur = 15;
绘制fill效果
drawCutouts();
function drawCutouts() {
context.beginPath();
addOuterRectanglePath();// 绘制大矩形
addCirclePath();// 绘制圆形
addRectanglePath();// 绘制矩形
addTrianglePath();// 绘制三角形
context.fill();//Cut out shapes
}
function addOuterRectanglePath() {
context.rect(110, 25, 370, 335);
}
function addCirclePath() {
context.arc(300, 300, 40, 0, Math.PI * 2, true);
}
function addRectanglePath() {
rect(310, 55, 70, 35, true);
}
function addTrianglePath() {
context.moveTo(400, 200);
context.lineTo(250, 115);
context.lineTo(200, 200);
context.closePath();
}
绘制stroke效果
strokeCutoutShapes()
function strokeCutoutShapes() {
// context.save();
context.strokeStyle = 'rgba(0,0,0,0.7)';
context.beginPath();
addOuterRectanglePath();//CW
context.stroke();
context.beginPath();
addCirclePath();
addRectanglePath();
addTrianglePath();
context.stroke();
}
这样就ok了
完整代码
总结
- 小图形通过
fill覆盖大矩形的背景 - 通过
ctx.shadowColor等一系列方法实现阴影效果
结语
如果文章真的有帮到你，希望可以多多点赞、收藏、关注支持一波呀！！小阵会很开心哒~
热爱开源，支持开源，拥抱开源！
文章如有错误或不严谨之处，还望指出，感谢感谢！！！
往期好文推荐
