画一个冰糖葫芦祝大家甜甜蜜蜜
【摘要】 画一个冰糖葫芦祝大家甜甜蜜蜜大家都在写有关新春的文章，我如果不写显得我不入流，过年呢冰糖葫芦是必不可少，下面我就用canvas画一个冰糖葫芦 代码具体代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>糖葫芦</title></head><body><canvas id="canvas" wi...
画一个冰糖葫芦祝大家甜甜蜜蜜
大家都在写有关新春的文章，我如果不写显得我不入流，过年呢冰糖葫芦是必不可少，下面我就用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是可选内容，表示绘制的最大宽度。
总结
好了 代码其实很简答，祝大家新年快乐，生活像冰糖葫芦一样甜甜蜜蜜，虎虎生威！
❤️ 感谢大家
如果你觉得这篇内容对你挺有有帮助的话：
- 欢迎关注我❤️，点赞👍🏻，评论🤤，转发🙏
- 关注
盼盼小课堂，定期为你推送好文，还有群聊不定期抽奖活动，可以畅所欲言，与大神们一起交流，一起学习。 - 有不当之处欢迎批评指正。
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）