前言：
这节课介绍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>HTML5--新增元素canvas一(8.3)
原文地址：https://www.cnblogs.com/diweikang/p/8732920.html