使用canvas画出哭脸

好的，以下是使用 canvas 绘制哭脸的代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Canvas绘制哭脸</title> </head> <body> <canvas id="myCanvas" width="200" height="200"></canvas> <script> // 获取 canvas 元素 var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); // 绘制圆形头部 context.beginPath(); context.arc(100, 100, 80, 0, 2 * Math.PI); context.fillStyle = "#FDB813"; context.fill(); // 绘制眼睛 context.beginPath(); context.arc(60, 70, 10, 0, 2 * Math.PI); context.arc(140, 70, 10, 0, 2 * Math.PI); context.fillStyle = "#FFFFFF"; context.fill(); // 绘制黑色瞳孔 context.beginPath(); context.arc(60, 70, 5, 0, 2 * Math.PI); context.arc(140, 70, 5, 0, 2 * Math.PI); context.fillStyle = "#000000"; context.fill(); // 绘制嘴巴 context.beginPath(); context.moveTo(60, 130); context.quadraticCurveTo(100, 150, 140, 130); context.strokeStyle = "#000000"; context.lineWidth = 5; context.stroke(); // 绘制眼泪 context.beginPath(); context.moveTo(80, 100); context.quadraticCurveTo(90, 110, 100, 105); context.quadraticCurveTo(110, 110, 120, 100); context.strokeStyle = "#0000FF"; context.lineWidth = 2; context.stroke(); </script> </body> </html> ``` 效果如下： ![哭脸](https://cdn.jsdelivr.net/gh/Yousazoe/picgo-repo/img/20210914162213.png)

使用canvas画出哭脸

相关推荐

html5使用canvas画三角形

android canvas使用line画半圆

HTML5 画布canvas使用方法

使用Canvas绘制图形和实现动画效果

使用HTML5 Canvas创建图形与动画

使用Canvas绘制高性能的图形与动画

使用Canvas API创建自定义的h5交互动画

Canvas渲染动画效果

js使用canvas画出S型曲线

如何使用canvas绘画

使用canvas画图片

html使用canvas画警示路标

python如何使用canvas画球体

使用canvas画哆啦A梦

uni-app中使用canvas画

使用canvas画三阶贝塞尔曲线

canvas怎么画出风

使用canvas画出两条直线 在交汇点显示当前角度和圆弧

canvas画出一个不规则的海浪

最新推荐

canvas绘制的直线动画

解决canvas画布使用fillRect()时高度出现双倍效果的问题

清除canvas画布内容(点擦除+线擦除)

vue使用canvas实现移动端手写签名

原生JS使用Canvas实现拖拽式绘图功能

zigbee-cluster-library-specification

管理建模和仿真的文件

实现实时数据湖架构：Kafka与Hive集成

list根据id查询pid 然后依次获取到所有的子节点数据

JSBSim Reference Manual

使用canvas画出两条直线在交汇点显示当前角度和圆弧