前言：
这节课介绍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坐标位置
绘制图像的宽
height:绘制图像的高
sx:开始剪切的x坐标位置
sy:开始剪切的y坐标位置
s剪切的图像的宽
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>
5.状态保存/恢复save()/restore()
作用：用来保存和恢复画笔的状态，从而避免画笔属性对之后绘画的影响。
示例：
<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' );
// rect的手动封装
function Rect ( config ) {
this.ctx = config.ctx;
this.x = config.x;
this.y = config.y;
this.width = config.width;
this.height = config.height;
this.lineWidth = config.lineWidth;
this.strokeStyle = config.strokeStyle;
this.fillStyle = config.fillStyle;
}
Rect.prototype = {
constructor: Rect,
stroke: function () {
var ctx = this.ctx;
// 保存还未设置属性的ctx对象
ctx.save();
ctx.lineWidth = this.lineWidth;
if ( this.strokeStyle ) {
ctx.strokeStyle = this.strokeStyle;
}
ctx.strokeRect( this.x, this.y, this.width, this.height );
// 恢复之前保存的ctx对象
ctx.restore();
},
fill: function () {
var ctx = this.ctx;
// 保存还未设置属性的ctx对象
ctx.save();
ctx.lineWidth = this.lineWidth;
if ( this.fillStyle ) {
ctx.fillStyle = this.fillStyle;
}
ctx.fillRect( this.x, this.y, this.width, this.height );
// 恢复之前保存的ctx对象
ctx.restore();
}
}
var rect1 = new Rect({
ctx: ctx,
x: 10,
y: 10,
100,
height: 50,
strokeStyle: 'red',
fillStyle:'green',
lineWidth: 10
});
rect1.fill();
var rect2 = new Rect({
ctx: ctx,
x: 200,
y: 200,
200,
height: 100
});
rect2.fill();
</script>
6.绘制贝塞尔曲线bezierCurveTo()
作用：bezierCurveTo() 方法通过使用表示三次贝塞尔曲线的指定控制点，向当前路径添加一个点。
方法：bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
cp1x/cp1y：第一个控制点的坐标
cp2x/cp2y：第二个控制点的坐标
x/y：结束点的坐标
注意：前两个点是用于三次贝塞尔计算中的控制点，第三个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，使用 beginPath() 和 moveTo() 方法来定义开始点。
示例：
<body> <canvas id="myCanvas" width="300" height="150"> Your browser does not support the HTML5 canvas tag.</canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.moveTo(20,20); ctx.bezierCurveTo(20,100,200,100,200,20); ctx.stroke(); </script> </body>
7.绘制渐变颜色图形
作用：createLinearGradient() 方法创建线性的渐变对象，作为fillStyle或strokeStyle的属性值，从而完成线性渐变图形的绘制。
方法：
createLinearGradient(x0, y0, x1, y1)
x0/y0：渐变开始点的坐标位置。
x1/y1：渐变结束点的坐标位置。
addColorStop(stop, color)
stop：介于 0.0 与 1.0 之间的值，表示渐变中开始与结束之间的位置。
color：在结束位置显示的 CSS 颜色值
<body> <canvas id="myCanvas" width="300" height="150"> Your browser does not support the HTML5 canvas tag. </canvas> <script> var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); //创建线性渐变对象 ar grd=ctx.createLinearGradient(0,0,170,0); //设置渐变色 grd.addColorStop(0,"black"); grd.addColorStop(1,"white"); //线性渐变对象作为fillStyle的属性值 ctx.fillStyle=grd; ctx.fillRect(20,20,150,100); </script> </body>