在Canvas中,我们不仅可以绘制各种形状的图形,还可以将图片导入到Canvas中进行各种操作,例如平铺、切割、像素处理等。
下面这整理的学习代码笔记
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片操作</title>
</head>
<body>
<script>
/**
* drawImage()方法共有三种调用方式。
* (1)drawImage(image , dx , dy)。
* (2)drawImage(image , dx , dy , dw , dh)。
* (3)drawImage(image , sx , sy , sw , sh , dx , dy , dw , dh)。
*
*/
function $$(id){
return document.getElementById(id);
}
window.onload = function(){
var cnv = $$("canvas");
var cxt = cnv.getContext("2d");
// var image = new Image();
// image.src="./images/timg.jpg";
// image.onload = function(){
// cxt.drawImage(image, 40,20,50,50 ,100,100,50,50);
// }
var img = $$("img");
cxt.drawImage(img, 10,10,);
cnv = $$("canvas1");
cxt = cnv.getContext("2d");
cxt.drawImage(img, 40,20,100,100);
/**
* drawImage(image , sx , sy , sw, sh , dx , dy , dw , dh)解释说明下
* 参数sx、sy、sw、sh,表示源图像需要截取的范围。
* 参数sx,表示源图片被截取部分的横坐标。
* 参数sy,表示源图片被截取部分的纵坐标。
* 参数sw,表示源图片被截取部分的宽度。
* 参数sh,表示源图片被截取部分的高度。
*
* (1)sx、sy、sw、sh这四个参数中的“s”指的是“source(源图片)”。
* (2)dx、dy、dw、dh这四个参数中的“d”指的是destination(目标图片)。
*/
cnv = $$("canvas2");
cxt = cnv.getContext("2d");
cxt.drawImage(img, 40,20,100,100, 50,50,100,100);
/**
* 在Canvas中,我们可以使用createPattern()方法来定义图片的平铺方式。
* 语法:
* var pattern=cxt.createPattern(image,type);
* cxt.fillStyle=pattern;
* cxt.fillRect();
* type属性取值:
* 属性值 说明
*-------------------------------------------
* repeat 默认值,在水平方向和垂直方向同时平铺
* repeat-x 只在水平方向平铺
* repeat-y 只在垂直方向平铺
* no-repeat 只显示一次(不平铺)
*/
var img2 = $$("img2");
cnv = $$("canvas3");
cxt = cnv.getContext("2d");
pattern = cxt.createPattern(img2, "repeat");
cxt.fillStyle=pattern;
cxt.fillRect(0,0,cnv.width,cnv.height);
cnv = $$("canvas4");
cxt = cnv.getContext("2d");
pattern = cxt.createPattern(img2, "repeat-x");
cxt.fillStyle=pattern;
cxt.fillRect(0,0,cnv.width,cnv.height);
cnv = $$("canvas5");
cxt = cnv.getContext("2d");
pattern = cxt.createPattern(img2, "repeat-y");
cxt.fillStyle=pattern;
cxt.fillRect(0,0,cnv.width,cnv.height);
cnv = $$("canvas6");
cxt = cnv.getContext("2d");
pattern = cxt.createPattern(img2, "no-repeat");
cxt.fillStyle=pattern;
cxt.fillRect(0,0,cnv.width,cnv.height);
cnv = $$("canvas7");
cxt = cnv.getContext("2d");
var bgCanvas = document.createElement("canvas");
bgCanvas.width = 20;
bgCanvas.height = 20;
var bgCxt = bgCanvas.getContext("2d");
bgCxt.beginPath();
bgCxt.arc(10,10,10,0,360*Math.PI/180,true);
bgCxt.closePath();
bgCxt.fillStyle = "HotPink";
bgCxt.fill();
pattern = cxt.createPattern(bgCanvas, "repeat-x");
cxt.fillStyle = pattern;
cxt.fillRect(0,0,200,200);
/**
* 在Canvas中,我们可以使用clip()方法来切割Canvas中绘制的图片。
* 语法:
* cxt.clip();
* 想要使用clip()方法切割一张图片,一般需要以下三步:
* (1)绘制基本图形。
* (2)使用clip()方法。
* (3)绘制图片。
*
*/
//第一步:绘制基本图形,用来切割
cnv = $$("canvas8");
cxt = cnv.getContext("2d");
cxt.beginPath();
cxt.arc(70,70,50,0,360*Math.PI/180,true);
cxt.closePath();
cxt.stroke();
//第二步:使用clip()方法,使得切割区域为上面绘制的图形
cxt.clip();
//第三步,绘制一张图片
cxt.drawImage(img, 10,20);
/**
* 在Canvas中,图片还可以跟文字或图形进行巧妙地结合,从而实现一些特殊的效果。
*
*
*/
cnv = $$("canvas9");
cxt = cnv.getContext("2d");
var text = "绿色学习网";
cxt.font = "bold 22px 微软雅黑";
pattern = cxt.createPattern(img, "repeat");
cxt.fillStyle = pattern;
cxt.fillText(text,10,20);
cnv = $$("canvas10");
cxt = cnv.getContext("2d");
cxt.beginPath();
cxt.arc(70,70,50,0,360*Math.PI/180,true);
cxt.closePath();
pattern = cxt.createPattern(img, "repeat");
cxt.fillStyle = pattern;
cxt.fill();
}
</script>
<span>添加图片</span><br>
<canvas id="canvas" width="500" height="500" style="border:1px dashed gray"></canvas>
<canvas id="canvas1" width="200" height="200" style="border:1px dashed gray"></canvas>
<canvas id="canvas2" width="200" height="200" style="border:1px dashed gray"></canvas>
<br>
<span>平铺图片</span><br>
<canvas id="canvas3" width="200" height="200" style="border:1px dashed gray"></canvas>
<canvas id="canvas4" width="200" height="200" style="border:1px dashed gray"></canvas>
<canvas id="canvas5" width="200" height="200" style="border:1px dashed gray"></canvas>
<canvas id="canvas6" width="200" height="200" style="border:1px dashed gray"></canvas>
<canvas id="canvas7" width="200" height="200" style="border:1px dashed gray"></canvas>
<canvas id="canvas8" width="200" height="200" style="border:1px dashed gray"></canvas>
<canvas id="canvas9" width="200" height="200" style="border:1px dashed gray"></canvas>
<canvas id="canvas10" width="200" height="200" style="border:1px dashed gray"></canvas>
<img id="img" src="./images/timg.jpg" alt="" style="display: none;">
<img id="img2" src="./images/ico_up.png" alt="" style="display: none;">
</body>
</html>
运行结果: