html5＜canvas基础＞

最新推荐文章于 2025-01-26 09:02:14 发布

原创最新推荐文章于 2025-01-26 09:02:14 发布 · 780 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#canvas

HTML4/HTML5 专栏收录该内容

30 篇文章

订阅专栏

本文介绍如何使用HTML5 Canvas API创建一个带有径向渐变效果的矩形，并设置了阴影属性。通过JavaScript代码实现了从红色到蓝色再到绿色的平滑过渡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
     <head>
         <style>
          canvas{
          background:#ccc;
          }
          </style>
          <title>noTitle</title>
          <meta charset="">
          <link rel="stylesheet" href="">
          <script>
          window.onload=function () {
              var canvas=document.getElementById("canvas");
            var cobj=canvas.getContext("2d");
               cobj.rect(0,0,100,100);
               // var colorObj=cobj.createLinearGradient(0,0,100,0);
               var colorObj=cobj.createRadialGradient(50,50,10,50,50,50);
               // var imgObj=cobj.createPattern(document.getElementById("img"),"repeat-y")
               colorObj.addColorStop(0,"red");
               colorObj.addColorStop(0.5,"blue");
               colorObj.addColorStop(1,"green");
               cobj.shadowColor="rgb(11,25,9)";
               cobj.shadowOffsetX=3;
               cobj.shadowOffsetY=3;
               cobj.shadowBlur =5;
               // cobj.fillStyle=imgObj;
               cobj.strokeStyle="green";
               cobj.fillRect(0,0,100,100);
               //cobj.strokeRect(100,100,100,100);

          }
          </script>
     </head>
     <body>
     <canvas width=400 height=400 id="canvas">
          你的浏览器out了
     </canvas>
     <img src="1.jpg" id="img">

     </body>

</html>