前端代码实现一个棒棒糖（使用canvas，非CSS）

最新推荐文章于 2022-07-30 01:09:51 发布

苏一恒

最新推荐文章于 2022-07-30 01:09:51 发布

阅读量1.4k

点赞数 1

分类专栏：前端体系文章标签： canvas html css js css3

本文链接：https://blog.csdn.net/HuoYiHengYuan/article/details/105339231

版权

前端体系专栏收录该内容

32 篇文章 2 订阅

订阅专栏

无意间看到春招群里发“面试官让实现一个棒棒糖”，觉得挺有意思，于是就简单实现了一个
canvas实现棒棒糖

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas width="300" height="600" id="canvas"></canvas>
</body>
<script>
let canvas = document.getElementById('canvas');
let context = canvas.getContext('2d');

context.beginPath();
context.strokeStyle = 'lightgray';
context.strokeRect(96,100,8,400);

for (let i = 100; i > 0  ; i = i-3) {
    context.beginPath();
    context.arc(100,100,i,0,360);
    //rgba直接生成的棒棒糖颜色会很丑，你可以将这段代码注释看效果
    // let color = `rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`;

    //通过hsl颜色表示法，生成"艳"一点的颜色
    let color = `hsl(${Math.random()*360},80%,60%)`;
    context.strokeStyle = color;
    context.fillStyle = color;
    context.stroke();
    context.fill();
}



</script>
</html>