canvas插入图片设置背景，渐变

Posted 2020-11-22 hack-ing

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了canvas插入图片设置背景，渐变相关的知识，希望对你有一定的参考价值。

##在canvas中插入图片(需要image对象)
1.canvas操作图片时，必须要等图片加载完才能操作
2.drawImage(image, x, y, width, height)
其中 image 是 image 或者 canvas 对象，x 和 y 是其在目标 canvas 里的起始坐标。
这个方法多了2个参数：width 和 height，这两个参数用来控制当像canvas画入时应该缩放的大小

        window.onload=function(){
        var canvas=document.querySelector("#test");         
          if(canvas.getContext){
                   var ctx=canvas.getContext("2d");
                    var img= new Image();
                        img.src="img/tg.png";
                        img.onload=function(){
                        draw();
                }
                    function draw(){        
                        ctx.drawImage(img,0,0,img.width,img.height)；
                    }
       }
       
       
    }

        window.onload=function(){
        var canvas=document.querySelector("#test");         
          if(canvas.getContext){
                   var ctx=canvas.getContext("2d");
                    var img= new Image();
                        img.src="img/tg.png";
                        img.onload=function(){
                        draw();
                }
                    function draw(){        
                        ctx.drawImage(img,0,0,img.width,img.height);
       }
       
      }       
    }

drawImage

###在canvas中设置背景(需要image对象)
1.createPattern(image, repetition)
image:图像源
epetition:
"repeat"
"repeat-x"
"repeat-y"
"no-repeat"

一般情况下，我们都会将createPattern返回的对象作为fillstyle的值

                    function draw(){        
                     var pattern=ctx.createPattern(img,"no-repeat")//不加；号
                     ctx.fillStyle=pattern;
                     ctx.fillRect(0,0,300,300);
       }

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
         
    
         html,body{
                height: 100%;
                overflow: hidden;
                
            }
            body{
                background: greenyellow;
            }
          #test{
               position: absolute;
               top: 0;
               left: 0;
               right: 0;
               bottom:0;
               margin: auto;
           background: gray;

              
          }
        </style>
    </head>
    <body>
        <canvas id="test" width="300" height="300">
            <span>您的浏览器不支持画布元素 请您换成萌萌的谷歌</span>
        </canvas>
    </body>
     <script type="text/javascript">
          
        window.onload=function(){
        var canvas=document.querySelector("#test");         
          if(canvas.getContext){
                   var ctx=canvas.getContext("2d");
                    var img= new Image();
                        img.src="img/tg.png";
                        img.onload=function(){
                        draw();
                }
                    function draw(){        
                     var pattern=ctx.createPattern(img,"no-repeat")//不加；号
                     ctx.fillStyle=pattern;
                     ctx.fillRect(0,0,300,300);
       }
       
      }       
    }    
    </script>
</html>

View Code

###渐变
canvas渐变（线性渐变）
createLinearGradient(x1, y1, x2, y2)
表示渐变的起点 (x1,y1) 与终点 (x2,y2)

gradient.addColorStop(position, color)
gradient :createLinearGradient的返回值
addColorStop 方法接受 2 个参数，
position 参数必须是一个 0.0 与 1.0 之间的数值，表示渐变中颜色所在的相对位置。
例如，0.5 表示颜色会出现在正中间。
color 参数必须是一个有效的 CSS 颜色值（如 #FFF， rgba(0,0,0,1)，等等）

// function draw(){
var gradient = ctx.createLinearGradient(0, 0, 200, 200);
gradient.addColorStop(0,"red");
gradient.addColorStop(0.5,"yellow");
gradient.addColorStop(0.7,"pink");
gradient.addColorStop(1,"green");
ctx.fillStyle=gradient;
ctx.fillRect(0,0,300,300);

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            html,body{
                height: 100%;
                overflow: hidden;
            }
            body{
                background: pink;
            }
            #test{
                background: gray;
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                margin: auto;
            }
        </style>
    </head>
    <body>
        <canvas id="test" width="300" height="300">
            <span>您的浏览器不支持画布元素 请您换成萌萌的谷歌</span>
        </canvas>
    </body>
    <script type="text/javascript">
        window.onload=function(){
            var canvas = document.querySelector("#test");
            if(canvas.getContext){
                var ctx = canvas.getContext("2d");
                
                /*var img = new Image();
                img.src="tg.png";
                img.onload=function(){
                    draw();
                }*/
                
//                function draw(){
                    var gradient =  ctx.createLinearGradient(0, 0, 200, 200);
                    gradient.addColorStop(0,"red");
                    gradient.addColorStop(0.5,"yellow");
                    gradient.addColorStop(0.7,"pink");
                    gradient.addColorStop(1,"green");
                    ctx.fillStyle=gradient;
                    ctx.fillRect(0,0,300,300);
//                }
                
            }
        }

View Code

canvas渐变（径向渐变）
createRadialGradient(x1, y1, r1, x2, y2, r2)
前三个参数则定义另一个以(x1,y1) 为原点，半径为 r1 的圆，
后三个参数则定义另一个以 (x2,y2) 为原点，半径为 r2 的圆。

                    var gradient = ctx.createRadialGradient(150, 150, 50, 150, 150, 100)
                    gradient.addColorStop(0,"red");
                    gradient.addColorStop(0.5,"yellow");
                    gradient.addColorStop(0.7,"pink");
                    gradient.addColorStop(1,"green");
                    ctx.fillStyle=gradient;
                    ctx.fillRect(0,0,300,300);

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            html,body{
                height: 100%;
                overflow: hidden;
            }
            body{
                background: pink;
            }
            #test{
                background: gray;
                position: absolute;
                left: 0;
                top: 0;
                right: 0;
                bottom: 0;
                margin: auto;
            }
        </style>
    </head>
    <body>
        <canvas id="test" width="300" height="300">
            <span>您的浏览器不支持画布元素 请您换成萌萌的谷歌</span>
        </canvas>
    </body>
    <script type="text/javascript">
        window.onload=function(){
            var canvas = document.querySelector("#test");
            if(canvas.getContext){
                var ctx = canvas.getContext("2d");
                
                /*var img = new Image();
                img.src="tg.png";
                img.onload=function(){
                    draw();
                }*/
                
//                function draw(){
                    var gradient = ctx.createRadialGradient(150, 150, 50, 150, 150, 100)
                    gradient.addColorStop(0,"red");
                    gradient.addColorStop(0.5,"yellow");
                    gradient.addColorStop(0.7,"pink");
                    gradient.addColorStop(1,"green");
                    ctx.fillStyle=gradient;
                    ctx.fillRect(0,0,300,300);
//                }
                
            }
        }
        
        
    </script>
</html>

View Code

以上是关于canvas插入图片设置背景，渐变的主要内容，如果未能解决你的问题，请参考以下文章

canvas之渐变

在word中怎么在指定的页码中插入背景？

CSS背景渐变图片问题

对于canvas画图时，改变其中一条线的颜色，该怎么解决

WPF中用xaml怎么给Gird或canvas插入背景图片？

如何为 UIButton 设置自定义渐变背景？