-
初始化
-
canvas标签:
<canvas width="宽度" height="高度" id='mycanvas'> <span>当前浏览器不支持canvas</span> </canvas>
如果不指定宽高 则 默认是 宽:300 高:150你可以象定义一般html标签一样对canvas任意使用样式 但是不会影响绘图结果 如果不指定样式 则canvas将是默认透明的获取canvas 2D绘图接口//获取canvas DOM var canvas = document.getElementById('canvas'); //从canvas对象获取2D图形接口 var context2D = canvas.getContext('2d');
全局参数
-
建立一个canvas状态的还原点回复最后一个还原点的状态save按照入栈的方式保存状态,则每次restore将进行一次状态的出栈操作设置当前填充的全局透明度 0.0 - 1 之间值为 false 时,图像不会平滑地缩放。默认是 true 。表示将要绘制的图形和原有图形的叠放关系 取其中的值['source-over','source-in','source-out','source-atop', 'destination-over','destination-in','destination-out','destination-atop', 'lighter','darker','copy','xor']
线型
-
设置当前绘线的宽度,必须是正数,默认值是1.0
线宽是指给定路径的中心到两边的粗细线端的显示样式(butt, round, square)butt是默认值,表示无样式 round表示圆形端点 square表示方形端点定义两条线段连接处的样式(round,bevel,miter(默认))round圆角连接 bevel平角连接 miter延伸连接(受到miterLine属性的制约)
样式 颜色 渐变
-
设置填充色设置轮廓色
//以下是允许的颜色描述方式 下面每种方式都声明了橘黄色 ctx.fillStyle = "orange"; ctx.fillStyle = "#FFA500"; ctx.fillStyle = "rgb(255,165,0)"; ctx.fillStyle = "rgba(255,165,0,1)";
建立一个线性渐变,表示渐变的起点 (x1,y1) 与终点 (x2,y2)。建立一个圆形渐变,前三个定义一个以 (x1,y1) 为原点,半径为 r1 的圆,后三个参数则定义另一个以 (x2,y2) 为原点,半径为 r2 的圆。对于建立的渐变对象可以调用的添加颜色的方法.position 参数必须是一个 0.0 与 1.0 之间的数值,表示渐变中颜色所在的相对位置。例如,0.5 表示颜色会出现在正中间。color 参数必须是一个有效的 CSS 颜色值(如 #FFF, rgba(0,0,0,1),等等)。该方法接受两个参数。Image 可以是一个 Image 对象的引用,或者另一个 canvas 对象。Type 必须是下面的字符串值之一:repeat,repeat-x,repeat-y 和 no-repeat。图案的应用跟渐变很类似的,创建出一个 pattern 之后,赋给 fillStyle 或 strokeStyle 属性即可。
路径相关
-
创建一个路径。在内存里,路径是以一组子路径(直线,弧线等)的形式储存的,它们共同构成一个图形。每次调用 beginPath,子路径组都会被重置,然后可以绘制新的图形。直线连接当前端点与起始端点来关闭路径,但如果图形已经关闭或者只有一个点,它会什么都不做。这一步不是必须的设置开始坐标为x,y相对开始坐标开始至x,y坐标定义直线方法接受五个参数:x,y 是圆心坐标,radius 是半径,startAngle 和 endAngle 分别是起末弧度(以 x 轴为基准),anticlockwise 为 true 表示逆时针,反之顺时针。2次贝塞尔曲线3次贝塞尔曲线根据前面的定义绘制路径填充当前路径定义的区域注意:当调用 fill 时,开放的路径会自动闭合,而无须调用 closePath 。
绘制
-
绘制指定的矩形线框在指定坐标填充指定高宽的矩形区域清楚指定的矩形区域
填充
图片处理
-
其中 image 是 image 或者 canvas 对象,x 和 y 是其在目标 canvas 里的起始坐标, width height是绘制的图片的宽度高度。第一个参数和其它的是相同的,都是一个图像或者另一个 canvas 的引用。其它8个参数最好是参照右边的图解,前4个是定义图像源的切片位置和大小,后4个则是定义切片的目标显示位置和大小。
变形
-
移动原点到指定位置,默认的原点是0,0使用整个画布饶原点旋转指定的弧度x,y 分别是横轴和纵轴的缩放因子,它们都必须是正值。值比 1.0 小表示缩小,比 1.0 大则表示放大,值为 1.0 时什么效果都没有这个方法必须将当前的变形矩阵乘上下面的矩阵:
m11 m21 dx m12 m22 dy 0 0 1 这个方法必须重置当前的变形矩阵为单位矩阵,然后以相同的参数调用 transform 方法。如果任意一个参数是无限大,那么变形矩阵也必须被标记为无限大,否则会抛出异常。
Canvas+Api整理
最新推荐文章于 2024-09-20 13:42:43 发布