在canvas中使用图像
Posted So istes immer
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了在canvas中使用图像相关的知识，希望对你有一定的参考价值。
在canvas中导入图像步骤
①确定图像来源
②使用drawImage()方法将图像绘制到canvas中
var img=new Image(); //使用脚本创建一个新的image对象
img.οnlοad=function(){ //使用onload事件一边装载图像，一边执行drawImage函数
//此处放置drawImage的语句
}
img.src="...";
drawImage(img,sx,sy,swidth,sheight,x,y,width,height)
img：规定要使用的图像
sx,sy:可选，开始剪切的坐标位置
swidth，sheight:可选，被剪切图像的宽度和高度
x,y:在画布上放置图像的坐标
width，height：要使用的图像的宽度，高度。
1.定位图像
images/1.jpg（480x300）
drawImage（img,x,y）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="300" height="200" style="border: solid 1px #999;"></canvas>
<script>
draw();
function draw() {
var ctx=document.getElementById('canvas').getContext('2d');
var img=new Image();
img.onload=function () {
ctx.drawImage(img,0,0);
}
img.src='images/1.jpg';
}
</script>
</body>
</html>
2.缩放图像
drawImage(img,x,y,width,height)
function draw() {
var ctx=document.getElementById('canvas').getContext('2d');
var img=new Image();
img.onload=function () {
ctx.drawImage(img,-80,-50,400,250);
}
img.src='images/1.jpg';
}
3.裁剪图像
function draw() {
var ctx=document.getElementById('canvas').getContext('2d');
var img=new Image();
img.onload=function () {
ctx.drawImage(img,20,20,300,200,0,0,480,300);
}
img.src='images/1.jpg';
}
4.平铺图像
图像平铺就是让图像填满画布
①使用drawImage()方法
function draw() {
var canvas=document.getElementById('canvas');
var ctx=canvas.getContext('2d');
var img=new Image();
img.src='images/1.jpg';
img.onload=function () {
var scale=4; //平铺比例
var n1=img.width/scale; //缩小后图像的宽度
var n2=img.height/scale; //缩小后图像的高度
var n3=canvas.width/n1; //平铺横向个数
var n4=canvas.height/n2; //平铺纵向个数
for(var i=0;i<n3;i++)
for(var j=0;j<n4;j++)
ctx.drawImage(img,i*n1,j*n2,n1,n2);
}
}
②使用createPattern(img,type)方法
参数type取值
no-repeat:不平铺
repeat-x:横方向平铺
repeat-y:纵方向平铺
repeat:全方向平铺
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<canvas id="canvas" width="960" height="600" style="border: solid 1px #999;"></canvas>
<script>
draw();
function draw() {
var canvas=document.getElementById('canvas');
var ctx=canvas.getContext('2d');
var img=new Image();
img.src='images/1.jpg';
img.onload=function () {
var ptn=ctx.createPattern(img,'repeat');//创建填充样式
ctx.fillStyle=ptn; //指定填充样式
ctx.fillRect(0,0,960,600); //填充画布
}
}
</script>
</body>
</html>
以上是关于在canvas中使用图像的主要内容，如果未能解决你的问题，请参考以下文章
自己定义View时，用到Paint Canvas的一些温故，简单的帧动画（动画一 ，"掏粪男孩Gif"顺便再提提onWindowFocusChanged）(代码片段