关注我们

HTML5 中的 Pattern and Shadow函数

创建图案

在画布上创建图案需要以下方法

No	方法和描述
1	createPattern(image，repetition) 此方法将使用图像创建图案。第二个参数可以是具有以下值之一的字符串:repeat，repeat-x，repeaty和no-repeat。无涯教程网

以下是一个简单的示例，该示例利用上述方法创建了一个不错的模式。

<!DOCTYPE HTML>

<html>
   <head>
      
      <style>
         #test {
            width:100px;
            height:100px;
            margin: 0px auto;
         }
      </style>
      
      <script type="text/javascript">
         function drawShape() {
            
            //使用 DOM 获取画布元素
            var canvas=document.getElementById('mycanvas');
            
            //连接数据库凭据
            if (canvas.getContext) {
            
               //确保不支持画布时不执行
               var ctx=canvas.getContext('2d');
               
               //创建新的图像对象以用作图案
               var img=new Image();
               
               img.src='images/pattern.jpg';
               img.onload=function() {
                  
                  //创建模式
                  var ptrn=ctx.createPattern(img,'repeat');
                  ctx.fillStyle=ptrn;
                  ctx.fillRect(0,0,150,150);
               }
            } else {
               alert('You need Safari or Firefox 1.5+ to see this demo.');
            }
         }
      </script>
   </head>
    
   <body id="test" onload="drawShape();">
      <canvas id="mycanvas"></canvas>
   </body>
   
</html>

假设无涯教程使用以下模式 images/pattern.jpg 。

上面的示例将得出以下输出-

创建阴影

HTML5 canvas提供了在图纸周围创建漂亮阴影的功能。所有绘图操作均受四个全局阴影属性的影响。

产品编号。	属性和说明
1	shadowColor [=value] 此属性返回当前阴影颜色，可以对其进行设置以更改阴影颜色。
2	shadowOffsetX [=value] 此属性返回当前阴影偏移量X，可以对其进行设置以更改阴影偏移量X。
3	shadowOffsetY [=value] 此属性返回当前阴影偏移Y，可以设置，更改阴影偏移Y。
4	shadowBlur [=value] 此属性返回应用于阴影的当前模糊级别，可以对其进行设置以更改模糊级别。

下面是一个简单的示例，该示例利用上述属性绘制阴影。

<!DOCTYPE HTML>

<html>
   <head>
      
      <style>
         #test {
            width: 100px;
            height:100px;
            margin: 0px auto;
         }
      </style>
      
      <script type="text/javascript">
         function drawShape() {
            
            //使用 DOM 获取画布元素
            var canvas=document.getElementById('mycanvas');
            
            //连接数据库凭据
            if (canvas.getContext) {
            
               //确保不支持画布时不执行
               var ctx=canvas.getContext('2d');
               
               ctx.shadowOffsetX=2;   
               ctx.shadowOffsetY=2;   
               
               ctx.shadowBlur=2;   
               ctx.shadowColor="rgba(0, 0, 0, 0.5)";
               
               ctx.font="20px Times New Roman";
               ctx.fillStyle="Black";
               
               ctx.fillText("This is shadow test", 5, 30);
            } else {
               alert('You need Safari or Firefox 1.5+ to see this demo.');
            }
         }
      </script>
   </head>
   
   <body id="test" onload="drawShape();">
      <canvas id="mycanvas"></canvas>
   </body>
</html>

上面的示例将产生以下输出-

祝学习愉快！(内容编辑有误？请选中要编辑内容 -> 右键 -> 修改 -> 提交！)

技术教程推荐

Service Mesh实践指南 -〔周晶〕

Nginx核心知识150讲 -〔陶辉〕

玩转Git三剑客 -〔苏玲〕

Web协议详解与抓包实战 -〔陶辉〕

ZooKeeper实战与源码剖析 -〔么敬国〕

Linux内核技术实战课 -〔邵亚方〕

说透低代码 -〔陈旭〕

大厂设计进阶实战课 -〔小乔〕

手把手带你写一个 MiniTomcat -〔郭屹〕

好记忆不如烂笔头。留下您的足迹吧 :)