HTML canvas 笑脸

最新推荐文章于 2023-12-20 21:52:44 发布
最新推荐文章于 2023-12-20 21:52:44 发布
阅读量308 收藏 3
点赞数
文章标签： xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/wangmingxia/p/5647322.html
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<body>
  <canvas id="mycanvas" width="600" height="600" style="border:1px solid blue;"></canvas>
  <script type="text/javascript">
  var canvas = document.getElementById("mycanvas");
  var context = canvas.getContext("2d");
  context.beginPath();
  
  //大圆
  context.arc(250,250,100,0,Math.PI*2,true);
  context.fillStyle="yellow";
  context.fill();
  context.stroke();
  context.closePath();
  
  //左眼睛
  context.beginPath();
  context.arc(200,220,15,0,Math.PI,true);
  context.stroke();
  context.closePath();
  
  //右眼睛
  context.beginPath();
  context.arc(300,220,15,0,Math.PI,true);
  context.stroke();
  context.closePath();
  
  
  //嘴巴
  context.beginPath();
  context.arc(250,260,55,0,Math.PI,false);
  context.fillStyle="white";
  context.fill();
  context.closePath();
  context.stroke();
  
  //以下都是牙齿
  context.beginPath();
  context.moveTo(210,260);
  context.lineTo(210,296);
  context.stroke();
  context.closePath();
  
  context.beginPath();
  context.moveTo(230,260);
  context.lineTo(230,310);
  context.stroke();
  context.closePath();
  
  context.beginPath();
  context.moveTo(250,260);
  context.lineTo(250,315);
  context.stroke();
  context.closePath();
  
  context.beginPath();
  context.moveTo(270,260);
  context.lineTo(270,312);
  context.stroke();
  context.closePath();
  
  context.beginPath();
  context.moveTo(290,260);
  context.lineTo(290,298);
  context.stroke();
  context.closePath();
  </script>
</body>
</html>

效果图：

转载于:https://www.cnblogs.com/wangmingxia/p/5647322.html

