canvas插入图片设置背景，渐变 |
您所在的位置：网站首页 › canvas背景图 › canvas插入图片设置背景，渐变 |
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); }
html,body{
height: 100%;
overflow: hidden;
}
body{
background: greenyellow;
}
#test{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom:0;
margin: auto;
background: gray;
}
您的浏览器不支持画布元素 请您换成萌萌的谷歌
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);
}
}
}
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); 
*{
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;
}
您的浏览器不支持画布元素 请您换成萌萌的谷歌
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);
*{
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;
}
您的浏览器不支持画布元素 请您换成萌萌的谷歌
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);
// }
}
}
View Code
|
【本文地址】
今日新闻 |
推荐新闻 |