canvas基础—03设置背景和渐变

超、凢脫俗 2022-03-19 20:06 605阅读 0赞

### 1.设置背景 ###

![20190213142553177.png][]

demo.html

**createPattern(obj,'repeat')**

<!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>canvas学习</title>
    <style>
    body{background: black}
    #c1{background: white}
    span{color: white}
    </style> 
    <script type="text/javascript">
        window.onload = function(){
            var oC = document.getElementById('c1');
            var oGC = oC.getContext('2d');
            var yImg = new Image()
            yImg.onload = function(){
                draw(this)
            }
            yImg.src = '../img/2.png'
            function draw(obj){
                var bg = oGC.createPattern(obj,'repeat')
                oGC.fillStyle = bg
                oGC.fillRect(0,0,300,300)
            }
        }
    </script>
    </head>
    <body>
    
    <canvas id="c1" width="400" height="400">
    	<span>不支持canvas浏览器</span>
    </canvas>
    
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70][]

### 2.渐变  ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1][]

线型渐变demo.html

** createLinearGradient(150,100,150,200)//(起始点坐标x,起始点坐标y，结束点坐标x,结束点坐标y)**

<!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>canvas学习</title>
    <style>
    body{background: black}
    #c1{background: white}
    span{color: white}
    </style> 
    <script type="text/javascript">
        window.onload = function(){
            var oC = document.getElementById('c1');
            var oGC = oC.getContext('2d');
            
            var obj = oGC.createLinearGradient(150,100,150,200)//(起始点坐标x,起始点坐标y，结束点坐标x,结束点坐标y)
            obj.addColorStop(0,'red')//起点位置的颜色
            obj.addColorStop(1,'blue')//终点位置的颜色
    
            oGC.fillStyle = obj
            oGC.fillRect(150,100,100,100)
        }
    </script>
    </head>
    <body>
    
    <canvas id="c1" width="400" height="400">
    	<span>不支持canvas浏览器</span>
    </canvas>
    
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2][]

放射性渐变demo.html

**createRadialGradient(200,200,100,200,200,150)//createRadialGradient第一个圆的坐标和半径，第二个圆的坐标和半径 **

<!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8"> 
    <title>canvas学习</title>
    <style>
    body{background: black}
    #c1{background: white}
    span{color: white}
    </style> 
    <script type="text/javascript">
        window.onload = function(){
            var oC = document.getElementById('c1');
            var oGC = oC.getContext('2d');
            
            var obj = oGC.createRadialGradient(200,200,100,200,200,150)//createRadialGradient第一个圆的坐标和半径，第二个圆的坐标和半径
            obj.addColorStop(0,'red')
            obj.addColorStop(0.5,'yellow')
            obj.addColorStop(1,'blue')
    
            oGC.fillStyle = obj
            oGC.fillRect(0,0,oC.width,oC.height)
        }
    </script>
    </head>
    <body>
    
    <canvas id="c1" width="400" height="400">
    	<span>不支持canvas浏览器</span>
    </canvas>
    
    </body>
    </html>

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 3][]

[20190213142553177.png]: /images/20220320/ba9ac3a68ebc4e599552b483693ff8de.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70]: /images/20220320/559347f6e46546ccad8fd1fa9ec396fc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 1]: /images/20220320/7c593e86ff5146159d2a7f3e48be3f4e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 2]: /images/20220320/31a2091e1de046ee8a1d575f8d34d375.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW9qc3Vu_size_16_color_FFFFFF_t_70 3]: /images/20220320/420f1023bcc64403bd6c2ed5fb053122.png