前端代码实现一个棒棒糖(使用canvas,非CSS)

无意间看到春招群里发“面试官让实现一个棒棒糖”,觉得挺有意思,于是就简单实现了一个
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>

猜你喜欢

转载自blog.csdn.net/HuoYiHengYuan/article/details/105339231
今日推荐