1.绘制图像的方法
- context.drawImage(imageObj,x,y);
此方法需要一个图像对象和一个起始点作为参数，其中起始点坐标是相对于canvas的左上角的位置
- context.drawImage(imageObj,x,y,width,height);width,height是用来指定显示图像的尺寸
- context.drawImage(imageObj,sx,sy,sw,sh,dx,dy,dw,dh);
img规定要使用的图像、画布或视频。
sx：开始剪切的 x 坐标位置。
sy：开始剪切的 y 坐标位置。
sw：被剪切图像的宽度。
sh：被剪切图像的高度。
dx：在画布上放置图像的 x 坐标位置。
dy：在画布上放置图像的 y 坐标位置。
width：要使用的图像的宽度。（伸展或缩小图像）
height：要使用的图像的高度。（伸展或缩小图像）
<html>
<head>
<title></title>
<style type="text/css">
#myCanvas{
border: 1px solid blue;
background-color: #77ffcc;
}
</style>
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
var imageObj=new Image();
imageObj.src="img/123.jpg";
imageObj.onload=function(){
//context.drawImage(imageObj,10,10);//原始图片大小
//context.drawImage(imageObj,10,10,200,300);//指定绘制图像的大小
context.drawImage(imageObj,50,40,300,450,50,50,350,450);//截取图像
}
}
</script>
</head>
<body>
<canvas id="myCanvas" width="500" height="200"></canvas>
</body>
</html>2.绘制文本
绘制文本的方法：context.fillText(Text,x1,y1);其中Text是要绘制的文本，x1,y1是绘制文本的位置
设置文本的字体、大小和样式：font属性，样式可以是normal、italic或bold。默认是normal。
设置文本颜色：使用fillStyle属性设置。
描绘文本边缘：使用strokeText()方法替代fillText(),同时使用strokeStyle代替fillStyle属性。
<html>
<head>
<title></title>
<style type="text/css">
#myCanvas{
border: 1px solid blue;
background-color: #77ffcc;
}
</style>
<script type="text/javascript">
window.onload=function(){
var canvas=document.getElementById("myCanvas");
var context=canvas.getContext("2d");
var x=100;
var y=100;
context.font="italic 40px Arial";
context.strokeStyle="#0000ff";
context.lineWidth=2;//设置描边宽度
context.strokeText("hello world",x,y);
}
</script>
</head>
<body>
<canvas id="myCanvas" width="500" height="200"></canvas>
</body>
</html> 
绘制文本对齐：textAlign属性，可用的选项包括start、end、left、center和right。
文本度量：使用measureText()方法获取文本的尺度信息，
文本换行：需要创建一个用户自定义函数，此函数需要canvas上下文对象、一个文本字符串、一个位置、一个最大宽度和行高度信息。函数将使用measureText()计算何时换行。