canvas 画笑脸

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

原创

最新推荐文章于 2023-09-23 09:36:09 发布 · 543 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#css #html

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

代码

<!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, '#006d00'); //鼻子
        //嘴巴
        ctx.beginPath();
        ctx.arc(150, 180, 60, 0, Math.PI, false);
        ctx.strokeStyle = "#ff5901";
        ctx.lineWidth = 5