html5 canvas 画hello ketty

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <title>Html5 - 小猫咪</title>
    <link rel="stylesheet" type="text/css" href="css/common/reset.css"/>
    <style>
        body{text-align: center;}
        .wrapper{ height:800px;}
        canvas{ margin-top: 123px;}
    </style>
</head>
<body>
    <div class="wrapper">
        <canvas width="600" height="554"></canvas>
    </div>

    <script>
        var cvs=document.querySelector("canvas");
        var g=cvs.getContext("2d");

        //尾巴
        g.strokeStyle="#33190c";
        g.fillStyle="#ffffd9";
        g.lineWidth=6;
        g.beginPath();
          g.moveTo(433,458);
          g.lineTo(477,438);
          g.bezierCurveTo(492,433,496,453,484,463);
          g.lineTo(433,494);
        g.fill();
        g.stroke();

        //身体
        g.beginPath();
          g.moveTo(255,392);
          g.lineTo(255,526);
          g.bezierCurveTo(256,555,282,557,293,530);
          g.lineTo(383,530);
          g.bezierCurveTo(392,557,419,558,428,526);
          g.quadraticCurveTo(434,523,430,393);
        g.closePath();
        g.fill();
        g.stroke();
        //肚白
        g.fillStyle="#fff";
        g.beginPath();
          g.moveTo(317,501);
          g.quadraticCurveTo(345,504,363,500);
          g.quadraticCurveTo(386,492,389,480);
          g.quadraticCurveTo(393,469,396,437);
        g.closePath();
        g.fill();
        //肚子蓝点
        g.fillStyle="#e5f8ef";
        g.beginPath();
          g.moveTo(428,459);
          g.bezierCurveTo(407,456,405,479,421,482);
          g.bezierCurveTo(393,482,394,507,427,511);
          g.quadraticCurveTo(429,485,428,459);
        g.closePath();
        g.fill();

        //耳朵(左边)
        g.strokeStyle="#33190c";
        g.fillStyle="#ffffd9";
        g.lineWidth=4;
        g.beginPath();
          g.moveTo(106,79);
          g.quadraticCurveTo(114,4,209,14);
        g.fill();
        g.stroke();
        //耳朵(右边)
        g.beginPath();
          g.lineWidth=5;
          g.moveTo(376,14);
          g.quadraticCurveTo(431,13,446,15);
          g.quadraticCurveTo(488,20,498,48);
          g.quadraticCurveTo(508,75,512,110);
        g.fill();
        g.stroke();

        g.beginPath();
          g.lineWidth=8;
          g.moveTo(470,65);
          g.lineTo(483,27);
        g.stroke();

        g.beginPath();
          g.fillStyle="#fecce5";
          g.moveTo(473,65);
          g.lineTo(483,30);
          g.bezierCurveTo(502,46,496,60,512,110);
        g.closePath();
        g.fill();

        //头
        g.lineWidth=10;
        g.beginPath();
          g.strokeStyle="#33190c";
          g.fillStyle="#ffffd9";
          g.moveTo(280,6);
          g.bezierCurveTo(476,0,535,154,541,166);
          g.lineTo(546,180);
          g.bezierCurveTo(584,304,530,368,432,392);
          g.quadraticCurveTo(210,460,90,372);
          g.quadraticCurveTo(38,324,34,314);
          g.quadraticCurveTo(1,268,38,174);
          g.quadraticCurveTo(128,8,280,6);
        g.closePath();
        g.fill();
        g.stroke();

        //脸白
        g.fillStyle="#fff";
        g.beginPath();
          g.moveTo(29,294);
          g.quadraticCurveTo(57,339,99,371);
          g.quadraticCurveTo(272,404,427,390);
          g.bezierCurveTo(500,371,567,330,549,216);
          g.bezierCurveTo(560,298,518,360,427,378);
          g.quadraticCurveTo(272,404,99,364);
          g.quadraticCurveTo(55,334,29,294);
        g.closePath();
        g.fill();

        //胡须(左边)
        g.strokeStyle="#33190c";
        g.lineWidth=7;
        g.beginPath();
          g.moveTo(6,212);
          g.lineTo(23,212);
          g.stroke();
          g.moveTo(7,211);
          g.quadraticCurveTo(5,212,7,213);
        g.stroke();

        g.beginPath();
          g.moveTo(2,246);
          g.lineTo(15,246);
          g.stroke();
          g.moveTo(6,245);
          g.quadraticCurveTo(1,246,6,247);
        g.stroke();

        g.beginPath();
          g.moveTo(6,284);
          g.lineTo(17,281);
          g.stroke();
          g.moveTo(9,282);
          g.quadraticCurveTo(4,287,6,282);
        g.stroke();
        //胡须(右边边)
        g.lineWidth=6;
        g.beginPath();
          g.moveTo(529,233);
          g.lineTo(596,246);
          g.stroke();
          g.moveTo(530,233);
          g.quadraticCurveTo(528,233,530,234);
          g.stroke();
          g.moveTo(596,246);
          g.quadraticCurveTo(597,246,596,246);
        g.stroke();

        g.beginPath();
          g.moveTo(525,263);
          g.lineTo(587,290);
          g.stroke();
          g.moveTo(526,263);
          g.quadraticCurveTo(524,263,527,264);
          g.stroke();
          g.moveTo(587,290);
          g.quadraticCurveTo(589,291,587,290);
        g.stroke();

        g.beginPath();
          g.moveTo(523,296);
          g.lineTo(581,331);
          g.stroke();
          g.moveTo(524,298);
          g.quadraticCurveTo(522,294,524,297);
          g.stroke();
          g.moveTo(581,331);
          g.quadraticCurveTo(583,332,581,331);
        g.stroke();

        //眉毛(左边)
        g.lineWidth=5;
        g.beginPath();
          g.moveTo(163,40);
          g.lineTo(182,42);
          g.moveTo(182,42);
          g.quadraticCurveTo(185,42,180,42);
        g.stroke();
        //眉毛(右边)
        g.beginPath();
          g.moveTo(374,54);
          g.quadraticCurveTo(386,43,396,57);
          g.moveTo(375,54);
          g.quadraticCurveTo(372,56,376,53);
          g.moveTo(395,56);
          g.quadraticCurveTo(397,58,395,56);
        g.stroke();

        //额头蓝点
        g.fillStyle="#e5f8ef";
        g.beginPath();
          g.moveTo(190,30);
          g.bezierCurveTo(180,57,216,65,218,20);
          g.quadraticCurveTo(203,23,190,30);
        g.closePath();
        g.fill();
        g.beginPath();
          g.moveTo(239,15);
          g.bezierCurveTo(233,70,280,60,278,11);
          g.quadraticCurveTo(257,11,239,15);
        g.closePath();
        g.fill();
        g.beginPath();
          g.moveTo(304,11);
          g.bezierCurveTo(285,48,329,74,339,15);
          g.quadraticCurveTo(322,11,304,11);
        g.closePath();
        g.fill();
        g.beginPath();
          g.moveTo(365,20);
          g.bezierCurveTo(354,47,380,53,389,28);
          g.quadraticCurveTo(378,23,366,20);
        g.closePath();
        g.fill();

        //腮红(左边)
        g.fillStyle="#ffcce6";
        g.beginPath();
          g.moveTo(110,199);
          g.quadraticCurveTo(73,179,47,198);
          g.bezierCurveTo(41,204,43,211,47,215);
          g.quadraticCurveTo(73,235,120,212);
        g.closePath();
        g.fill();
        //腮红(右边)
        g.beginPath();
          g.moveTo(428,200);
          g.quadraticCurveTo(470,186,507,210);
          g.bezierCurveTo(519,218,514,240,497,244);
          g.quadraticCurveTo(454,256,420,227);
        g.closePath();
        g.fill();
        //害羞(左边)
        g.strokeStyle="#361909";
        g.lineWidth=6;
        g.beginPath();
          g.moveTo(71,205);
          g.lineTo(65,212);
          g.moveTo(71,205);
          g.bezierCurveTo(75,200,74,202,71,205);
          g.moveTo(66,211);
          g.bezierCurveTo(63,213,62,217,66,210);
          g.moveTo(88,205);
          g.lineTo(82,212);
          g.moveTo(88,205);
          g.bezierCurveTo(90,202,91,202,88,205);
          g.moveTo(82,212);
          g.bezierCurveTo(80,215,78,216,82,212);
        g.stroke();
        //害羞(右边)
        g.beginPath();
          g.moveTo(448,218);
          g.lineTo(443,224);
          g.moveTo(448,218);
          g.bezierCurveTo(452,213,454,215,444,224);
          g.moveTo(443,224);
          g.bezierCurveTo(441,225,439,230,444,224);
          g.moveTo(466,218);
          g.lineTo(460,225);
          g.moveTo(466,219)
          g.bezierCurveTo(468,215,469,216,465,219);
          g.moveTo(460,225);
          g.bezierCurveTo(455,230,455,231,460,225);
          g.moveTo(482,220);
          g.lineTo(475,228);
          g.moveTo(482,221);
          g.bezierCurveTo(484,216,484,219,481,221);
          g.moveTo(476,227);
          g.bezierCurveTo(472,231,472,231,476,227);
        g.stroke();

        //眼睛(左边)
        g.fillStyle="#35190d";
        g.beginPath();
          g.moveTo(129,140);
          g.bezierCurveTo(206,118,215,204,172,226);
          g.bezierCurveTo(92,249,85,165,129,140);
        g.closePath();
        g.fill();
        //眼睛(右边)
        g.beginPath();
          g.moveTo(332,154);
          g.bezierCurveTo(421,108,462,208,407,240);
          g.bezierCurveTo(357,279,264,214,332,154);
        g.closePath();
        g.fill();

        //睫毛(左边)
        g.strokeStyle="#35190d";
        g.lineWidth=6;
        g.beginPath();
          g.moveTo(129,146);
          g.lineTo(129,131);
        g.stroke();
        //睫毛(右边)
        g.beginPath();
          g.moveTo(334,156);
          g.lineTo(328,146);
        g.stroke();

        //眼珠(左边)
        g.fillStyle="#fff";
        g.beginPath();
          g.moveTo(177,151);
          g.bezierCurveTo(190,152,183,166,177,164);
          g.bezierCurveTo(168,164,168,152,177,151);
        g.closePath();
        g.fill();
        //眼珠(右边)
        g.beginPath();
          g.moveTo(393,154);
          g.bezierCurveTo(406,155,402,171,393,169);
          g.bezierCurveTo(384,169,382,155,393,154);
        g.closePath();
        g.fill();

        //鼻子
        g.fillStyle="#35190e";
        g.beginPath();
          g.moveTo(237,220);
             g.bezierCurveTo(237,209,254,209,254,220);
             g.bezierCurveTo(254,231,238,231,237,220);
        g.closePath();
        g.fill();

        g.strokeStyle="#35190e";
        g.lineWidth=4;
        g.beginPath();
          g.moveTo(218,229);
          g.bezierCurveTo(222,241,239,243,245,226);
          g.moveTo(219,230);
          g.bezierCurveTo(217,228,218,228,219,230);
          g.moveTo(245,226);
          g.bezierCurveTo(254,245,279,244,285,234);
          g.moveTo(285,234);
          g.bezierCurveTo(286,232,287,232,285,234);
        g.stroke();

        //爱心
        g.strokeStyle="#33190c";
        g.fillStyle="#fe0000";
        g.lineWidth=10;
        g.beginPath();
          g.moveTo(98,376);
          g.bezierCurveTo(70,301,156,194,246,303);
          g.bezierCurveTo(403,197,476,345,424,402);
          g.quadraticCurveTo(375,475,260,528);
          g.quadraticCurveTo(247,536,225,526);
          g.quadraticCurveTo(130,463,98,376);
        g.closePath();
        g.fill();
        g.stroke();
        //爱心中心
        g.fillStyle="#ff334c";
        g.beginPath();
          g.moveTo(109,372);
          g.bezierCurveTo(68,240,214,226,236,326);
          g.quadraticCurveTo(297,250,384,278);
          g.quadraticCurveTo(408,288,404,316);
          g.quadraticCurveTo(380,416,263,469);
          g.bezierCurveTo(241,480,220,470,202,464);
          g.quadraticCurveTo(118,416,109,372);
        g.closePath();
        g.fill();
        //白点
        g.fillStyle="#fff";
        g.beginPath();
          g.moveTo(129,273);
          g.quadraticCurveTo(142,260,155,273);
          g.bezierCurveTo(151,286,125,278,129,273);
        g.closePath();
        g.fill();
        g.beginPath();
          g.moveTo(292,293);
          g.bezierCurveTo(296,283,333,271,351,278);
          g.bezierCurveTo(350,292,300,302,292,293);
        g.closePath();
        g.fill();

        //手(左边)
        g.strokeStyle="#33190c";
        g.fillStyle="#fff";
        g.lineWidth=6;
        g.beginPath();
          g.moveTo(98,377);
          g.bezierCurveTo(137,367,128,417,113,415);
          g.bezierCurveTo(97,418,74,390,98,377);
        g.closePath();
        g.fill();
        g.stroke();
        //手(右边)
        g.beginPath();
          g.moveTo(390,434);
          g.bezierCurveTo(358,407,392,366,427,388);
          g.quadraticCurveTo(416,409,393,435);
        g.closePath();
        g.fill();
        g.stroke();

    </script>
