##在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. mtv 与mvc

    1.MVC与MTV模型 MVC模型 Web服务器开发领域里著名的MVC模式,所谓MVC就是把Web应用分为模型(M),控制器(C)和视图(V)三层,他们之间以一种插件式的.松耦合的方式连接在一起,模型 ...

  2. springboot中引用配置文件中的参数

    首先可以看到这是做微信登陆时候的配置,一般不会写死都是通过配置文件获取,所以,记载配置文件中 那么怎么引用呢: 可以看到直接注入的方式就可以引用了,所以看下面: 进行页面跳转,并且带有参数的, 使用m ...

  3. Spark Streaming设计

  4. dubbo入门之异步调用

    dubbo默认使用同步的方式调用.但在有些特殊的场景下,我们可能希望异步调用dubbo接口,从而避免不必要的等待时间,这时候我们就需要用到异步.那么dubbo的异步是如何实现的呢?下面就来看看这个问题 ...

  5. TopCoder[SRM587 DIV 1]:ThreeColorability(900)

    Problem Statement      There is a H times W rectangle divided into unit cells. The rows of cells are ...

  6. 依赖背包变形——hdu4003

    思维性比较强,代码挺简单的,dp[u][j]表示在u子树下安排j个机器人,让其不回u 注意转移时的初始值 /* dp[u][j]为在子树u有j个机器人不回来 */ #include<bits/s ...

  7. 优化剪枝搜索——牛客多校第二场F

    试了很多种爆搜和剪枝,最后发现还是状压的比较好用 #include <bits/stdc++.h> using namespace std; // #define IO #define f ...

  8. kafk的数据消费快速的原因

    kafka为什么消费数据很快呢? 1.数据的顺序读写 2.页缓存(操作系统层面) https://blog.csdn.net/gdj0001/article/details/80136364

  9. 李宏毅机器学习课程---3、Where does the error come from

    李宏毅机器学习课程---3.Where does the error come from 一.总结 一句话总结:机器学习的模型中error的来源是什么 bias:比如打靶,你的瞄准点离准心的偏移 va ...

  10. (转)Python之路,Day6 - 面向对象学习

    本节内容:   面向对象编程介绍 为什么要用面向对象进行开发? 面向对象的特性:封装.继承.多态 类.方法.     引子 你现在是一家游戏公司的开发人员,现在需要你开发一款叫做<人狗大战> ...