zoukankan      html  css  js  c++  java
  • canvas阴影

    shadowOffsetx 阴影X轴的移动

    shadowOffsety 阴影的y轴移动

    shadowColor 阴影颜色

    shadowBlur 模糊范围

    <!DOCTYPE html>
    <html>
    <head lang="en">
    <meta charset="utf-8">
    <title></title>
    <script>
    function draw(id){
    var canvas = document.getElementById(id);
    var context = canvas.getContext("2d");
    context.fillStyle = "#eeeeef";
    context.fillRect(0,0,500,500);
    context.shadowOffsetX = 10;
    context.shadowOffsetY = 10;
    context.shadowColor = "rgba(100,100,100,0.5)";
    context.shadowBlur = 7.5;
    context.translate(0,50);
    for (var i = 0; i<3; i++) {
    context.translate(100,100);
    create5Star(context);
    context.fill();
    }

    }
    function create5Star(context){
    var dx = 100;
    var dy = 0;
    var s = 50;
    context.beginPath();
    context.fillStyle = "rgba(255,0,0,0.5)";
    var x = Math.sin(0);
    var y = Math.cos(0);
    var dig = Math.PI/5*4;
    for (var i =0; i<5; i++) {
    var x = Math.sin(i*dig);
    var y = Math.cos(i*dig);
    context.lineTo(dx+x*s,dy+y*s);
    }
    context.closePath();
    }
    </script>
    </head>
    <body onload="draw('canvas')">
    <canvas id="canvas" width="500" height="500"></canvas>
    </body>
    </html>

  • 相关阅读:
    封装( 增删改 查 )类
    php注释规范
    php访问mysql数据库
    php 文件限速下载代码
    jQuery鼠标事件汇总
    权限管理
    文件管理 打开-返回上级
    文件操作
    简单的文件上传
    ajax XML
  • 原文地址:https://www.cnblogs.com/qiuzhimutou/p/4722853.html
Copyright © 2011-2022 走看看