标签：绘制矩形 透明 tco 调用 高度 方式 画圆 clip 水平
<canvas></canvas>是html5出现的新标签
context是一个封装了很多绘图功能的对象，获取这个对象的方法是 var context=canvas.getContext("2d");
canvas元素绘制图像的时候有2种方法，分别是
context.fill() //填充
context.stroke() //绘制边框
style:在进行图形绘制前，要设置好绘图的样式
context.fillStyle //填充的样式
context.strokeStyle //边框样式
context.lineWidth //图形边框宽度
颜色表示方式： 直接用颜色名称 ： “red”
十六进制： “#FFFFFF”
rgb(1-255,1-255,1-255)
rgba(1-255,1-255,1-255,透明度)
绘制矩形： context.fillRect(x,y,width,height)
context.strokeRect(x,y,width,height)
x:矩形起点横坐标（坐标原点为canvas的左上角，当然确切的来说是原始原点，后面写到变形的时候就懂了，现在暂时不用关心）
y:矩形起点纵坐标
width:矩形长度
height:矩形高度
清除矩形区域：context.clearReact(x,y,width,height)
x:清除矩形起点横坐标
y:清除矩形起点纵坐标
width：清除矩形长度
height：清除矩形宽度
圆弧：context.arc(x,y,radius,starAngle,endAngle,anticlockwise)
x:圆心的x坐标
y：圆心的y坐标
starAngle:开始角度
endAngle：结束角度
anticlockwise：true为逆时针，false为顺时针
路径：context.beginPath()
context.closePath()
function draw23(id) {
var canvas = document.getElementById(id);
if (canvas == null) {
return false;
}
var context = canvas.getContext(‘2d‘);
var n = 0;
//左侧1/4圆弧
context.beginPath();
context.arc(100, 150, 50, 0, Math.PI/2 , false);
context.fillStyle = ‘rgba(255,0,0,0.25)‘;
context.fill();
context.strokeStyle = ‘rgba(255,0,0,0.25)‘
context.closePath();
context.stroke();
//右侧1/4圆弧
context.beginPath();
context.arc(300, 150, 50, 0, Math.PI/2 , false);
context.fillStyle = ‘rgba(255,0,0,0.25)‘;
context.fill();
context.strokeStyle = ‘rgba(255,0,0,0.25)‘;
context.closePath();
context.stroke();
}
结论
1、系统默认在绘制第一个路径的开始点为beginPath
*2、如果画完前面的路径没有重新指定beginPath，那么画第其他路径的时候会将前面最近指定的beginPath后的全部路径重新绘制
3、每次调用context.fill（）的时候会自动把当次绘制的路径的开始点和结束点相连，接着填充封闭的部分
ps：书本的结论是 如果没有closePath那么前面的路劲会保留，实验证明正确的结论是 如果没有重新beginPath那么前面的路劲会保留
ps1：如果你真心凌乱了，那么记住每次画路径都在前后加context.beginPath() 和context.closePath()就行
绘制线段：context.moveTo(x,y)
context.lineTo(x,y)
x:x坐标
y:y坐标
每次画线都是从moveTo 的点到lineTo的点
如果没有moveTo那么第一次lineTo的效果和moveTo一样
每次lineTo后如果没有moveTo，那么下次lineTo的开始点为前一次lineTo的结束点
绘制贝塞尔曲线（贝济埃、bezier） context.bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)
绘制二次样条曲线 context.quadraticCurveTo(qcpx,qcpy,qx,qy)
cp1x:第一个控制点x坐标
cp1y:第一个控制点y坐标
cp2x:第二个控制点x坐标
cp2y:第二个控制点y坐标
x:终点x坐标
y:终点y坐标
qcpx:二次样条曲线控制点x坐标
qcpy:二次样条曲线控制点y坐标
qx:二次样条曲线终点x坐标
qy:二次样条曲线终点y坐标
线性渐变 var lg= context.createLinearGradient(xStart,yStart,xEnd,yEnd)
线性渐变颜色lg.addColorStop(offset,color)
xstart:渐变开始点x坐标
ystart:渐变开始点y坐标
xEnd:渐变结束点x坐标
yEnd:渐变结束点y坐标
offset:设定的颜色离渐变结束点的偏移量(0~1)
color:绘制时要使用的颜色
图形变形
1、平移context.translate(x,y)
x:坐标原点向x轴方向平移x
y:坐标原点向y轴方向平移y
2、缩放context.scale(x,y)
x:x坐标轴按x比例缩放
y:y坐标轴按y比例缩放
3、旋转context.rotate(angle)
angle:坐标轴旋转x角度（角度变化模型和画圆的模型一样）
矩阵变换 context.transform(m11,m12,m21,m22,dx,dy)
http://hi.baidu.com/100912bb_bb/item/90c4a7489518b0fa1281daf1
图形组合 context.globalCompositeOperation=type
type：
source-over（默认值）:在原有图形上绘制新图形
destination-over:在原有图形下绘制新图形
source-in:显示原有图形和新图形的交集，新图形在上，所以颜色为新图形的颜色
destination-in:显示原有图形和新图形的交集，原有图形在上，所以颜色为原有图形的颜色
source-out:只显示新图形非交集部分
destination-out:只显示原有图形非交集部分
source-atop:显示原有图形和交集部分，新图形在上，所以交集部分的颜色为新图形的颜色
destination-atop:显示新图形和交集部分，新图形在下，所以交集部分的颜色为原有图形的颜色
lighter:原有图形和新图形都显示，交集部分做颜色叠加
xor:重叠飞部分不现实
copy:只显示新图形
给图形绘制阴影
context.shadowOffsetX :阴影的横向位移量（默认值为0）
context.shadowOffsetY :阴影的纵向位移量（默认值为0）
context.shadowColor :阴影的颜色
context.shadowBlur :阴影的模糊范围（值越大越模糊）
绘制图像
绘图：context.drawImage
图像平铺：context.createPattern(image,type)
图像裁剪：context.clip()
像素处理：var imagedata=context.getImageData(sx,sy,sw,sh)
绘图 context.drawImage
context.drawImage(image,x,y)
image:Image对象var img=new Image(); img.src="url(...)";
x:绘制图像的x坐标
y:绘制图像的y坐标
context.drawImage(image,x,y,w,h)
image:Image对象var img=new Image(); img.src="url(...)";
x:绘制图像的x坐标
y:绘制图像的y坐标
w:绘制图像的宽度
h:绘制图像的高度
context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh):选取图像的一部分矩形区域进行绘制
image:Image对象var img=new Image(); img.src="url(...)";
sx：图像上的x坐标
sy：图像上的y坐标
sw：矩形区域的宽度
sh：矩形区域的高度
dx：画在canvas的x坐标
dy：画在canvas的y坐标
dw：画出来的宽度
dh：画出来的高度
图像平铺 context.createPattern(image,type)
type:
no-repeat:不平铺
repeat-x:横方向平铺
repeat-y:纵方向平铺
repeat:全方向平铺
图像裁剪：context.clip()
context.clip()只绘制封闭路径区域内的图像，不绘制路径外部图像，用的时候
先创建裁剪区域
再绘制图像（之后绘制的图形都会采用这个裁剪区域，要取消这个裁剪区域就需要用到保存恢复状态，下面有讲）
像素处理：
获取像素颜色数组： var imagedata=context.getImageData(sx,sy,sw,sh)
sx:cavas的x轴坐标点
sy:canvas的y轴坐标点
sw:距离x的宽度
sh:距离y的高度
设置像素颜色：context.putImageData(imagedata,dx,dy,dirtyX,dirtyY,dirtyWidth,dirtyHeight)
对imagedata数组中的各个像素的r、g、b、a值进行修改，再调用putImageData方法进行绘制
imagedata:修改后的imagedata
dx:重绘图像的起点横坐标（重绘的起点和原来的图像一致的话就会把原来的图形覆盖掉，看起来就像是原来的图像变成现在的图像一样）
dy:重绘图像的起点纵坐标
//以下可选参数，设置重绘的矩形范围，如果缺省，默认会重绘所有的imegedata
dirtyX:矩形左上角x轴坐标
dirtyY:矩形左上角y轴坐标
dirtyWidth:矩形长度
dirtyHeight:矩形高度
绘制文字
填充文字：context.fillText(text,x,y)
绘制文字轮廓 context.strokeText(text,x,y)
text:要绘制的文字
x:文字起点的x坐标轴
y:文字起点的y坐标轴
context.font:设置字体样式
context.textAlign:水平对齐方式
start、end、right、center
context.textBaseline:垂直对齐方式
top、hanging、middle、alphabetic、ideographic、bottom
var length=context.measureText(text):计算字体长度(px)
那么能不能计算高度啊，很遗憾，不能
保存和恢复状态
保存：context.save()
恢复：context.restore()
context.save()：调用该方法，会保存当前context的状态、属性（把他理解成游戏存档）
context.restore():调用该方法就能恢复到save时候context的状态、属性（游戏回档）
保存文件 canvas.toDataURL(MIME)
结合setInterval制作动画
转自：http://www.cnblogs.com/tim-li/archive/2012/08/06/2580252.html#18
标签：绘制矩形 透明 tco 调用 高度 方式 画圆 clip 水平
原文地址：https://www.cnblogs.com/sjbhz/p/9991333.html
