给你一个笑脸

今日冬至,愿你笑靥如初

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8" />

    <title>Document</title>

</head>

<body>

    <canvas id="mycanvas" width="800px" height="800px"></canvas>

    <script>

    var c=document.getElementById("mycanvas");

    var ctx=c.getContext("2d");

    ctx.beginPath();

    //画圆

    ctx.arc(500,300,200,0,2*Math.PI);

    var grd=ctx.createRadialGradient(500,300,140,500,300,200);

    grd.addColorStop(0,"#f0e720");

    grd.addColorStop(1,"#ffca3c");

    ctx.fillStyle=grd;

    ctx.fill();

    //画的笑脸

    ctx.beginPath();

    ctx.arc(500, 300, 140,0,2*Math.PI);

    ctx.fillStyle="#7f2e00";

    ctx.fill();

    ctx.beginPath();

    ctx.arc(500, 290,140, 0, 2*Math.PI);

    ctx.fillStyle="#f0e720";

    ctx.fill();

 

    //左眉毛

    ctx.beginPath();

    ctx.moveTo(430,170);

    ctx.quadraticCurveTo(390,90, 350, 150);

    ctx.moveTo(350, 150);

    ctx.quadraticCurveTo(386,120, 430,170);

    ctx.fillStyle="#0c0c0e"

    ctx.fill();

 

    //右眉毛

    ctx.beginPath();

    ctx.moveTo(560, 170);

    ctx.quadraticCurveTo(620, 90, 650, 150);

    ctx.moveTo(650, 150);

    ctx.quadraticCurveTo(616,120, 560, 170);

    ctx.fillStyle="#0c0c0e"

    ctx.fill();

 

    //左眼睛

    ctx.beginPath();

    ctx.moveTo(310,210);

    ctx.quadraticCurveTo(410,170, 470, 215);

    ctx.quadraticCurveTo(469,225, 460, 235);

    ctx.quadraticCurveTo(417, 200, 315, 230);

    ctx.quadraticCurveTo(310, 225, 310,210);

    ctx.lineWidth=3;

    ctx.strokeStyle="#7b3f00"

    ctx.stroke();

    ctx.fillStyle="#fff";

    ctx.fill();

 

    //右眼睛

    ctx.beginPath();

    ctx.moveTo(520,205);

    ctx.quadraticCurveTo(620, 170, 690, 212);

    ctx.quadraticCurveTo(689, 222, 680, 232);

    ctx.quadraticCurveTo(627, 200, 530, 227);

    ctx.quadraticCurveTo(525,222, 520,205);

    ctx.lineWidth=3;

    ctx.strokeStyle="#7b3f00"

    ctx.stroke();

    ctx.fillStyle="#fff";

    ctx.fill();

 

    //眼珠

    ctx.beginPath();

    ctx.arc(340, 210, 14, 0,2*Math.PI)

    ctx.fillStyle="#000";

    ctx.fill();

 

    ctx.beginPath();

    ctx.arc(550, 210, 14, 0,2*Math.PI)

    ctx.fillStyle="#000";

    ctx.fill();

    //画椭圆脸蛋

    ctx.beginPath();

    var grd1=ctx.createRadialGradient(395,250,24,395,250,12);

    var grd2=ctx.createRadialGradient(600,250,24,395,250,12);

    grd1.addColorStop(0,"#f5b201");

    grd1.addColorStop(1,"#fc9900");

    ctx.fillStyle=grd1;

    ctx.shadowBlur=10;

    ctx.shadowColor="#fe9b00";

    grd2.addColorStop(0,"#f5b201");

    grd2.addColorStop(1,"#fc9900");

    ctx.fillStyle=grd2;

    ctx.shadowBlur=10;

    ctx.shadowColor="#fe9b00";

    EllipseTwo(ctx,395,250,24,12);

    EllipseTwo(ctx,600,250,24,12)

    function EllipseTwo(context, x, y, a, b) {

        context.save();

        var r = (a > b) ? a : b;

        var ratioX = a / r;

        var ratioY = b / r;

        context.scale(ratioX, ratioY);

        context.beginPath();

        context.arc(x / ratioX, y / ratioY, r, 0, 2 * Math.PI, false);

        context.closePath();

        context.restore();

        context.fill();

    }

    </script>

