Canvas学习笔记之画圆(笑脸)

最新推荐文章于 2024-08-16 18:48:55 发布

简单的阿贵

最新推荐文章于 2024-08-16 18:48:55 发布

阅读量1.3k

点赞数

分类专栏： canvas 文章标签： canvas 圆形笑脸原生js

本文链接：https://blog.csdn.net/qq814374557/article/details/74853461

版权

这篇博客介绍了如何使用HTML5 Canvas通过原生JavaScript来绘制笑脸。步骤包括获取canvas元素，设置绘图环境，定义画笔样式，然后使用arc()方法和stroke()绘制圆形路径。注意事项提到了弧度单位和圆心坐标的重要性。

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

Canvas学习笔记之画圆(笑脸)

步骤

1.使用getElementById()获取canvas元素。
2.获取canvas的绘制环境getContext()。
3.进行绘制画笔的粗细和颜色定义，分别是lineWidth和strokeStyle。
4.告诉系统开始绘制beginPath()，进行绘制坐标重置。
5.使用arc()和stroke()进行路径的绘制。如果不是画路径那就用fill()替代stroke()进行填充画实心的。

注意事项

1.绘制圆形的时候要注意使用的是弧度作为单位。
2.圆心的坐标是arc()定义的，而是根据定义的坐标为圆心的坐标绘制圆。

代码演示

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

<head>
    <meta charset="utf-8">
    <title>画笑脸</title>
    <!--兼容IE8和低版本IE-->
    <!--[if lte IE 8]><script src="excanvas.js"></script><![endif]-->
    <style>
        #btn-smile {
            display: block;
        }
    </style>
</head>

<body>
    <button