笑脸"/>
canvas绘制一个笑脸
一.canvas的基本使用
1.绘制一个笑脸
<!DOCTYPE html>
<html>
<head><title>Canvas 绘制笑脸</title><style>canvas {border: 1px solid #000;}</style>
</head>
<body><canvas id="myCanvas" width="200" height="200"></canvas><script>// 获取画布const canvas = document.getElementById('myCanvas');// 获取画笔const context = canvas.getContext('2d');// 绘制脸部context.beginPath();// arc(x,y,半径,开始的角度,结束的角度)context.arc(100, 100, 90, 0, Math.PI * 2); // 绘制圆形脸部context.fillStyle = 'yellow';// fill填充context.fill();// 绘制左眼context.beginPath();context.arc(70, 80, 15, 0, Math.PI * 2); // 绘制左眼context.fillStyle = 'black';context.fill();// 绘制右眼context.beginPath();context.arc(130, 80, 15, 0, Math.PI * 2); // 绘制右眼context.fillStyle = 'black';context.fill();// 绘制嘴巴context.beginPath();context.arc(100, 120, 50, 0, Math.PI); // 绘制弧形嘴巴context.lineWidth = 3;context.strokeStyle = 'black';// stroke显示路径context.stroke();</script>
</body>
</html>效果图：
更多推荐
canvas绘制一个笑脸
发布评论