前言：
这节课介绍canvas中其他的API
1.绘制图片API(drawImage)
作用：通过drawImage(img, x, y)方法在画布上绘制图像、画布或视频，也能够绘制图像的某些部分，以及/或者增加或减少图像的尺寸。
方法：
drawImage(img, x, y)：在画布上绘制图像/视频
drawImage(img, x, y，width, height)：在画布上绘制指定宽、高的图像/视频
drawImage(img, sx, sy，swidth, sheight，x， y， width， height)：剪切图像，并在画布上定位剪切的图像。
参数：
img:要绘制的图像/视频
x:绘制的x坐标位置
y:绘制的y坐标位置
width:绘制图像的宽
height:绘制图像的高
sx:开始剪切的x坐标位置
sy:开始剪切的y坐标位置
swidth:剪切的图像的宽
sheight:剪切的图像的高
drawImage(img, x, y)示例：
<head> <meta charset="UTF-8"> <title></title> <style> canvas { border:1px solid black; } </style> </head> <body> <canvas width="600" height="400" id="cas"></canvas> </body> <script> var cas = document.getElementById( ‘cas‘ ); var ctx = cas.getContext( ‘2d‘ ); var img = new Image(); img.src = ‘./imgs/rBACFFH1-B7DFB4PAAAYpkS1Sv4882_200x200_3.jpg‘; var x = 100, y = 100; // 1, 开始绘制( 需要等待, 等到图片加载完毕后再执行 ) // ctx.drawImage( img, x, y ); img.onload = function () { ctx.drawImage( img, x, y ); }; </script>
drawImage(img, x, y，width, height)示例：
<head> <meta charset="UTF-8"> <title></title> <style> canvas { border:1px solid black; } </style> </head> <body> <canvas width="600" height="400" id="cas"></canvas> </body> <script> var cas = document.getElementById( ‘cas‘ ); var ctx = cas.getContext( ‘2d‘ ); var img = new Image(); img.src = ‘./imgs/3484432_092618805000_2.jpg‘; // 2, 准备矩形区域 var x = 100, y = 100, width, height = 200; // 3, 开始绘图 img.onload = function () { width = img.width * height / img.height; ctx.drawImage( img, x, y, width, height ); }; </script>
drawImage(img, sx, sy，swidth, sheight，x， y， width， height)示例：
<head> <meta charset="UTF-8"> <title></title> <style> canvas { border:1px solid black; } </style> </head> <body> <canvas width="600" height="400" id="cas"></canvas> </body> <script> var cas = document.getElementById( ‘cas‘ ); var ctx = cas.getContext( ‘2d‘ ); // 1, 准备 image 对象 var img = new Image(); img.src = ‘./imgs/3484432_092618805000_2.jpg‘; // 2, 准备矩形区域 var x = 100, y = 100, width = 300, height = 200, sx = 677, sy = 0; // 3, 开始绘图 img.onload = function () { ctx.drawImage( img, sx, sy, width, height, x, y, width / 2, height * 2 ); }; </script>
2.API(translate)移动
作用：通过translate(x， y)方法可以对绘图的坐标x，y进行移动
示例：
<head> <meta charset="UTF-8"> <title></title> <style> canvas { border:1px solid black; } </style> </head> <body> <canvas width="600" height="400" id="cas"></canvas> </body> <script> var cas = document.getElementById( ‘cas‘ ); var ctx = cas.getContext( ‘2d‘ ); // 1. 绘制一个圆, 在画布的左半边 var x1 = cas.width / 4; var y1 = cas.height / 2; var radius1 = 100; // 将坐标轴向右平移 半个画布 ctx.translate( cas.width / 2, 0 ); ctx.strokeStyle = ‘red‘; ctx.arc( x1, y1, radius1, 0, 2 * Math.PI ); ctx.stroke(); </script>
3.API(scale)缩放，绘制椭圆
作用：通过scale(x， y)方法可以对绘图x，y轴方向进行倍数的比例缩放
椭圆示例：
<head> <meta charset="UTF-8"> <title></title> <style> canvas { border:1px solid black; } </style> </head> <body> <canvas width="600" height="400" id="cas"></canvas> </body> <script> var cas = document.getElementById( ‘cas‘ ); var ctx = cas.getContext( ‘2d‘ ); // 1. 绘制一个圆, 在画布的左半边 var x1 = cas.width / 4; var y1 = cas.height / 2; var radius1 = 100; ctx.strokeStyle = ‘red‘; // 将 x 轴的长度缩小一半, y 轴不变 ctx.scale( 0.5, 1 ); ctx.arc( x1, y1, radius1, 0, 2 * Math.PI ); ctx.stroke(); </script>
4.API(rotate)旋转
作用：rotate() 方法通过指定一个角度(弧度)，改变了画布坐标和 Web 浏览器中的 <Canvas> 元素的像素之间的映射关系
示例：
<head> <meta charset="UTF-8"> <title></title> <style> canvas { border:1px solid black; } </style> </head> <body> <canvas width="600" height="400" id="cas"></canvas> </body> <script> // 处理弧度与角度的计算 function toAngle ( radian ) { return radian * 180 / Math.PI; } function toRadian ( angle ) { return angle * Math.PI / 180; } var cas = document.getElementById( ‘cas‘ ); var ctx = cas.getContext( ‘2d‘ ); // 将坐标轴移动到画布的中间 ctx.translate( cas.width / 2, cas.height / 2 ); // 通过旋转坐标实现图形的旋转 ctx.rotate( toRadian( 15 ) ); // 绘制矩形 var width = 100; ctx.strokeRect( 0 - width / 2, 0 - width / 2, width, width ); </script>
