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

急需上岸的小鞋
765 阅读1分钟

PK创意闹新春，我正在参加「春节创意投稿大赛」，详情请看：春节创意投稿大赛

大家都在写有关新春的文章，我如果不写显得我不入流，过年呢冰糖葫芦是必不可少，下面我就用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>

效果：

image.png

看着是不是挺简单的，这主要得益于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是可选内容，表示绘制的最大宽度。

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

avatar
文章
阅读
粉丝