給你一個笑臉

今日冬至,愿你笑靨如初

<!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.pswp.cn/news/371795.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/371795.shtml
英文地址,請注明出處:http://en.pswp.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;我會說泛型是被嚴重誤解的生物……:-) 我希望以下示例可以證明它們…