两种方法绘制笑脸（需要用到canvas标签）

最新推荐文章于 2023-09-23 09:36:09 发布
最新推荐文章于 2023-09-23 09:36:09 发布
阅读量1.2k 收藏 3
点赞数
分类专栏： H5实训 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46373141/article/details/130892902
版权

两种方法绘制笑脸（需要用到canvas标签）
方法一：

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="utf-8">
		<title>绘制笑脸-方法一</title>
	</head>
	<body>
		<canvas id="cavsElem" width="400" height="300">
			你的浏览器不支持canvas，请升级浏览器
		</canvas>
		<script>
			/* 绘制圆脸 */
			//获得画布并上下文对象 
			var context = document.getElementById('cavsElem').getContext('2d');
			context.beginPath(); //开始路径
			context.arc(100, 100, 100, 0, 2 * Math.PI, true); //绘制圆形，true为逆时针
			context.closePath(); // 关闭路径
			context.fillStyle = 'green'; //设置填充颜色
			context.fill(); //填充
			/* 绘制小嘴 */
			context.beginPath(); //开始路径
			context.strokeStyle = "#fff"; //设置描边颜色
			context.lineWidth = 5;//设置线的粗细
			context.arc(100, 130, 20, Math.PI / 6, 5 * Math.PI / 6, false); //绘制弧形，false为顺时针
			// context.closePath();
			context.stroke(); //描边
			/* 绘制左眼 */
			context.beginPath(); //开始路径
			context.arc(50, 75, 20, 0, 2 * Math.PI, true); //绘制圆形，true为逆时针
			context.closePath(); // 关闭路径
			context.fillStyle = 'white'; //设置填充颜色
			context.fill(); //填充
			
			/* 绘制右眼 */
			context.beginPath(); //开始路径
			context.arc(150, 75, 18, 0, 2 * Math.PI, true); //绘制圆形，true为逆时针
			context.closePath(); // 关闭路径
			context.fillStyle = 'white'; //设置填充颜色
			context.fill(); //填充
			context.stroke(); //描边
		</script>
	</body>
</html>

效果图：
笑脸一
方法二

<!DOCTYPE html>
<html>
	<head lang="en">
		<meta charset="utf-8">
		<title>绘制笑脸-方法二</title>
	</head>
	<body>
		<canvas id="cavsElem" width="400" height="300">
			你的浏览器不支持canvas，请升级浏览器
		</canvas>
		<script>
			/* 绘制圆脸 */
			//获得画布并上下文对象 
			var context = document.getElementById('cavsElem').getContext('2d');
			context.lineWidth = 5;//设置线的粗细
			context.moveTo(200, 100);
			context.arc(100, 100, 100, 0, 2 * Math.PI, true); //绘制圆形，true为逆时针
			context.fillStyle = 'green'; //设置填充颜色
			context.fill(); //填充
			/* 绘制小嘴 */
			var deg = Math.PI / 6;
			context.moveTo(100 + 20 * Math.cos(deg), 130 + 20 * Math.sin(deg));
			context.strokeStyle = "#fff"; //设置描边颜色
			
			context.arc(100, 130, 20, Math.PI / 6, 5 * Math.PI / 6, false); //绘制弧形，false为顺时针
			context.stroke(); //描边
			/* 绘制左眼 */
			context.moveTo(30, 75);
			for (var i = 18; i >= 0; i -= 5) {
				context.arc(50, 75, i, 0, 2 * Math.PI, false); //绘制圆形，true为逆时针
			}
			
			// /* 绘制右眼 */
			context.moveTo(130, 75);
			for (var i = 18; i >= 0; i -= 5) {
				context.arc(150, 75, i, 0, 2 * Math.PI, false); //绘制圆形，true为逆时针
			}
			context.stroke(); //描边
		</script>
	</body>
</html>

效果图
笑脸二

