canvas绘制圆

我是一只代码狗

已于 2024-01-01 16:47:18 修改

阅读量190

点赞数

分类专栏： vue 文章标签： javascript 开发语言 ecmascript

于 2024-01-01 16:24:53 首次发布

原文链接：https://mp.csdn.net/mp_blog/creation/editor?spm=1001.2101.3001.5352

版权

vue 专栏收录该内容

38 篇文章 3 订阅

订阅专栏

画笑脸

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //创建标签
        var canvas=document.createElement('canvas')
        canvas.width=600;
        canvas.height=400;
        //把canvas放入body中
        document.body.append(canvas);
        //创建画笔
        var context=canvas.getContext('2d');
        //画最外面的圆 x,y,半径，开始角度，结束角度
        context.arc(200,200,100,0,2*Math.PI)
        //设置线的颜色
        context.strokeStyle='red'

        //画连线
        context.stroke();


        //画左边的眼镜
        //和上面的断开连线 必须和结束路径一起使用
        context.beginPath();
        context.arc(150,150,20,0,2*Math.PI)
        //画连线
        context.stroke();
        //结束路径
        context.closePath();

        //画右边的眼镜
        context.beginPath();
        context.arc(250,150,20,0,2*Math.PI)
        //结束路径
        context.closePath();
        //画连线
        context.stroke();


        //画鼻子
        context.beginPath();
        context.arc(200,200,20,0,2*Math.PI)
        //画连线
        context.stroke();
        //结束路径
        context.closePath();


        //画嘴
        context.beginPath();
        //半弧
        context.arc(200,240,50,0,Math.PI)
        //画连线
        context.stroke();
        //结束路径
        context.closePath();
        
    </script>
</body>
</html>

画椭圆

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //创建标签
        var canvas=document.createElement('canvas')
        canvas.width=600;
        canvas.height=400;
        //把canvas放入body中
        document.body.append(canvas);
        //创建画笔
        var context=canvas.getContext('2d');
        //弧度=角度*π/180
        //绘制椭圆 x,y，半径x,半径y,旋转，开始角度，结束角度
        context.ellipse(300,200,100,50,0,0,360*Math.PI/180);
        //绘制线
        context.stroke();
        
    </script>
</body>
</html>