[注意]
必需设置 height, width 属性,因为 canvas 元素默认宽高为150px,300px;
<canvas id = "drawing" width = "200" height = "200"></canvas>
调用 getContext() 方法传入上下文的名字，需要确定浏览器支持 <canvas>
if (drawing.getContext){
var context = drawing.getContext("2d");
}
2D上下文
1.填充描边
- 填充属性: fillStyle( )
- 描边属性: strokeStyle( )
2.绘制矩形
fillRect( )、strokeRect( )、clearRect( )
接收四个参数:矩形的x坐标、矩形的y坐标、矩形的宽度、矩形的高度
绘制路径
必需首先调用beginPath( )方法
- arc(x,y,半径,起始角度,结束角度,旋转方向):
用于绘制圆形路径,以(x,y)为圆心,旋转方向为一个bool值表示是否以逆时针方向绘制,起始角度以及结束角度的单位都是弧度 - arcTo(x1,y1,x2,y2,半径):
从(x1,x2)为起点绘制一条到(x2,y2)的弧线,且该圆弧的半径为指定值 - bezierCurveTo(c1x,c1y,c2x,c2y,x,y):
从上一个点为起点绘制一条到(x,y)点的曲线,并且以(c1x,c1y)和(c2x,c2y)两点为控制点(即绘制贝塞尔曲线) - lineTo(x,y):
从上一点绘制一条到(x,y)点的直线 - moveTo(x,y):
起点移到(x,y)点,不画线 - quadraticCurveTo(cx,cy,x,y):
从上一点绘制一条到(x,y)点的二次曲线,以(cx,cy)为控制点 - rect(x,y,width,height):
从点(x,y)开始绘制一个矩形,宽度为 width 高度为
height,这里绘制的是矩形路径,而不是一个独立的形状
路径绘制完成后的几种操作
1.closePath(): 如果希望绘制一条连接到路径起点的线条则可以调用该方法
2.fill(): 用fillStyle来填充图形
3.stroke(): 对路径描边
4.clip(): 在路径上创建一个剪切区域
举个栗子
绘制一个不带数字的时钟表盘
<script type="text/javascript">
var drawing = document.getElementById('drawing');
if(drawing.getContext){
var context = drawing.getContext("2d");
//开始路径
context.beginPath();
//绘制外圆
context.arc(100,100,99,0,2 * Math.PI, false);
//绘制内圆
context.moveTo(194,100);
context.arc(100,100,94,0,2 * Math.PI, false);
//绘制分针
context.moveTo(100,100);
context.lineTo(100,15);
//绘制时针
context.moveTo(100,100);
context.lineTo(35,100);
//描边路径
context.stroke();
}
</script>
为了方便我们对路径的控制, 2D上下文还提供了一个方法:
isPointInPath(x,y) 该方法用于判断(x,y)是否位于路径上,在路径关闭前有效
绘制文本
fillText( )和strokeText( )
接收4个参数：要绘制的文本字符串、x坐标、y坐标、可选的最大像素宽度
三个属性：
-
font:
表示文本样式、大小及字体，用CSS中指定字体的格式来指定 -
textAlign:
文本对齐方式
可能的值：“start” “end” “left” “right” “center” -
textBaseline：
文本的基线
可能的值：“top” “hanging” “middle” “alphabetic” “ideographic” “bottom”
栗子
表盘上绘制数字12
context.font = "bold 14px Arial";
context.textAlign = "center";
context.textBaseline="bottom";
context.fillText("12",100,20);
measureText( )方法辅助确定文本大小
变换
修改变换矩阵
-
rotate(angle):
围绕原点旋转图像 angle 弧度； -
scale(scaleX,scaleY):
缩放图像，在x方向乘以 scaleX,在y方向乘以 scaleY,其默认值为1.0； -
translate(x,y):
将坐标原点移动到(x,y)。执行这个变换之后，坐标(0,0)会变成之前由(x,y)表示的点 -
transform(m1_1,m1_2,m2_1,m2_2,dx,dy):
直接修改变换矩阵，方式是乘以如下矩阵:
m1_1 m1_2 dx
m2_1 m2_2 dy
0 0 1 -
setTransform(m1_1,m1_2,m2_1,m2_2,dx,dy):
将变换矩阵重置为默认状态，然后再调用 transform( )
栗子
绘制表针时，把原点变换到表盘中心
//变换原点
context.translate(100,100);
//绘制分针
context.moveTo(0,0);
context.lineTo(0,-85);
//绘制时针
context.moveTo(0,0);
context.lineTo(-65,0);
使用 rotate( ) 方法旋转时钟的表针
context.rotate(1);
save( )方法保存上下文的设置和变换(不包括上下文的内容)；
restore( )方法向上返回一级；
绘制图像
drawImage( )方法
- 传入一个 HTML 元素；
- 传入另一个<canvas>元素作为其第一个参数；
阴影
属性
-
shadowColor:
用CSS颜色格式表示的阴影颜色，默认黑色； -
shadowOffsetX:
形状或路径 x 轴方向的阴影偏移量，默认0； -
shadowOffsetY:
形状或路径 y 轴方向的阴影偏移量，默认0； -
shadowBlur:
模糊的像素数，默认0；
渐变
- createLinearGradient( )方法
- addColorStop( )方法：指定色标，0~1；
- createRadialGradient( )方法
模式
重复
createPattern( )方法:
第一个参数：HTML<img>元素、<video>元素、<canvas>元素
第二个参数：如何重复图像的字符串
使用图像数据
getImageData( )方法，putImageData( )方法
合成
globalAlpha： 指定所有绘制的透明度
globalCompositionOperation： 后绘制的图形如何与先绘制的图形结合
推荐一个超详细的 canvas 学习教程
https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Transformations
