zoukankan      html  css  js  c++  java
  • 使用javascript和canvas画月半弯

    使用javascript和canvas画月半弯,月半弯好浪漫!浏览器须支持html5

    查看效果:http://keleyi.com/a/bjad/8xqdm0r2.htm

    以下是代码:

     1 <!doctype html>
     2 <html>
     3 <head>
     4 <title>使用javascript和canvas画月半弯-柯乐义</title>
     5 <style>
     6 canvas{display: block;border:1px dotted skyblue;}
     7 </style>
     8 </head>
     9 <body>
    10 <h1>使用javascript和canvas画月半弯·柯乐义</h1>    
    11 <canvas id="canvas-keleyi-com" width="500" height="400"></canvas>
    12 <script>
    13 var nimo = {};
    14 window.onload = function () {
    15 nimo.canvas = document.getElementById('canvas-ke'+'leyi-com');
    16 nimo.context = nimo.canvas.getContext('2d');
    17 nimo.starBgImg = new Image();
    18 nimo.starBgImg.src = 'http://keleyi.com/keleyi/phtml/html5/22/star-bg.jpg';
    19 nimo.starBgImg.onload = function () {
    20 //填充星星背景
    21 nimo.statBg = nimo.context.createPattern(nimo.starBgImg, 'repeat')
    22 nimo.context.rect(0, 0, nimo.canvas.width, nimo.canvas.height);
    23 nimo.context.fillStyle = nimo.statBg;
    24 nimo.context.fill();
    25 //绘制月亮轮廓
    26 nimo.context.beginPath();
    27 nimo.context.arc(200, 200, 100, 0.6 * Math.PI, 1.3 * Math.PI);
    28 nimo.context.bezierCurveTo(140, 119, 93, 224, 169, 295)
    29 //填充月亮轮廓和设置投影
    30 nimo.context.shadowColor = "blue";
    31 nimo.context.shadowBlur = 3;
    32 nimo.context.strokeStyle = "blue";
    33 nimo.context.stroke();
    34 //填充放射渐变给月亮
    35 nimo.radialGradient = nimo.context.createRadialGradient(150, 200, 0, 150, 200, 50);
    36 nimo.radialGradient.addColorStop(0, 'white')
    37 nimo.radialGradient.addColorStop(1, '#999')
    38 nimo.context.fillStyle = nimo.radialGradient;
    39 nimo.context.fill()
    40 //绘制月亮的研究和嘴巴    
    41 nimo.context.shadowColor = "white";
    42 nimo.context.beginPath();
    43 nimo.context.moveTo(110, 173);
    44 nimo.context.lineTo(114, 173);
    45 nimo.context.moveTo(119, 173);
    46 nimo.context.lineTo(123, 173);
    47 nimo.context.stroke();
    48 nimo.context.beginPath();
    49 nimo.context.arc(116, 183, 2, 0, 2 * Math.PI);
    50 nimo.context.stroke();
    51 nimo.context.shadowColor = 'transparent';
    52 nimo.context.font = "15px 微软雅黑"
    53 nimo.context.fillText('您好,我是月亮,祝您的美梦像星星一样永恒!', 100, 100)//设置文字及在图片上的位置
    54 }
    55 }
    56 </script>
    57 </body>
    58 </html>

    web前端:http://www.cnblogs.com/jihua/p/webfront.html

  • 相关阅读:
    NUTCH Exception in thread "Thread-12751" java.lang.OutOfMemoryError: PermGen space
    未登录词识别
    中文分词索引
    hadoop 存储空间满了
    nutch 生产者队列的大小如何控制 threadcount * 50
    nutch 采集到的数据与实际不符
    nutch 采集效率--设置采集间隔
    异常: http://www.ly.com/news/visa.html: java.io.IOException: unzipBestEffort returned null
    hbase 取多个版本数据
    JavaScript制作时钟特效
  • 原文地址:https://www.cnblogs.com/jihua/p/html5moon.html
Copyright © 2011-2022 走看看