canvas 画笑脸

最新推荐文章于 2023-09-23 09:36:09 发布

默根

最新推荐文章于 2023-09-23 09:36:09 发布

阅读量494

点赞数

分类专栏： canvas 文章标签： css html

本文链接：https://blog.csdn.net/mo_gen/article/details/121973386

版权

这篇博客主要介绍了如何利用HTML5的canvas元素，结合JavaScript来绘制一个可爱的笑脸图形，内容包括画布设置、绘制圆圈和线条的步骤，是前端开发者学习canvas基础的一个实例教程。

摘要由CSDN通过智能技术生成

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>笑脸</title>
    <style>
        #root {
            display: block;
            margin: 100px auto;
        }
    </style>
</head>

<body>
    <canvas id="root" width="600px" height="500px"></canvas>
    <script>
        let container = document.querySelector('#root');
        let ctx = container.getContext("2d");
        drawArc(150, 180, 100, 0, 2, '#e1a51d'); //脸
        drawArc(80, 110, 30, 0, 2, '#333333'); //左眼
        drawArc(220, 110, 30, 0, 2, '#333333'); //右眼
        drawArc(150, 180, 20, 0, 2,