HTML canvas 笑脸

<!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>

效果图：

时间： 2024-11-11 17:48:18

HTML canvas 笑脸的相关文章

canvas绘制形状

栅格之前简单模板中有个宽/高150px的canvas元素.如下图所示,canvas元素默认被网格所覆盖.通常来说网格中的一个单元相当于canvas元素中的一像素.栅格的起点为左上角(坐标为(0,0)).所有元素的位置都相对于原点定位.所以图中蓝色方形左上角的坐标为距离左边(Y轴)x像素,距离上边(X轴)y像素(坐标为(x,y)). 绘制矩形不同于SVG,HTML中的元素canvas只支持一种原生的图形绘制:矩形.所有其他的图形的绘制都至少需要生成一条路径. canvas提供了三种方法绘制矩形

仿支付宝笑脸刷新加载动画的实现

看到支付宝的下拉刷新有一个笑脸的动画,因此自己也动手实现一下.效果图如下: 一.总体思路 1.静态部分的笑脸. 这一部分的笑脸就是一个半圆弧,加上两颗眼睛,这部分比较简单,用于一开始的展示. 2.动态笑脸的实现. 2.1.先是从底部有一个圆形在运动,运动在左眼位置时把左眼给绘制,同时圆形继续运动,运动到右眼位置时绘制右眼,圆形继续运动到最右边的位置. 2.2.当上面的圆形运动到最右边时候,开始不断绘制脸,从右向左,脸不断增长,这里脸设置为接近半个圆形的大小. 2.3.当脸画完的时候,开始让脸旋转

Android之canvas详解

首先说一下canvas类: Class Overview The Canvas class holds the "draw" calls. To draw something, you need 4 basic components: A Bitmap to hold the pixels, a Canvas to host the draw calls (writing into the bitmap), a drawing primitive (e.g. Rect, Path, t

Android利用canvas画各种图形(点、直线、弧、圆、椭圆、文字、矩形、多边形、曲线、圆角矩形)

1.首先说一下canvas类: Class OverviewThe Canvas class holds the "draw" calls. To draw something, you need 4 basic components: A Bitmap to hold the pixels, a Canvas to host the draw calls (writing into the bitmap), a drawing primitive (e.g. Rect, Path,

[Canvas学习]绘制图形

学习目的:在Canvas上绘制矩形,三角形,直线,圆弧,曲线栅格栅格canvas grid,canvas元素默认被网格覆盖,栅格的起点是左上角坐标(0,0),元素的位置都是相对于栅格起点来定位的. 绘制矩形 API提供了三种方法绘制矩形 fillRect(x, y, width, height) 绘制填充的矩形 strokeRect(x, y, width, height) 绘制矩形边框 clearRect(x, y, width, height) 清除指定矩形区域变的完全透明 rect(x

简介 jCanvas：当 jQuery遇上HTML5 Canvas

HTML5 可以直接在你的网页中使用 <canvas> 元素及其相关的 JavaScript API绘制的图形. 在这篇文章中,我将向你介绍 jCanvas,一个基于 jQuery的免费且开源的 HTML5的Canvas API. 如果你使用 jQuery 进行开发,jCanvas能够使用 jQuery更简单,更快速的完成一些非常炫酷的 canvas画布及交互效果. 什么是 jCanvas ? jCanvas 官网是这样解释的: "jCanvas is a JavaScript li

html5 canvas基本用法

通过对canvas的初步了解,经过几天的总结,吧canvas的基本用法总结如下:方便以后查阅 <!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas 使用实例</title> </head> <body style="padding:0; margin:0;" onLoad="draw()&

8款给力HTML5/CSS3应用插件可爱的HTML5笑脸

1.HTML5/CSS3实现笑脸动画非常可爱今天我们要分享一款基于纯CSS3实现的笑脸动画,我们只要在面部滑动鼠标,即可让人物的眼睛嘴巴动起来,实现微笑的效果,还挺可爱的. 在线演示源码下载 2.jQuery+Html5实现唯美表白代码:亲爱的女神,我来了! jQuery+Html5实现唯美表白的动画代码:浪漫的动画效果,程序员表白必备! 在线演示源码下载 3.CSS3 3D发光按钮立体感十分强烈这是一款很特别的CSS3按钮,按钮整体是灰黑色主题,每一个按钮在按下时有非常漂亮的3D效

相识HTML5 canvas

Canvas是HTML的API,我们可以用它在网页中实时的来生成图像. 文章导读 1.必备技能 2.用于画图的函数例子: -会话气泡- -心形- -钟表- -星球里的星星- -调色板- -鼠标绘图- -旋转的小方块- 3.图像的处理例子: -图像的灰度和翻转效果- -拾色器- -放大镜- -图像的高斯模糊- 一.必备技能 <canvas id="Canvas" width="400" height