</body>

</html>

转载于:https://www.cnblogs.com/luludehuhuan/p/6206383.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/371795.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mysql安装与配置的截图_windows下MySQL5.6版本安装及配置过程附有截图和详细说明...

随着MYSQL版本的更新以及电脑系统的变化&#xff0c;我们给大家整理了各种电脑环境下安装MYSQL的图解过程&#xff0c;希望我们整理的内容能够帮助到大家&#xff1a;mysql安装图解总结https://www.jb51.net/article/142398.htm编辑者&#xff1a;Vocabulary下面详细介绍5.6版本…

mysql 更新日的数据类型_[每日更新-MySQL基础]5.常用的数据类型-整数和字符串

1. 数据类型在学习PHP的时候我们已经讲过数据类型了&#xff0c;所谓数据类型就是数据的格式。每一种数据类型在计算机中存储的方式会有差异&#xff0c;占用的存储容量也有区别&#xff0c;所以选择合适的数据类型可以节约我们的存储成本&#xff0c;也方便我们的程序运行和…

Hello World with Spring 3 MVC

在2005年&#xff0c;我对Martin Fowler的这篇文章对Spring进行了介绍。从那时起&#xff0c;我就修改了许多IoC框架&#xff0c;包括Guice &#xff0c; PicoContainer &#xff0c; NanoContainer等。虽然我很喜欢与IoC一起工作&#xff0c;但我必须说Spring在过去的5年中&am…

ansible 安装

1、简介 ansible是新出现的自动化运维工具&#xff0c;基于Python开发&#xff0c;集合了众多运维工具&#xff08;puppet、cfengine、chef、func、fabric&#xff09;的优点&#xff0c;实现了批量系统配置、批量程序部署、批量运行命令等功能。ansible是基于模块工作的&#…

JS原型详解

参考的别人家的博客http://www.cnblogs.com/ljchow/archive/2010/06/08/1753526.html ###JS原型####JS原型&#xff0c;就是原型对象&#xff0c;简称原型。不仅构造函数有&#xff0c;普通函数也有* 普通函数&#xff1a;javascript function puTong(){ }; alert(puTong.proto…

c# mysql 插入 和 查询_C#对数据库的操作(增删改查)

1、【在web.config文件中配置】2、【连接字符串】private static readonly string StrCon ConfigurationManager.ConnectionStrings["sqlConnection"].ToString();3、【查询数据方法】/// /// 查询数据/// /// 查询语句/// 参数/// public static DataTable QueryDa…

利用docker在window7下安装TensorFlow

安装过程下碰了不少坑&#xff0c;记录一下安装过程&#xff0c;方便以后有需要时复用。 1、安装docker 下载最新版本的docker并且默认安装即可&#xff0c;安装后打开Docker Quickstart Terminal&#xff0c;初次进去需要一段时间。 下载网址&#xff1a;https://www.docker.c…

哈希长度扩展攻击

在这篇文章中&#xff0c;我将尽力避免夏季的低迷&#xff0c;而将重点放在比抱怨天气更有趣的事情上-哈希长度扩展攻击。 散列长度扩展攻击没什么复杂或复杂的&#xff0c;说实话&#xff0c;这只是关于如何使用散列函数。 正如我以前的一篇文章中所讨论的那样&#xff0c;哈希…

2017年07月03号课堂笔记

2017年07月03号 星期一 多云 空气质量&#xff1a;轻度污染~中度污染 内容&#xff1a;MySQL第四节课 in和not in&#xff1b;两个表的内连接&#xff1b;exists和not exsits的使用&#xff1b;all,any和some&#xff1b; 使用子查询的注意事项&#xff1b;sql优化&#xff08…

excel文件被写保护怎么解除_u盘被写保护怎么解除,看完你就知道了

