context.drawImage绘制图片

时间:2022-05-23 15:18:20

context.drawImage(img,x,y)  x,y图像起始坐标

context.drawImage(img,x,y,w,h) w,h指定图像的宽度和高度

context.drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh) s被复制区域  d复制后

理解了其实挺简单的!就是不知道用用到多少?

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function draw(id){
var canvas = document.getElementById(id);
var context = canvas.getContext("2d");
context.fillStyle = "#EEEEEEf";
context.fillRect(0,0,500,500);
image = new Image();
image.src = "图片地址";
image.onload = function(){}
}
function drawImage(context,image){
context.drawImage(image,100,100);
context.draeImage(image,270,270,380,380,230,230,240,240);
}
</script>
</head>
<body onload="draw('canvas')">
<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>