Canvas 2D上下文
1、要使用Canvas元素，必须设置其width和height属性，制定绘图区域大小
2、要在这块画布上绘图，需要取得绘图上下文：通过调用getContext()方法并传入上下文名字。
3、2D上下文getContext("2d")，坐标从左上角开始，width和height表示水平和垂直方向可用像素
4、绘制矩形
*fillRect(): *在画布上绘制矩形，通过fillStyle填充指定的颜色
strokeRect(): 在画布上绘制矩形，通过strokeStyle指定颜色描边
*clearRect(): *清楚画布上的矩形区域。本质：把绘制上下文中的某一矩形区域变透明。
4个参数：矩形x坐标，y坐标，矩形宽度，高度
<canvas id="drawing" width="200" height="200"></canvas>
<script type="text/javascript">
//获得Canvas元素
var drawing = document.getElementById("drawing");
//确定浏览器支持Canvas元素
if(drawing.getContext){
var context=drawing.getContext("2d");
//绘制红色矩形
context.fillStyle="red";
context.fillRect(10,10,50,50);
//绘制半透明的蓝色矩形
context.fillStyle="rgba(0,0,255,0.3)";
context.fillRect(30,30,50,50);
//在两个矩形重叠的地方清除一个小矩形
context.clearRect(40,40,10,10);
//绘制黑色描边矩形
context.strokeStyle="black";
context.strokeRect(100,10,50,50);
//半透明描边
context.strokeStyle="rgba(0,0,255,0.5)";
context.strokeRect(120,20,50,50);
}
</script>
效果：
代码效果
5、绘制路径
调用beginPath()方法，表示要开始绘制新的路径
方法：
arc(x,y,radius,startAngle,endAngle,true/false)
以(x,y)为圆心绘制半径为radius的弧线，起始角度分别为startAngle,endAngle，true表示逆时针计算
arcTo(x1,y1,x2,y2,radius)
从上一点开始绘制弧线，到(x2,y2)，半径为radius穿过(x1,y1)
bezierCurveTo(c1x,c1y,c2x,c2y,radius)
从上一点开始绘制一条曲线，到(x,y)为止，前面两个是控制点
lineTo(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
6、绘制文本
方法：
fillText():
strokeText():
参数：文本字符串、坐标
属性：font文本样式大小字体、textAlign文本对齐方式、textBaseline文本基线
7、变换
方法：
rotate(angle) : 围绕原点旋转图像angle弧度
scale(scaleX,scaleY): 缩放图像，在x方向sscaleX，y方向scaleY，默认是1.0
translate(x,y) 将坐标原点移动到(x,y)
transfrom()
setTransform()
追踪上下文状态：
save(): 保存当前状态
restore(): 返回上一级状态
<canvas id="drawing" width="200" height="200"></canvas>
<script type="text/javascript">
//获得Canvas元素
var drawing = document.getElementById("drawing");
//确定浏览器支持Canvas元素
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.translate(100,100);
//绘制文本
context.font="bold 14px Arial";
context.textAlign="center";
context.textBaseline="middle";
context.fillText("12",0,-85);//12
context.fillText("3",85,0);//3
context.fillText("6",0,85);//6
context.fillText("9",-85,0);//9
//旋转表针
context.rotate(0.5);
//绘制分针
context.moveTo(0,0);
context.lineTo(0,-75);
//绘制时针
context.moveTo(0,0);
context.lineTo(-65,0);
//描边路径
context.stroke();
}
</script>
代码效果
8、阴影
属性：
shadowColor:阴影颜色，默认黑
shadowOffsetX:X轴方向阴影偏移量，默认0
shadowOffsetY:y轴方向阴影偏移量，默认0
shadowBlur:模糊像素
<canvas id="drawing" width="200" height="200"></canvas>
<script type="text/javascript">
//获得Canvas元素
var drawing = document.getElementById("drawing");
//确定浏览器支持Canvas元素
if(drawing.getContext){
var context=drawing.getContext("2d");
//设置阴影
context.shadoeOffsetX=5;
context.shadoeOffsetY=5;
context.shadowBlur=4;
context.shadowColor="rgba(0,0,0,0.9)";
//绘制红色矩形
context.fillStyle="red";
context.fillRect(10,10,60,60);
//绘制蓝色矩形
context.fillStyle="blue";
context.fillRect(30,30,60,60);
}
</script>
代码效果
9、渐变
- 线性渐变
createLinearGradient()参数：起点x坐标、起点y坐标、终点x坐标、终点y坐标， - 径向渐变
createRadiaGradient()6参数：前三个参数，起点圆心坐标和半径，后三个参数，终点圆心坐标和半径
想要达到向外扩散的渐变效果，就要将两个圆定义为同心圆
创建渐变对象后，使用addColorStop()指定色标，参数：色标位置、颜色值。色标位置是一个从0-1之间的数字
//创建线性渐变对象
var gradient=context.createLinearGradient(10,10,60,60);
//添加渐变颜色
gradient.addColorStop(0,"white");
gradient.addColorStop(1,"black");
//绘制渐变矩形
context.fillStyle=gradient;
context.fillRect(10,10,50,50);
PS：如果没有将举行绘制到恰当的位置，可能只会显示部分渐变效果
//创建径向渐变对象
var gradient2=context.createRadialGradient(55,55,10,55,55,30);
//添加渐变颜色
gradient2.addColorStop(0,"white");
gradient2.addColorStop(1,"black");
//绘制渐变矩形
context.fillStyle=gradient2;
context.fillRect(30,30,50,50);
代码效果
10、绘制图像
方法：
drawImage()
9个完整参数：要绘制的图像、源图像的x坐标、源图像的y坐标、源图像的宽度、源图像的高度、目标图像的x坐标、目标图像的y坐标、目标图像的宽度、目标图像的高度。
11、模式
重复的图像，可用来填充或者描边图形
方法：createPattern()
方法参数1：HTML
<img>元素参数2：如何重复，"repeat"、"repeat-x"、"repeat-y"、"no-repeat"
var image=document.images[0],
pattern=context.createPattern(image,"repeat");
//绘制矩形
context.fillStyle=pattern;
context.fillRect(10,10,150,150);
PS：
a 从画布原点开始，将填充样式（fillStyle）设置为模式对象，只表示在某个特定的区域显示重复的图像。
b createPattern()方法第一个参数也可是是一个<video>元素，或者另一个<canvas>元素。
11、使用图像数据
方法：getImageData()
参数：要去的数据画面区域的x,y坐标以及宽度高度
返回数据：ImageData对象，每个对象有三个属性width、height、data，data属性是一个保存着图像中每个像素的数据数组，每个像素用4个元素保存，分别是红、绿、蓝、透明度。
数据可进行操作完成特定需要。
12、合成
属性
globalAlpha:指定透明度
plobalComposition：表示后绘制的图形怎样与线绘制的图形结合，字符串表示。
