【Canvas】canvas绘制emoji笑脸

Doxio

已于 2022-06-28 15:38:43 修改

阅读量1.8k

点赞数 3

分类专栏：学习记录 HTML 文章标签： javascript 开发语言

于 2022-06-28 15:36:51 首次发布

本文链接：https://blog.csdn.net/qq_50731813/article/details/125503173

版权

学习记录同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

HTML

1 篇文章 0 订阅

订阅专栏

学习记录

HTML

学习记录
利用canvas绘制emoji笑脸
一、Canvas
二、步骤
效果图

利用canvas绘制emoji笑脸

一、Canvas

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域，您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
W3.school

二、步骤

代码如下：

<!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>笑脸 [Doxio]</title>
    <script>
        window.onload = function (){
			
		//表情1
            var canvas = document.querySelector("#xiaolian");
            var context = canvas.getContext("2d");
			
            context.beginPath();  // 开始创建新路径
            context.arc(250,250,200,0,Math.PI*2);
            context.fillStyle = "#ff69b3";
            context.fill();   //进行填充颜色"#ff69b3"

            //嘴巴
            context.beginPath();
            context.arc(250,350,50,0,Math.PI);
            context.strokeStyle = "#ffff00";
            context.lineWidth =10;
            context.stroke();  // 调用 stroke 绘制该路径

            //眼睛-左
            context.beginPath();
            context.arc(160,180,50,0,Math.PI);
            context.closePath();
            context.stroke();

            //眼睛-右
            context.beginPath();
            context.arc(340,180,50,0,Math.PI);
            context.closePath();//闭合
            context.stroke();
			
		//表情2
			
			var canvas = document.querySelector("#xiaolian");
			var context = canvas.getContext("2d");
			
			context.beginPath();  // 开始创建新路径
			context.arc(750,250,200,0,Math.PI*2);
			context.fillStyle = "#ff69b3";
			context.fill();  //进行填充颜色"#ff69b3"
			
			//嘴巴
			context.beginPath();  // 开始创建新路径
			context.arc(750,320,20,0,Math.PI*2);
			context.strokeStyle = "#ffff00";
			context.lineWidth =10;
			context.stroke();  // 调用 stroke 绘制该路径
			
			//眼睛-左
			context.beginPath();
			// 创建一个半圆圆弧
			context.arc(680, 200, 50, 0, Math.PI, true);
			context.stroke();
			
			//眼睛-右
			context.beginPath();
			context.moveTo(850,150);
			context.lineTo(800,183);
			context.lineTo(850,200);  //会以上次 lineTo 的节点为开始"lineTo(800,183)"
			context.stroke();
			
        }
    </script>
</head>
<body>
    <canvas id="xiaolian" width="1000" height="1000"></canvas>
</body>
</html>