在平常我们使用U盘存储资料过程中&#xff0c;有时会发现U盘出现无法正常读写的现象&#xff0c;具备表现为U盘被写保护&#xff0c;无法正常执行读写操作。对于小编给大家提供以下解决方法&#xff0c;希望对大家能有所帮助。对U盘执行重置操作01上网搜索并下载“USBOOT”程序…

新建MAVEN项目--pom.xml报错

使用集成了maven的Eclipse版本新建maven项目后&#xff0c;配置文件pom.xml会在project以及引用的xsd文件处出现错误&#xff08;第一、二行报错&#xff09; 其中一个报错例子&#xff1a; Multiple annotations found at this line:- Plugin execution not covered by lifecy…

OSGi案例研究:模块化vert.x

OSGi使Java代码可以清晰地划分为多个模块&#xff0c;这些模块称为捆绑软件 &#xff0c;可以访问由每个捆绑软件的类加载器控制的代码和资源。 OSGi 服务提供了一种附加的分离机制&#xff1a;接口的用户不需要依赖于实现类&#xff0c;工厂等。 以下案例研究旨在使OSGi捆绑包…

mysql一些常用操作_表的一些常用操作_MySQL

bitsCN.com-创建表(也就是创建表结构)&#xff1a;create table tbl_name(列结构&#xff0c;即有哪些属性)[表选项]; 如&#xff1a;班级的信息&#xff1a;(班级编号&#xff0c;开班日期)create table java_class(class_num varchar(10),date_start date);注&#xff1a;该表…

网站appache的ab命令压力测试性能

①&#xff1a;相关不错的博文链接&#xff1a;http://johnnyhg.iteye.com/blog/523818 ②&#xff1a;首先配置好对应的环境上去&#xff0c;有对应的命令 ③&#xff1a;压力测试的指令如下&#xff1a; 1. 最基本的关心两个选项 -c -n例&#xff1a; ./ab -c 100 -n 10000 &…

如何调整自定义标签样式

用chromeF12&#xff0c;查看网页代码在自定义标签上加class&#xff0c;写样式&#xff1a;例如&#xff1a;JSP文件&#xff1a;来自为知笔记(Wiz)转载于:https://www.cnblogs.com/anobugworld/p/7112116.html

无需部署即可测试JPQL / HQL

您是否曾经想在不完全部署应用程序的情况下测试JPQL / HQL&#xff1f; 我们今天在这里看到的是适用于任何JPA实现的简单解决方案&#xff1a;Hibernate&#xff0c;OpenJPA&#xff0c;EclipseLink等。 这篇文章中找到的基本源代码来自于本书&#xff1a;“ Pro JPA 2&#xf…

freemarker页面中文乱码

一、前言 简单的记录freemarker遇到的错误问题&#xff1a;ftl页面中文乱码 由于freemarker整合在ssm框架中&#xff0c;所以笔者直接贴配置代码 <beans xmlns"http://www.springframework.org/schema/beans"xmlns:xsi"http://www.w3.org/2001/XMLSchema-ins…

了解ThreadLocal背后的概念

介绍 我知道本地线程&#xff0c;但直到最近才真正使用过它。 因此&#xff0c;我开始深入研究该主题&#xff0c;因为我需要一种传播某些用户信息的简便方法 通过Web应用程序的不同层&#xff0c;而无需更改每个调用方法的签名。 小前提信息 线程是具有自己的调用栈的单个…

python加密模块教程_Python加密模块的hashlib,hmac模块使用解析

这篇文章主要介绍了Python加密模块的hashlib,hmac模块使用解析,文中通过示例代码介绍的非常详细&#xff0c;对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下在写搬砖脚本中&#xff0c;碰到一个加密的信号标签文件无法运行。import hashlibimport timem ha…

DAO层–救援通用

泛型可以是使用编译时验证&#xff08;类型安全性&#xff09;的功能来创建可重用代码的强大工具。 不幸的是&#xff0c;我感到主流开发人员仍然对此感到恐惧。 但是&#xff0c;比喻海格的蜘蛛&#xff0c;我会说泛型是被严重误解的生物……:-) 我希望以下示例可以证明它们…