canvas画个笑脸，画个心心（前端）

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

better body

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

阅读量2.1k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/wqewq19/article/details/81299077

版权

前端专栏收录该内容

18 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例</title>
    <!-- 包含头部信息用于适应不同设备 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 包含 bootstrap 样式表 -->
 <script>
    function draw(){
        var canvas = document.getElementById("canvasId");
        if(canvas.getContext){
            var ctx = canvas.getContext('2d');

            ctx.beginPath();

            ctx.arc(75,75,50,0,Math.PI*2,true);
            ctx.moveTo(110,75);

            ctx.arc(75,75,35,0,Math.PI,false);
            ctx.moveTo(65,65);

            ctx.arc(60,65,5,0,Math.PI*2,true);
            ctx.moveTo(95,65);

            ctx.arc(90,65,5,0,Math.PI*2,true);

            ctx.stroke();

        }
    }
 </script>
<style>

</style>
</head>
<body onload="draw()">
 <canvas id="canvasId" height="500" width="300">

 </canvas>
</body>

</html>

这里写图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例</title>
    <!-- 包含头部信息用于适应不同设备 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 包含 bootstrap 样式表 -->
 <script>
    function draw(){
        var canvas = document.getElementById("canvasId");
        if(canvas.getContext){
            var ctx = canvas.getContext('2d');

            ctx.beginPath();
            ctx.fillStyle="red";
ctx.moveTo(75,40);
 ctx.bezierCurveTo(75,37,70,25,50,25);
 ctx.bezierCurveTo(20,25,20,62.5,20,62.5);
 ctx.bezierCurveTo(20,80,40,102,75,120);
 ctx.bezierCurveTo(110,102,130,80,130,62.5);
 ctx.bezierCurveTo(130,62.5,130,25,100,25);
 ctx.bezierCurveTo(85,25,75,37,75,40);
 ctx.fill();


        }
    }
 </script>
<style>
    canvas{background: blue;} 
</style>
</head>
<body onload="draw()">
 <canvas id="canvasId" height="500" width="300">

 </canvas>
</body>

</html>