ajmwlc0738
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在html5中使用canvas绘制图形——案例笑脸
right_hand_side的博客
05-10 4471
文章目录画布一、canvas的方法？二、简单使用具体案例——笑脸 画布 canvas元素是H5中新增的一个重要元素，专门用来绘制图形。在页面中放置一个canvas元素，就相当于在页面上放置一块画布，可以利用canvas api在其中进行图形的描绘。 一、canvas的方法？ 样式设置及绘制：fillStyle、strokeStyle、fill()、stroke() 渐变样式： createLinearGradient()、 createRadialGradient() 绘制矩形：fillRect()、
Html5新特性--canvas，基础案例：在画布上画一个笑脸
qq_45486259的博客
05-10 1366
实现功能： 用canvas画出一个笑脸 代码： <!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"&
利用HTML5中的Canvas绘制一张笑脸的教程
12-14
今天，你将学习一项称为Canvas（画布）的web技术，以及它和文档对象模型（通常被称为DOM）的关联。这项技术非常强大，因为它使web开发人员能够通过使用JavaScript访问和修改HTML元素。 现在你可能想知道为什么我们需要大刀阔斧地使用JavaScript。简而言之，HTML和JavaScript是相互依存的，一些HTML组件，如canvas元素，并不能脱离JavaScript单独使用。毕竟，如果我们不能在上面绘图，那canvas能派什么用处呢？ 为了更好地理解这个概念，我们一起通过一个示例项目来尝试画一个简单的笑脸。让我们开始吧。开始 首先创建一个新目录来保存你的项目文件，然后打开
H5画布绘制笑脸
快乐江小鱼的博客
09-01 1293
使用H5 Canvas画笑脸
用html语言编写笑脸,怎么使用HTML5中的Canvas绘制笑脸
weixin_39681171的博客
06-05 521
怎么使用HTML5中的Canvas绘制笑脸发布时间：2021-02-26 09:33:14来源：亿速云阅读：75作者：清风这篇“怎么使用HTML5中的Canvas绘制笑脸”除了程序员外大部分人都不太理解，今天小编为了让大家更加理解“怎么使用HTML5中的Canvas绘制笑脸”，给大家总结了以下内容，具有一定借鉴价值，内容详细步骤清晰，细节处理妥当，希望大家通过这篇文章有所收获，下面让我们一起来看看...
html笑脸图形代码,基于HTML5的绘图——绘制笑脸
weixin_30821881的博客
06-04 2631
function GetContext(id){var canvas = document.getElementById(id);if(canvas && canvas.getContext){var context = canvas.getContext("2d");return context;}}function Smail(){var ctx = GetContext("s...
HTML5 Canvas星星笑脸动画特效代码
03-20
"HTML5 Canvas星星笑脸动画特效代码"是利用Canvas API结合JavaScript库zdog.js创建的一个生动有趣的动画效果，展示了小星星在画布上跳跃并形成笑脸的动态画面。 首先，我们要了解HTML5 Canvas的基本概念。Canvas是...
HTML5 Canvas星星笑脸动画
06-24
在这个“HTML5 Canvas星星笑脸动画”项目中，我们看到的是一个利用zdog.js库来实现的有趣效果。Zdog.js是一个基于HTML5 Canvas的3D图形库，它使用平滑的矢量图形来创建动画，使得在网页上制作出三维图形变得简单且...
HTML5 Canvas星星笑脸动画.rar
05-11
"HTML5 Canvas星星笑脸动画"是一个利用Canvas API实现的趣味动画示例，通过编程的方式让星星组成笑脸，展示了Canvas的灵活性和强大功能。 在HTML5 Canvas中，我们首先需要在HTML文档中创建一个`<canvas>`元素，然后...
HTML5/CSS3实现笑脸动画 非常可爱
08-23
关于纯CSS3绘制的人物我们在之前就分享过一些了，像纯CSS3绘制可爱小男孩动画、纯CSS3人物行走动画等。今天我们要分享一款基于纯CSS3实现的笑脸动画，我们只要在面部滑动鼠标，即可让人物的眼睛嘴巴动起来，实现微笑的效果，还挺可爱的。
动画笑脸哭脸的变化
04-23
该实例主要是笑脸和哭脸的动画变化，对于掌握canvas,handler,Thread很有帮助
python程序、画一个笑脸_利用HTML5中的Canvas绘制一张笑脸的教程
weixin_39982452的博客
12-08 281
今天，你将学习一项称为Canvas(画布)的web技术，以及它和文档对象模型(通常被称为DOM)的关联。这项技术非常强大，因为它使web开发人员能够通过使用JavaScript访问和修改HTML元素。现在你可能想知道为什么我们需要大刀阔斧地使用JavaScript。简而言之，HTML和JavaScript是相互依存的，一些HTML组件，如canvas元素，并不能脱离JavaSc...
两种方法绘制笑脸（需要用到canvas标签）
没事发发博客
05-26 1272
/绘制弧形，false为顺时针。//绘制弧形，false为顺时针。//绘制圆形，true为逆时针。//绘制圆形，true为逆时针。//绘制圆形，true为逆时针。//绘制圆形，true为逆时针。//绘制圆形，true为逆时针。//绘制圆形，true为逆时针。//获得画布并上下文对象。//获得画布并上下文对象。// /* 绘制右眼 *//* 绘制圆脸 *//* 绘制小嘴 *//* 绘制左眼 *//* 绘制右眼 *//* 绘制圆脸 *//* 绘制小嘴 *//* 绘制左眼 */
html制作卡通图案代码,使用HTML和CSS3绘制基本卡通图案的示例分享
weixin_39605647的博客
06-09 915
这篇文章主要介绍了使用CSS3绘制基本卡通图案的示例分享,不过必须承认,这样做的代码量并不是很少...well,需要的朋友可以参考下纯HTML+CSS实现阿童木头像先上最终效果图：在里面主要用的了CSS中的几个属性：position—定位；border-radius—圆角；box-shadow—阴 影；background(linear-gradient)—渐变；transform—旋转和变换；a...
用HTML+CSS写微笑表情
最新发布
Seike_113的博客
12-20 264
【代码】用HTML+CSS写微笑表情。
canvas画一个笑脸和画一个三角形
10-16 320
画一个笑脸主要用到的是画弧形的方法：arc，有五个参数：起始坐标，半径，弧形起始坐标，还有一个参数是顺时针还是逆时针。画的笑脸：虽然丑了点，但是学习了。还有画一个三角形：主要用的是画线的方法：lineTo，有两个参数，起始坐标。记得画之前，先将画笔的坐标移动到某个位置。
canvas 绘制笑脸、哭脸
mcfeng blog
10-08 2027
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>11</title> <style type="text/css"> </style> </head> <body> ...
HTML5性特性——Canvas——案例：绘制笑脸
qq_37622857的博客
09-04 1787
功能： 创建张嘴笑脸再绘制闭嘴笑脸1秒切换一张 1.HTML页面 <canvas id="c3" width="500" height="400"></canvas> 2.CSS样式 body{text-align: center;} canvas{background:rgb(243, 245, 240);} 3.JS文件 //...
canvas制作笑脸
10-27
使用canvas可以制作出各种图形，包括卡通笑脸。下面是一个简单的制作卡通笑脸的代码示例： ``` var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); // 画脸,设置脸的填充...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值