画一个冰糖葫芦祝大家甜甜蜜蜜

2022-10-18
贵州
本文字数：1067 字
阅读完需：约 1 分钟

画一个冰糖葫芦祝大家甜甜蜜蜜

大家都在写有关新春的文章，我如果不写显得我不入流，过年呢冰糖葫芦是必不可少，下面我就用 canvas 画一个冰糖葫芦

具体代码如下：

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>糖葫芦</title></head><body><canvas id="canvas" width="600" height="600"></canvas>
<script>  var can = document.getElementById('canvas');  var context = can.getContext('2d');
  context.fillStyle = 'red';
  function drawCircle(x,y){    context.beginPath();    context.arc(x+80,y+80,45,0,2*Math.PI,false)    context.closePath();    context.fill();  }
  for(var i=0;i<4;i++){    drawCircle(200,20+i*80);  }
  //画冰糖葫芦的抓手  context.fillStyle = '#d2af23';  //x,y,宽,高  context.fillRect(270,i*96,20,160)
  context.fillStyle = '#2c2c2c';  //x,y,宽,高  context.font = "28px serif";  context.fillText("虎",270,i*28,160)  context.fillStyle = '#2c2c2c';  //x,y,宽,高  context.fillText("虎",270,i*48,160)  context.fillStyle = '#2c2c2c';  //x,y,宽,高  context.fillText("生",270,i*68,160)  context.fillStyle = '#2c2c2c';  //x,y,宽,高  context.fillText("威",270,i*88,160)</script></body></html>

复制代码

效果：

看着是不是挺简单的，这主要得益于 canvas，canvas 提供了用 JavaScript 在 html 上的 canvas 标签进行绘画，可以说非常的强大，canvas 主要聚焦于 2d 图形的制作。

具体思路就是先用 for 循环调用四次画圆的方法，画圆的方法是 arc()，它有六个参数：

ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);

x 表示圆心 x 轴坐标，y 表示圆心 y 轴坐标，radius表示半径大小，startAngle表示圆弧起始点，endAngle表示终点，anticlockwise

表示逆时针还是顺时针，默认是 false，顺时针

fillRect 方法就是用来画矩形的:

fillRect(x, y, width, height);

x y 是左上角的点的位置，width是矩形的宽，height是矩形的高

通过 fillRect 画出一个长方形，然后着色，这样冰糖葫芦的抓手（阿里 P7 必学词汇）就画出来了

fillText 就是写字了

fillText(text, x, y, [maxWidth]);

text 是字体内容，x 表示文本的起点 x 轴坐标，y 表示文本起点的 y 轴的位置，maxWidth是可选内容，表示绘制的最大宽度。

好了代码其实很简答，祝大家新年快乐，生活像冰糖葫芦一样甜甜蜜蜜，虎虎生威！

这篇文章简单，但是很有乐趣，也让我个人产生了前端的兴趣，我觉得前端做的事情太有趣了，希望大家从这篇文章中感觉到代码的有趣。

发布于: 刚刚阅读数: 2

原文链接:【http://xie.infoq.cn/article/e7576f70e3d38feebdf909b73】。文章转载请联系作者。

周杰伦本人

关注

还未添加个人签名 2020-02-29 加入

公众号《盼盼小课堂》，多平台优质博主

发布

暂无评论

创作场景

画一个冰糖葫芦祝大家甜甜蜜蜜

画一个冰糖葫芦祝大家甜甜蜜蜜

周杰伦本人

评论