janvas绘制文字立体阴影效果代码-html代码-BFW代码库

janvas绘制文字立体阴影效果代码

代码语言：html

所属分类：其他

代码描述：janvas绘制文字立体阴影效果代码图饼状图图表效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html5>
<html>
<head>
    <meta charset="UTF-8">



</head>
<body>

    <div id="app" style="width: 100%;height: 100%;"></div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/janvas.js"></script>
    <script>
        // 在 div 容器 中央绘制 "HelloWorld"，以下内容为核心特性
          var helloWorld = new janvas.Canvas({
            container: "#app", // 找到容器 id
            methods: {
              init: function () { // 初始化，此回调仅会调用一次
                this.text = new janvas.Text(this.$ctx, 0, 0, "HelloWorld"); // new 一个 Text
                this.text.getStyle().setFont("small-caps bold 128px courier") // 设置字体
                  .setTextAlign("center").setTextBaseline("middle") // 设置文字对齐
                  .setShadowOffsetY(32).setShadowColor("dimgrey").setShadowBlur(5); // 设置阴影
                this.text.getMatrix().setSkewX(Math.PI / 6).setAngle(-Math.PI / 6); // 设置变形
        
                this.grid = new janvas.Grid(this.$ctx, 0, 0, 0, 0, 50); // new 一个网格
                this.grid.getStyle().setAlpha(0.4); // 给网格设置透明.........完整代码请登录后点击上方下载按钮下载查看