[html5] canvas使用图片
canvas使用图片
1.在canvas中插入图片（需要img对象）
1.canvas操作图片时，必须要等图片加载完才能操作
2.drawImage(image , x , y , width , height)
其中image是image或者canvas对象（canvas本身就是图片），x,y 是其在目标canvas里的起始坐标。
这个方法多了2个参数width , height，这两个参数用来控制 向canvas画入时应该缩放的大小。
window.onload = function () {
var canvas = document.getElementById("test");
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = "./1.png";
img.onload = function () {
draw();
};
function draw() {
ctx.drawImage(img, 100, 100, 200, 200);
}
};
2.在canvas中设置背景（需要img对象）
1.createPattern(image , repetition)
image:图像源
repetition：平铺方式
“repeat”
“repeat-x”
“repeat-y”
“no-repeat”
一般情况下，我们都会将createPatter返回的对象作为fillStyle的值
！！！我们无法使用选择器来选到canvas中的图像
window.onload = function () {
var canvas = document.getElementById("test");
var ctx = canvas.getContext("2d");
var img = new Image();
img.src = "./1.png";
img.width = "200px";
img.height = "200px";
img.
img.onload = function () {
draw();
};
function draw() {
var pattern = ctx.createPattern(img, "no-repeat");
ctx.fillStyle = pattern;
ctx.fillRect(0, 0, 200, 200);
}
};
3.渐变
（1）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),等等）
window.onload = function () {
var canvas = document.getElementById("test");
var ctx = canvas.getContext("2d");
var gradient = ctx.createLinearGradient(0, 0, 400, 400);
gradient.addColorStop(0, "red");
gradient.addColorStop(0.5, "yellow");
gradient.addColorStop(1, "green");
ctx.fillStyle = gradient;
ctx.fillRect(0, 0, 400, 400);
};
（2）canvas渐变（径向渐变）
createRadialGradient(x1,y1,r1,x2,y2,r2)
前三个参数则定义另一个以(x1,y1)为原点，半径为r1的圆
后三个参数则定义另一个以(x2,y2)为原点，半径为r1的圆
版权声明：本文为yang10086原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。