qing影
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
在html5中使用canvas绘制图形——案例笑脸
right_hand_side的博客
05-10 4512
文章目录画布一、canvas的方法？二、简单使用具体案例——笑脸 画布 canvas元素是H5中新增的一个重要元素，专门用来绘制图形。在页面中放置一个canvas元素，就相当于在页面上放置一块画布，可以利用canvas api在其中进行图形的描绘。 一、canvas的方法？ 样式设置及绘制：fillStyle、strokeStyle、fill()、stroke() 渐变样式： createLinearGradient()、 createRadialGradient() 绘制矩形：fillRect()、
利用HTML5中的Canvas绘制一张笑脸的教程
12-14
今天，你将学习一项称为Canvas（画布）的web技术，以及它和文档对象模型（通常被称为DOM）的关联。这项技术非常强大，因为它使web开发人员能够通过使用JavaScript访问和修改HTML元素。 现在你可能想知道为什么我们需要大刀阔斧地使用JavaScript。简而言之，HTML和JavaScript是相互依存的，一些HTML组件，如canvas元素，并不能脱离JavaScript单独使用。毕竟，如果我们不能在上面绘图，那canvas能派什么用处呢？ 为了更好地理解这个概念，我们一起通过一个示例项目来尝试画一个简单的笑脸。让我们开始吧。开始 首先创建一个新目录来保存你的项目文件，然后打开
canvas画笑脸
weixin_34255793的博客
03-15 223
<style> body { background: black; text-align: center; } #cans { background: white; } </style> <script> window.onload=function(){ let OC=document.getElemen...
canvas绘制一个笑脸
最新发布
qq_45331969的博客
09-23 635
【代码】canvas绘制一个笑脸。
使用canvas绘制笑脸
yinge0508的博客
10-12 2227
笑脸示例代码： <template> <div class="div"> <canvas id="tutorial3" width="150" height="150"></canvas> </div> </template> <script> export default { data() { return {}; }, mounted() { var canvas = do
详解canvas在圆弧周围绘制文本的两种写法
09-28
本文将详细介绍如何在Canvas上使用两种方法实现圆弧周围文本的绘制。 首先，我们需要了解Canvas的基本操作。`canvas`元素是一个画布，通过JavaScript的`canvas.getContext('2d')`可以获得2D渲染上下文，从而进行...
HTML5 Canvas中绘制椭圆的4种方法
01-21
HTML5中的Canvas并没有直接提供绘制椭圆的方法，下面是对几种绘制方法的总结。各种方法各有优缺，视情况选用。各方法的参数相同： 1.context为Canvas的2D绘图环境对象，2.x为椭圆中心横坐标，3.y为椭圆中心纵坐标，4...
详解canvas绘制网络字体几种方法
12-13
canvas绘制网络字体时没效果，遂开始了一番解决方案查找测试，中间也碰到了不少坑，于是写下此篇文章做个总结，如果大家在用canvas时遇到了同样的问题，希望对大家有一定的帮助，接下来就来看看有哪几种解决办法 ...
canvas绘制爱心的几种方法总结(推荐)
11-26
这个方法中包含了两个关键的`canvas`上下文方法：`translate`和`shadowOffsetX`。 1. `ctx.translate(-1000, this.y)`：`translate`方法用于改变画布的当前绘图位置。在这个例子中，它将坐标原点（0,0）移动到(-...
【Canvas】canvas绘制emoji笑脸
Doxio的博客
06-28 1742
利用canvas绘制笑脸
HTML5 Canvas星星笑脸动画特效代码
03-20
HTML5 Canvas星星笑脸动画是一款zdog.js基于canvas画布绘制可爱的小星星跳舞动画特效。
SVG可爱笑脸动画 html5.zip
07-04
SVG可爱笑脸动画 html5是一款利用HTML5和SVG实现的可爱笑脸动画，它们是色彩各异的一组泥娃娃的脸，默认的时候就出现眨眼和微笑的动画，当你把鼠标滑过它们时，就像是感受到了主人的抚摸一样上下跳动起来，真的是非常可爱。
H5画布绘制笑脸
快乐江小鱼的博客
09-01 1307
使用H5 Canvas画笑脸
Canvas-绘制动态笑脸
weixin_44790446的博客
03-29 565
Canvas： 需求：绘制动态笑脸 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0".
canvas 画出笑脸
吴清钺的博客
05-27 2707
其实画了3个整圆圈+一个圆弧&lt;!DOCTYPE html&gt; &lt;html lang="zh"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;填充纹理&lt;/title&gt; &lt;/head&gt; &lt;style&gt; &am
用html语言编写笑脸,怎么使用HTML5中的Canvas绘制笑脸
weixin_39681171的博客
06-05 525
怎么使用HTML5中的Canvas绘制笑脸发布时间：2021-02-26 09:33:14来源：亿速云阅读：75作者：清风这篇“怎么使用HTML5中的Canvas绘制笑脸”除了程序员外大部分人都不太理解，今天小编为了让大家更加理解“怎么使用HTML5中的Canvas绘制笑脸”，给大家总结了以下内容，具有一定借鉴价值，内容详细步骤清晰，细节处理妥当，希望大家通过这篇文章有所收获，下面让我们一起来看看...
canvas-绘制笑脸，张嘴闭嘴
qq_37155370的博客
10-11 812
canvas-绘制笑脸，张嘴闭嘴 <canvas id="c3" width="500" height="400"></canvas> <script> var c3=document.getElementById("c3"); var ctx=c3.getContext("2d"); // 闭嘴笑脸 function clo...
canvas画个笑脸，画个心心（前端）
wqewq19的博客
07-31 2096
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt; &amp;lt;title&amp;gt;Bootstrap 实例&amp;lt;/title&amp;gt; &amp;lt;!
用canvas画一个实心描边的笑脸
dream0726的博客
07-26 1995
用canvas画一个实心描边的笑脸最近学习了HTML5，看完了教程不知道该干嘛，网上看到别人用canvas画笑脸，不过是空心的，我想画一个实心的带描边的，网上找了一些教程，看着太繁琐。于是取其精华，几经失败终于成功了。未免以后忘记，所以特意记录下来，以备日后复习。 效果如下： 代码如下：<!DOCTYPE html> <html> <head> <title>实心圆测试</title>
Delphi教程：Canvas的三种图像绘制方法详解
Graphi: TGraphic)` 函数: 与前面两个方法不同，这个函数用于在一个矩形区域内缩放并绘制Graphi图形，适用于需要对图像进行尺寸调整的场景。 文章还简要介绍了Delphi的历史发展，包括Borland公司开发的历代Delphi...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

qing影

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值