用canvas画个笑脸

2021/4/30 18:27:01

编程Tag： canvas math 绘制 arc ctx pi 笑脸画个

本文主要是介绍用canvas画个笑脸，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

<!DOCTYPE>

<HTML>

<HEAD>

</HEAD>

<BODY>

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>

笑脸1.png

这篇关于用canvas画个笑脸的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！