一、绘制图片
1、用法一:将图片直接定位在画布上
context.drawImage(img,x,y);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>practice9-DrawImage</title>
<style type="text/css">
*{
padding:0;
margin: 0;
}
body{
text-align: center;
padding-top: 20px;
}
canvas{
box-shadow: 0 0 10px #333333;
margin: 0 auto;
}
</style>
</head>
<body onload="draw()">
<canvas id="canvas" width="800" height="600"></canvas>
<script>
function draw(){
var ctx = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
//定义图片
var img = new Image();
img.src = 'img/timg.jpg';
//确保图片被加载完成
img.onload = function() {
//使用drawImage绘制到画布上面
ctx.drawImage(this,20,80);
}
}else{
alert('请更新浏览器!!!');
}
}
</script>
</body>
</html>
2、用法二:定图像的宽度和高度,将图像放大或者缩小
context.drawImage(img,x,y,width,height);
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>practice9-DrawImage</title>
<style type="text/css">
*{
padding:0;
margin: 0;
}
body{
text-align: center;
padding-top: 20px;
}
canvas{
box-shadow: 0 0 10px #333333;
margin: 0 auto;
}
</style>
</head>
<body onload="draw()">
<canvas id="canvas" width="800" height="600"></canvas>
<script>
function draw(){
var ctx = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
//定义图片
var img = new Image();
img.src = 'img/timg.jpg';
//确保图片被加载完成
img.onload = function() {
//使用drawImage绘制到画布上面
ctx.drawImage(this,50,50,700,500);
}
}else{
alert('请更新浏览器!!!');
}
}
</script>
</body>
</html>
3、用法三:剪切图像,并在画布上定位被剪切的部分
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
参数描述:
1、img 规定要使用的图片。
2、sx(可选)开始剪切的 x 坐标位置。
3、sy(可选)开始剪切的 y 坐标位置。
4、swidth(可选)被剪切图像的宽度。
5、sheight(可选)被剪切图像的高度。
6、x 在画布上放置图像的 x 坐标位置。
7、y 在画布上放置图像的 y 坐标位置。
8、width(可选)要使用的图像的宽度。(伸展或缩小图像)
9、height (可选)要使用的图像的高度。(伸展或缩小图像)
裁剪结果如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>practice9-DrawImage</title>
<style type="text/css">
*{
padding:0;
margin: 0;
}
body{
text-align: center;
padding-top: 20px;
}
canvas{
box-shadow: 0 0 10px #333333;
margin: 0 auto;
}
</style>
</head>
<body onload="draw()">
<canvas id="canvas" width="800" height="600"></canvas>
<script>
function draw(){
var ctx = document.getElementById('canvas');
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
//定义图片
var img = new Image();
img.src = 'img/timg.jpg';
//确保图片被加载完成
img.onload = function() {
//使用drawImage绘制到画布上面
ctx.drawImage(this,100,100,100,100,50,50,700,500);
}
}else{
alert('请更新浏览器!!!');
}
}
</script>
</body>
</html>