</body>
</html>
时间： 2024-10-22 16:38:05

html5 canvas 画hello ketty的相关文章

HTML5 Canvas 画钟表

画钟表是2D画图的老生常谈,我也不能免俗弄了一个.代码如下: <!DOCTYPE html> <html lang="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <head> <title>钟表</title> </head> <body onloa

html5 canvas画饼

1. [图片] lxdpie.jpg ?2. [文件] lqdpie.html ~ 801B     下载(7) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html lang="ru"><head>  <title></title>  <met

html5 canvas画五角星（美国队长）

画一波五角星: 美国队长图标 原理:  (1)根据五角星的顶点,外顶点5个,内顶点5个,分成内外圆 (2)由三角函数可表示出每个顶点的位置 (3)利用canvas的lineTo()接口画图 上代码: 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Captain America</tit

Html5 canvas 画带箭头的线

 var canvas=document.getElementById("canvas");         var context=canvas.getContext("2d");         function Line(x1,y1,x2,y2){             this.x1=x1;             this.y1=y1;             this.x2=x2;             this.y2=y2;         }  

html5 canvas 画时钟

<!DOCTYPE HTML> <html> <body> <canvas id="myCanvas" width="400" height="400" style="border:1px solid"></canvas> <script type="text/javascript">     // get the canvas    

html5——canvas画直线

<html> <head> <title>canvas demo</title> </head> <body> <canvas id="mycanvas" width="500px" height="500px" ></canvas> <script type="text/javascript"> var mycanva

html5 canvas绘制圆形印章，以及与页面交互

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>HTML5 Canvas画印章</title> 6 <script type="text/javascript" src="../JQmain/jquery-2.2.0.min.js"></script> 7 &l

html5学习(一)--canvas画时钟

利用空余时间学习一下html5. 1 <!doctype html> 2 <html> 3 <head></head> 4 <body> 5 <canvas id="clock" width="500" height="500"></canvas> 6 <script> 7 var clock=document.getElementById('cloc

html5中用canvas画八大行星围绕太阳转

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8&