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

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 id="btn-smile">点我笑</button>
    <canvas id="myCanvas" width="500" height="500">您的浏览器不支持canvas</canvas>
    <script>
    window.addEventListener('load', () => {
        var btn = document.getElementById('btn-smile');
        var c = document.getElementById('myCanvas');
        var ctx = c.getContext('2d');

        btn.addEventListener('click', () => {
            //画笔初始化
            ctx.lineWidth = 5;
            ctx.strokeStyle = '#f00';

            //位置初始化
            ctx.beginPath();

            //绘制圆形
            //参数arc(圆心x坐标,y坐标,圆弧半径,起始角度,终止角度,是否逆时针)
            //注意,这里的角度是以弧度为单位,所以计算的时候需要转换求出
            //据定义,一周的弧度数为2πr/r=2π,360°角=2π弧度,因此,1弧度约为57.3°,即57°17'44.806'',1°为π/180弧度,近似值为0.01745弧度,周角为2π弧度,平角(即180°角)为π弧度,直角为π/2弧度。
            //具体参考百度百科
            for (var i = 0; i < 180; i++) {
                (function(x) {
                    setTimeout(function() {
                        ctx.arc(65, 80, 20, Math.PI, Math.PI + x * Math.PI / 180, false);
                        ctx.stroke();
                        ctx.beginPath();
                    }, 500);
                    setTimeout(function() {
                        ctx.arc(135, 80, 20, Math.PI, Math.PI + x * Math.PI / 180, false);
                        ctx.stroke();
                        ctx.beginPath();
                    }, 600);
                    setTimeout(function() {
                        ctx.arc(100, 100, 70, 0, x * Math.PI / 180, false);
                        ctx.stroke();
                        ctx.beginPath();
                    }, 800);
                })(i);
            }


        }, false);

    }, false);
    </script>
</body>

</html>

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

<head>
    <meta charset="utf-8">
    <title>实心圆</title>
    <!--兼容IE8和低版本IE-->
    <!--[if lte IE 8]><script src="excanvas.js"></script><![endif]-->
</head>

<body>
    <canvas id="myCanvas" width="500" height="500">您的浏览器不支持canvas</canvas>
    <script>
        //获取元素
        var c = document.getElementById('myCanvas');
        var ctx = c.getContext('2d');

        //初始化画笔
        ctx.lineWidth = 5;

        //初始化位置
        ctx.beginPath();

        //进行实心圆绘制
        ctx.arc(100, 100, 70, 0, 360 * Math.PI/180, true);
        //圆填充
        ctx.fillStyle = '#f00';
        ctx.fill();
    </script>
</body>

</html>

效果图

这里写图片描述
这里写图片描述

©️2020 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值