html5＜canvas基础＞

﹏ヽ暗。殇╰゛Y 2022-06-15 07:24 237阅读 0赞

<!DOCTYPE html>  
<html>  
     <head>  
         <style>  
          canvas\{  
            background:\#ccc;  
          \}  
          </style>  
          <title>noTitle</title>  
          <meta charset="">  
          <link rel="stylesheet" href="">  
          <script>  
            window.οnlοad=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>

![Image 1][]

[Image 1]: