html5＜canvas基础＞

来源：互联网发布：北邮网络远程教育编辑：程序博客网时间：2024/06/08 05:27

<!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>

阅读全文

0 0