用canvas画个笑脸
2021/4/30 18:27:01
本文主要是介绍用canvas画个笑脸,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
<!DOCTYPE>
<HTML>
<HEAD>
<TITLE> 画个笑脸 </TITLE>
<META charset="utf-8">
</HEAD>
<BODY>
<canvas id="canvas" width="600" height="400"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
//绘制脸
ctx.beginPath(); //开始绘制路径
ctx.arc(300,200, 140, 0, Math.PI*2); //绘制圆弧
ctx.fillStyle = "yellow";
ctx.fill();
//绘制眼睛
ctx.beginPath();
ctx.arc(230,150, 33, 0, Math.PI*2);
ctx.stroke();
ctx.fillStyle = "black";
ctx.fill();
//绘制眼睛
ctx.beginPath();
ctx.arc(370,150, 33, 0, Math.PI*2);
ctx.stroke();
ctx.fillStyle = "black";
ctx.fill();
//绘制嘴巴
ctx.beginPath();
ctx.arc(300,160, 110, 0.5, Math.PI*0.8,false);
ctx.lineWidth = 8;
ctx.strokeStyle = 'white';
ctx.stroke();
</script>
</BODY>
</HTML>
这篇关于用canvas画个笑脸的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04el-table 开启定时器下,表格的选中状态会消失是什么原因-icode9专业技术文章分享
- 2024-10-03如何安装和初始化飞牛私有云 fnOS?-icode9专业技术文章分享
- 2024-10-03如何安装 App 并连接到飞牛 NAS?-icode9专业技术文章分享
- 2024-10-03如何安装飞牛 TV 并连接到影视服务器?-icode9专业技术文章分享
- 2024-10-03如何在PVE和ESXI上安装飞牛私有云 fnOS?-icode9专业技术文章分享
- 2024-10-03fnOS国产最强NAS安装系统异常情况处理-icode9专业技术文章分享
- 2024-10-03飞牛NAS如何创建存储空间?-icode9专业技术文章分享
- 2024-10-03fnOS国产最强NAS硬盘会自动休眠吗?-icode9专业技术文章分享
- 2024-10-03fnOS国产最强NAS如何安装飞牛影视和创建媒体库?-icode9专业技术文章分享
- 2024-10-03fnOS国产最强NAS如何为家人朋友开通影视账号?-icode9专业技术文章分享