##在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,,,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,,,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(,,,);

       }
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

         html,body{

                height: %;

                overflow: hidden;

            }

            body{

                background: greenyellow;

            }

          #test{

               position: absolute;

               top: ;

               left: ;

               right: ;

               bottom:;

               margin: auto;

           background: gray;

          }

        </style>

    </head>

    <body>

        <canvas id="test" width="" height="">

            <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(,,,);

       }

      }

    }

    </script>

</html>

###渐变
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: ;

                padding: ;

            }

            html,body{

                height: %;

                overflow: hidden;

            }

            body{

                background: pink;

            }

            #test{

                background: gray;

                position: absolute;

                left: ;

                top: ;

                right: ;

                bottom: ;

                margin: auto;

            }

        </style>

    </head>

    <body>

        <canvas id="test" width="" height="">

            <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(, , , );

                    gradient.addColorStop(,"red");

                    gradient.addColorStop(0.5,"yellow");

                    gradient.addColorStop(0.7,"pink");

                    gradient.addColorStop(,"green");

                    ctx.fillStyle=gradient;

                    ctx.fillRect(,,,);

//                }

            }

        }

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

                    var gradient = ctx.createRadialGradient(, , , , , )

                    gradient.addColorStop(,"red");

                    gradient.addColorStop(0.5,"yellow");

                    gradient.addColorStop(0.7,"pink");

                    gradient.addColorStop(,"green");

                    ctx.fillStyle=gradient;

                    ctx.fillRect(,,,);
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            *{

                margin: ;

                padding: ;

            }

            html,body{

                height: %;

                overflow: hidden;

            }

            body{

                background: pink;

            }

            #test{

                background: gray;

                position: absolute;

                left: ;

                top: ;

                right: ;

                bottom: ;

                margin: auto;

            }

        </style>

    </head>

    <body>

        <canvas id="test" width="" height="">

            <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(, , , , , )

                    gradient.addColorStop(,"red");

                    gradient.addColorStop(0.5,"yellow");

                    gradient.addColorStop(0.7,"pink");

                    gradient.addColorStop(,"green");

                    ctx.fillStyle=gradient;

                    ctx.fillRect(,,,);

//                }

            }

        }

    </script>

</html>

canvas插入图片设置背景，渐变的更多相关文章

  1. IOS 利用图片设置背景

    UIImageView* imageView = [[UIImageView alloc] initWithFrame:self.view.bounds]; imageView.image = [UI ...

  2. 关于HTML表格中插入背景图片的问题_百度知道 3个回答 - 提问时间: 2009年03月23日 最佳答案: <tr style="background-image:url(1.jpg)"> (这事设置背景图片) <img src="images/bbs_student1.gif" />如果是这样的就是直接插入图片。你看看,...

    关于HTML表格中插入背景图片的问题_百度知道 3个回答 - 提问时间: 2009年03月23日 最佳答案: <tr style="background-image:url(1.jpg ...

  3. 【CSS】css网页背景图片设置

    刚学CSS,了解了下网页背景图设置,顺便记录下. 下面主要是实现背景图位置保持不变,即不随滚动条动而动的功能. body { background-image:url(images/bck.png); ...

  4. background-size （设置背景图片的大小）

    设置背景图片的大小,以长度值或百分比显示(数值包括 长度length和百分比percentage),还可以通过cover和contain来对图片进行伸缩. 语法:background-size: au ...

  5. CSS3设置背景图片的大小

    设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩. background-size 语法详解: 要在插入图片之后进行设置背景图片的大小 backgroun ...

  6. img只显示图片一部分 或 css设置背景图片只显示图片指定区域

    17:14 2016/3/22img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片左 ...

  7. css 设置背景图片模糊，内容不模糊

    需求:一个div设置了background: url,现在需要使图片背景模糊,div内的文字清晰显示. 原始代码: <!DOCTYPE html> <html lang=" ...

  8. Pyqt 设置 背景颜色和背景图片、 QPalette 调色板 与QPainter 画板区别 、 不规则图片

    设置 背景颜色和背景图片 首先设置autoFillBackground属性为真然后定义一个QPalette对象设置QPalette对象的背景属性(颜色或图片)最后设置QWidget对象的Palette ...

  9. 【POI】使用POI处理xlsx的cell中的超链接 和 插入图片 和 设置打印区域

    使用POI对xlsx中插入超链接和 插入图片 package com.it.poiTest; import java.awt.image.BufferedImage; import java.io.B ...

随机推荐

  1. winfrom创建转圈等待窗体

    第一步:创建一个WaitForm public partial class WaitForm : Form { ; private ArrayList images = new ArrayList() ...

  2. web APP 开发之踩坑手记

    屏蔽输入框怪异的内阴影 -webkit-appearance:none 禁止自动识别电话和邮箱 <meta content="telephone=no" name=" ...

  3. 2018-2-13-win10-uwp-入门

    title author date CreateTime categories win10 uwp 入门 lindexi 2018-2-13 17:23:3 +0800 2018-2-13 17:23 ...

  4. 2019-9-18-WPF-客户端开发需要知道的触摸失效问题

    title author date CreateTime categories WPF 客户端开发需要知道的触摸失效问题 lindexi 2019-09-18 15:30:38 +0800 2019- ...

  5. yppasswd, ypchfn, ypchsh - 修改你在NIS数据库中的密码

    SYNOPSIS(总览) yppasswd [-f] [-l] [-p] [user] ypchfn [user] ypchsh [user] DESCRIPTION(描述) 在Linux中,标准的 ...

  6. 实战ZeroMQ的PUSH/PULL推拉模式

    原文地址: http://ju.outofmemory.cn/entry/235976

  7. lombok @Builder实现原理

    public class Person { private Person(Builder builder) { name = builder.name; age = builder.age; } pr ...

  8. leetcood学习笔记-70-爬楼梯

    题目描述: 第一次提交:(超时) class Solution: def climbStairs(self, n: int) -> int: if n == 0 or n == 1 or n = ...

  9. 【JZOJ6285】飘雪圣域

    description analysis 从求联通块出发根本没做法,于是考虑连通块里面的边 对于一个询问\([l,r]\),一条边的左端点\(≥l\)且右端点\(≤r\)才在这个区间的点之间 于是对于 ...

  10. jQuery - 动画相关

    // 显示隐藏 $("div").show(); // 显示 $("div").hide(); // 隐藏 // 显示过程3秒, 3秒之内, 元素的宽,高和透明 ...